多选文件如何添加压缩文件夹

对于前端性能优化方法有很多，包括：图片合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩，给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。

在介绍这个项目之前，先问大家一个问题，大家知道一个浏览器同域名请求的最大并发数限制是多少吗？

在早期的浏览器有的是2个、有的是4个，现在市面主流的浏览器一般限制数量是6个，手机一般是4个。虽然每个浏览器限制数量不一样，但我们知道的是，当一个页面同时发起过多的请求，肯定会导致部分请求在等待的。

所以，我们压缩和合并静态资源请求数量，对于我们优化性能肯定有好处的。

项目简介

这是一个基于.Net Core开发的，实现压缩css、Javascript、Html资源的压缩、合并功能的组件。通过这个组件我们就可以实现静态资源的捆绑，实现对js、css、less、scss等静态资源的自动打包捆绑处理。

通过将多个文件合并成了一个文件，减少浏览器的请求从而实现提升网站的访问性能的需求。

特点：

1、Js压缩：进行去掉空格，换行，注释等，格式紧凑，内部方法匿名化，节约存储空间。

2、Css压缩：去掉空格，换行，注释等，格式紧凑，节约存储空间。

3、Html压缩：压缩效果可以实现5-10%的压缩，删除助手、折叠空白、删除可选标记（p、li…）、删除引用的属性、删除特定属性、解码HTML实体、压缩内联样式和脚本；支持Html5。

技术架构

1、平台：基于.Net Core 4.5、Ne开发

2、开发工具：Visual Studio 2017

项目结构

使用方法

Js文件压缩

var result = Ugli("var x = 5; var y = 6;"); Con); // prints: var x=5,y=6

Css文件压缩

var result = Ugli("div { color: #FFF; }"); Con); // prints: div{color:#fff}

Html文件压缩

var result = Ugli("<div> <p>This is <em> a text </em></p> </div>"); Con); //prints: <div><p>This is <em>a text</em></div>

文本解析Html

var result = UgliToText("<div> <p>This is <em> a text </em></p> </div>"); Con); // prints: This is a text

Js、Css文件合并请求示例

a(bundles => { bundles.LoadFromConfigFile(";, _env.ContentRootFileProvider); // 如果你需要对Bundle Minifier的配置也进行处理 bundles.AddCss(";) // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名 .Include("/Conten;) .Include("/fon;) .Include("/Conten;) .Include("/Content/common;) .Include("/Content/common;) .Include("/Content/common;) .Include("/Content/common;) .Include("/Content/common;) .Include("/Conten;) .Include("/Assets/breadcrumb;) .Include("/Assets/nav/css;) .Include("/Assets/tippy;); bundles.AddJs(";) // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名 .Include("/Scri;) .Include("/Scri;) .Include("/Scri;) .Include("/Scri;) .Include("/Scri;) .Include("/Scripts/global;) .Include("/Assets/tippy;) .Include("/Assets/newsbox;) .Include("/Assets/tagcloud/j;) .Include("/Assets/scrolltop/j;) .Include("/Assets/nav/js;); });

最后，对于提升网站性能虽然非常重要，但合并文件如果太大，也是会影响性能的。另外采用合并中间件，对于开发的时候需要编写额外的代码、相对于原生的写法比较不直观，所以在优化性能的同时，我们也要找到一个平衡点，而不是一味的追求性能优化。

源码获取

私信回复：1070

- End -