WebOptimizer：轻松实现 CSS 和 JavaScript 的压缩与打包，全面提升 ASP.NET Core 性能
|
admin
2025年4月16日 9:7
本文热度 127
|
对于前端性能优化方法有很多，包括：图片合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩，给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。WebOptimizer 是一个专为 ASP.NET Core 设计的开源工具，用于在运行时对 CSS 和 JavaScript 文件进行 打包（Bundling） 和 压缩（Minification），从而提升 Web 应用的性能。它通过中间件的方式在服务器端处理静态文件，支持缓存优化和高度可扩展的管道配置。
压缩（Minification）
打包（Bundling）
缓存优化
Tag Helpers
插件扩展
WebOptimizer.Sass：将 SCSS 文件编译为 CSS。
WebOptimizer.TypeScript：将 TypeScript 编译为 JavaScript。
WebOptimizer.AutoPrefixer：为 CSS 添加浏览器前缀。
支持多种插件，例如：
1、安装依赖库
dotnet add package LigerShark.WebOptimizer.Core
2、配置中间件
services.AddWebOptimizer();...
app.UseWebOptimizer();app.UseStaticFiles();
3、配置打包和压缩，指定文件名或者使用通配符
services.AddWebOptimizer(pipeline =>{ // 压缩特定文件 pipeline.MinifyJsFiles("js/a.js", "js/b.js"); pipeline.MinifyCssFiles("css/**/*.css");
// 打包文件 pipeline.AddCssBundle("/css/bundle.css", "css/*.css"); pipeline.AddJavaScriptBundle("/js/bundle.js", "js/*.js");});
4、合并文件
services.AddWebOptimizer(pipeline =>{ pipeline.AddCssBundle("/css/bundle.css", "css/a.css", "css/b.css"); pipeline.AddCssBundle("/css/bundle.css", "css/**/*.css");});
5、指定文件夹
默认情况下，所有捆绑包源文件都与 Web Root（ wwwroot ）文件夹相关，但您可以将其更改为与 Content Root 相关。创建一个位于内容根目录中名为 node_modules 的文件夹中的文件包：services.AddWebOptimizer(pipeline =>{ pipeline.AddCssBundle("/css/bundle.css", "node_modules/jquery/dist/*.js") .UseContentRoot();});
完全自定义的IFileProvider，您可以使用UseFileProvider管道方法。
services.AddWebOptimizer(pipeline =>{ var provider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(@"C:\path\to\my\root\folder"); pipeline.AddJavaScriptBundle("/js/scripts.js", "a.js", "b.js") .UseFileProvider(provider);});
04
该文章在 2025/4/17 11:41:45 编辑过
400 186 1886
