摘要：对于前端性能优化方法有很多，包括：图片合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩，给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。
对于前端性能优化方法有很多，包括：图片合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩，给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。
01 项目简介
WebOptimizer 是一个专为 ASP.NET Core 设计的开源工具，用于在运行时对 CSS 和 Javascript 文件进行 打包（Bundling） 和 压缩（Minification），从而提升 Web 应用的性能。
它通过中间件的方式在服务器端处理静态文件，支持缓存优化和高度可扩展的管道配置。
02 核心功能
压缩（Minification）
去除代码中的多余字符（如空格、注释等），减小文件大小。
支持 JavaScript 和 CSS 文件的自动压缩。
使用 NUglify 作为压缩引擎。
打包（Bundling）
将多个文件合并为一个文件，减少 HTTP 请求。
支持通过通配符（Globbing Patterns）指定文件路径，方便批量处理。
缓存优化
提供服务器端和客户端缓存支持。
自动为文件添加版本参数（Cache Busting），确保浏览器缓存的正确性。
Tag Helpers
提供 Razor 文件中的 和标签扩展，支持缓存优化和内容内联。
支持通过 inline属性将文件内容直接嵌入 HTML 页面。
插件扩展
WebOptimizer.Sass：将 SCSS 文件编译为 CSS。
WebOptimizer.TypeScript：将 TypeScript 编译为 JavaScript。
WebOptimizer.AutoPrefixer：为 CSS 添加浏览器前缀。
支持多种插件，例如：
03 使用入门
1、安装依赖库
dotnet add package LigerShark.WebOptimizer.Core2、配置中间件
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 项目地址
- End -
来源：opendotnet