對于前端性能優(yōu)化方法有很多，包括：圖片合并、使用緩存、使用CDN、減少重定向、減少請求、壓縮等等。今天就針對減少請求、資源壓縮，給大家推薦一個基于.Net開發(fā)的資源合并與壓縮的開源項(xiàng)目。WebOptimizer 是一個專為 ASP.NET Core 設(shè)計的開源工具，用于在運(yùn)行時對 CSS 和 JavaScript 文件進(jìn)行 打包（Bundling） 和 壓縮（Minification），從而提升 Web 應(yīng)用的性能。它通過中間件的方式在服務(wù)器端處理靜態(tài)文件，支持緩存優(yōu)化和高度可擴(kuò)展的管道配置。
壓縮（Minification）
打包（Bundling）
緩存優(yōu)化
Tag Helpers
插件擴(kuò)展
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、指定文件夾
默認(rèn)情況下，所有捆綁包源文件都與 Web Root（ wwwroot ）文件夾相關(guān)，但您可以將其更改為與 Content Root 相關(guān)。創(chuàng)建一個位于內(nèi)容根目錄中名為 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
