一个可对JS、CSS等静态资源合并与压缩.Net开源项目

对于前端性能优化方法有很多,包括:合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩,给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。
在介绍这个项目之前,先问大家一个问题,大家知道一个浏览器同域名请求的最大并发数限制是多少吗?
在早期的浏览器有的是2个、有的是4个,现在市面主流的浏览器一般限制数量是6个,手机一般是4个。虽然每个浏览器限制数量不一样,但我们知道的是,当一个页面同时发起过多的请求,肯定会导致部分请求在等待的。
所以,我们压缩和合并静态资源请求数量,对于我们优化性能肯定有好处的。

01项目简介
这是一个基于.Net Core开发的,实现压缩Css、Javascript、Html资源的压缩、合并功能的组件。通过这个组件我们就可以实现静态资源的捆绑,实现对js、css、less、scss等静态资源的自动打包捆绑处理。
通过将多个文件合并成了一个文件,减少浏览器的请求从而实现提升网站的访问性能的需求。

02项目特点
1、Js压缩:进行去掉空格,换行,注释等,格式紧凑,内部方法匿名化,节约存储空间。
2、Css压缩:去掉空格,换行,注释等,格式紧凑,节约存储空间。
3、Html压缩:压缩效果可以实现5-10%的压缩,删除助手、折叠空白、删除可选标记(p、li…)、删除引用的属性、删除特定属性、解码HTML实体、压缩内联样式和脚本;支持Html5。

03项目结构
1、平台:基于.Net Core 4.5、Netstandard2.0开发
2、开发工具:Visual Studio 2017
项目结构

图片

04使用方法
Js文件压缩
var result = Uglify.Js(“var x = 5; var y = 6;”);
Console.WriteLine(result.Code);
// prints: var x=5,y=6
Css文件压缩
var result = Uglify.Css(“div { color: #FFF; }”);
Console.WriteLine(result.Code);
// prints: div{color:#fff}
Html文件压缩
var result = Uglify.Html(“

This is a text “);
Console.WriteLine(result.Code);
//prints:

This is a text
文本解析Html
var result = Uglify.HtmlToText(“

This is a text “);
Console.WriteLine(result.Code);
// prints: This is a text
Js、Css文件合并请求示例
app.UseBundling(bundles =>
{
bundles.LoadFromConfigFile(“/bundleconfig.json”, _env.ContentRootFileProvider); // 如果你需要对Bundle Minifier的配置也进行处理
bundles.AddCss(“/main.css”) // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名
.Include(“/Content/bootstrap.min.css”)
.Include(“/fonts/icomoon.min.css”)
.Include(“/Content/jquery.paging.css”)
.Include(“/Content/common/reset.css”)
.Include(“/Content/common/loading.css”)
.Include(“/Content/common/style.css”)
.Include(“/Content/common/articlestyle.css”)
.Include(“/Content/common/leaderboard.css”)
.Include(“/Content/microtip.min.css”)
.Include(“/Assets/breadcrumb/style.css”)
.Include(“/Assets/nav/css/style.css”)
.Include(“/Assets/tippy/tippy.css”);

bundles.AddJs("/main.js") // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名
      .Include("/Scripts/bootstrap.min.js")
    .Include("/Scripts/bootstrap-suggest.min.js")
    .Include("/Scripts/jquery.query.js")
    .Include("/Scripts/jquery.paging.js")
    .Include("/Scripts/ripplet.js")
    .Include("/Scripts/global/scripts.js")
    .Include("/Assets/tippy/tippy.js")
    .Include("/Assets/newsbox/jquery.bootstrap.newsbox.js")
    .Include("/Assets/tagcloud/js/tagcloud.js")
    .Include("/Assets/scrolltop/js/scrolltop.js")
    .Include("/Assets/nav/js/main.js");

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

05项目地址
https://github.com/trullock/NUglify
最后推荐加入我的 知识星球,里面包含7个教程,其中有:《三层架构教程》与《领域驱动设计架构教程》,还有现在正在编写的《动态Web API》教程。

声明:文中观点不代表本站立场。本文传送门:https://eyangzhen.com/414036.html

联系我们
联系我们
分享本页
返回顶部