ASP.NET Core（十二）前端 JS、CSS 捆绑和压缩

小渣渣

需求：在之前的 .NET Framework 框架 MVC 项目中，可以使用微软的 Microsoft.AspNet.Web.Optimization 类库对 JS、CSS 进行捆绑和压缩。使用 ASP.NET Core 后，如何对现有的 JS、CSS 文件进行捆绑和压缩呢？

.NET Framework 项目引用如下：

登录可见。

示例代码：

登录可见。

捆绑

捆绑将多个文件组合成一个文件。捆绑减少了呈现 Web 资产（例如网页）所需的服务器请求的数量。您可以专门为 CSS、JavaScript 等创建任意数量的单独捆绑包。更少的文件意味着从浏览器到服务器或从提供应用程序的服务的 HTTP 请求更少。这会提高首页加载性能。

压缩

缩小从代码中删除不必要的字符而不改变功能。结果是请求的资源（例如 CSS、图像和 JavaScript 文件）的大小显着减小。缩小的常见副作用包括将变量名称缩短为一个字符并删除注释和不必要的空格。同时还能混淆一下代码，不利于其他竞争对手阅读我们的源代码。

捆绑和压缩对性能的提升

下表概述了单独加载资产与使用捆绑和缩小之间的差异：



在网络传输方面节省了流量，提升了加载速度，同时，也减少了 HTTP 请求，也会提升加载速度。

对于 HTTP 请求头，浏览器是非常详细的。 捆绑时，已发送的总字节数指标明显减少。 加载时间显示了显著改进，但本示例在本地运行。 将捆绑和缩小与通过网络传输的资产结合使用时，可实现更高的性能提升。

ASP.NET Core 没有自带捆绑和压缩的解决方案，需要使用第三方提供的解决方案，本文使用的是“LigerShark.WebOptimizer.Core”（该类库最终调用的是 NUglify 实现对 JS 和 CSS 处理），GitHub 地址：超链接登录可见。

首先，新建一个 ASP.NET Core 6 的项目，执行如下命令引用：

登录可见。

在项目 wwwroot 新建一个 static 文件夹来存放测试的 css、js 文件。随便新建一个 css 和 js 文件，如下图：



修改 Program.cs 文件，添加 WebOptimizer 服务和中间件，主要代码如下：

登录可见。

尝试启动项目，我们发现 css 和 js 的代码的注释都已经被删除了，文件也已经被压缩了，其中，js 中的一些变量被缩减成了单个字母，如下图：



再从 static 文件夹新建一个 js 文件，测试捆绑功能，将 test.js 和 test2.js 捆绑成一个 common.js 文件（并不会生成 common.js 物理文件），配置代码如下：

登录可见。

效果图如下：



参考：

超链接登录可见。
超链接登录可见。

小渣渣

回顾：

ASP.NET Core（十一）端点路由添加中间件显示所有 DI 服务
https://www.itsvse.com/thread-10269-1-1.html

ASP.NET Core（十）Configuration 配置优先级详解
https://www.itsvse.com/thread-10265-1-1.html

ASP.NET Core（九） 之 Middleware 中间件详解
https://www.itsvse.com/thread-9647-1-1.html

ASP.NET Core 中间件（Middleware）详解
https://www.itsvse.com/thread-8126-1-1.html

ASP.NET Core（八） 之 Swagger UI 默认参数的坑
https://www.itsvse.com/thread-9640-1-1.html

ASP.NET Core（七）深入刨析框架源码
https://www.itsvse.com/thread-9601-1-1.html

ASP.NET Core（六）DI 手动获取注入对象的方法
https://www.itsvse.com/thread-9595-1-1.html

ASP.NET Core（五）基于 CAP 分布式事务
https://www.itsvse.com/thread-9593-1-1.html

ASP.NET Core（四）之过滤器统一 ModelState 模型验证
https://www.itsvse.com/thread-9589-1-1.html

ASP.NET Core（三）使用 ActivatorUtilities 动态创建实例
https://www.itsvse.com/thread-9488-1-1.html

ASP.NET Core（二）通过代码自重启应用
https://www.itsvse.com/thread-9480-1-1.html

ASP.NET Core（一）使用 Redis 缓存
https://www.itsvse.com/thread-9393-1-1.html

飞鱼

学习学习。。

johnyoung

Ligershark.WebOptimizer.Core  和  WebMarkupMin.AspNetCore6 都试过了

小渣渣

johnyoung 发表于 2022-4-6 12:02
Ligershark.WebOptimizer.Core  和  WebMarkupMin.AspNetCore6 都试过了

感觉哪个比较好

johnyoung

(不知道怎么删除发重复的评论，站长看到请删除此条)

johnyoung

小渣渣 发表于 2022-4-6 13:45
感觉哪个比较好

我初步了解：前者是捆绑和压缩js和css文件，后者是压缩页面html以及页面上的js和css代码和Http压缩等，后面是否能捆绑和压缩js和css文件尚不清楚。都只是试了一下，没有深入用。期待你探索一下再发一篇。

小渣渣

配置开发环境不压缩css、js，代码：

登录可见。

小渣渣

前端使用 minify 压缩、合并多个 css 文件
https://www.itsvse.com/thread-10845-1-1.html