架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 7581|回复: 6

[资料] ASP.NET Core(十二)前端 JS、CSS 捆绑和压缩

[复制链接]
发表于 2022-3-28 20:55:50 | 显示全部楼层 |阅读模式
需求:在之前的 .NET Framework 框架 MVC 项目中,可以使用微软的 Microsoft.AspNet.Web.Optimization 类库对 JS、CSS 进行捆绑和压缩。使用 ASP.NET Core 后,如何对现有的 JS、CSS 文件进行捆绑和压缩呢?

.NET Framework 项目引用如下:

示例代码:

捆绑

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

压缩

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

捆绑和压缩对性能的提升

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

QQ截图20220328205405.jpg

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

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

ASP.NET Core 没有自带捆绑和压缩的解决方案,需要使用第三方提供的解决方案,本文使用的是“LigerShark.WebOptimizer.Core”(该类库最终调用的是 NUglify 实现对 JS 和 CSS 处理),GitHub 地址:https://github.com/ligershark/WebOptimizer

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

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

QQ截图20220328203929.jpg

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

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

QQ截图20220328204444.jpg

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

效果图如下:

QQ截图20220328204855.jpg

参考:

https://docs.microsoft.com/zh-cn/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-6.0
https://github.com/ligershark/WebOptimizer





上一篇:C# 8.0 可为空引用类型
下一篇:【实战】.NET 6 Random 生成随机数测试
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2022-3-28 20:56:47 | 显示全部楼层
回顾:

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
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2022-3-29 00:38:21 | 显示全部楼层
学习学习。。
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2022-4-6 12:02:33 | 显示全部楼层
Ligershark.WebOptimizer.Core  和  WebMarkupMin.AspNetCore6 都试过了
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2022-4-6 13:45:12 | 显示全部楼层
johnyoung 发表于 2022-4-6 12:02
Ligershark.WebOptimizer.Core  和  WebMarkupMin.AspNetCore6 都试过了

感觉哪个比较好
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2022-4-6 14:53:12 | 显示全部楼层
本帖最后由 johnyoung 于 2022-4-6 14:56 编辑

(不知道怎么删除发重复的评论,站长看到请删除此条)
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
发表于 2022-4-6 14:54:11 | 显示全部楼层

我初步了解:前者是捆绑和压缩js和css文件,后者是压缩页面html以及页面上的js和css代码和Http压缩等,后面是否能捆绑和压缩js和css文件尚不清楚。都只是试了一下,没有深入用。期待你探索一下再发一篇。
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-3-29 10:18

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表