轉:https://www.cnblogs.com/dudu/p/8880525.html
迷人的 ASP.NET Core 有一個美中不足之處,自從一開始接觸它到現在,我就一直不喜歡,一直想找到替代品,甚至想過自己實現一個,它就是 BundlerMinifier 。
昨天面對 bundleconfig.json 中的一堆配置,又帶着僥倖的心理試着在網上搜了搜看有沒有替代品,突然發現了 WebOptimizer :
ASP.NET Core middleware for bundling and minification of CSS and JavaScript files at runtime. With full server-side and client-side caching to ensure high performance. No complicated build process and no hassle.
一看介紹就感覺它就是我一直在苦苦尋找與等待的,於是立馬在項目中嘗試體驗。
先安裝 nuget 包
dotnet add package LigerShark.WebOptimizer.Core
然後在 Startup 的 ConfigureServices 中配置好 Bundle 並註冊到依賴注入容器
public void ConfigureServices(IServiceCollection services) { services.AddWebOptimizer(ConfigureBundles); } private void ConfigureBundles(IAssetPipeline pipeline) { pipeline.AddCssBundle("/css/signup.min.css", "css/account/signup.css"); pipeline.AddJavaScriptBundle("/js/signup.min.js", "lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js", "lib/jquery-validation/dist/jquery.validate.js", "js/account/signup.js"); }
接着通過 Startup 的 Configure 將其添加到 Middleware 管線
public void Configure(IApplicationBuilder app) { app.UseWebOptimizer(); }
最後在 _ViewImports.cshtml 中添加 WebOptimizer.Core 的 TagHelper 引用
@addTagHelper *, WebOptimizer.Core
添加 TagHelper 之後,WebOptimizer.Core 會自動給視圖中的 css/js 引用加上版本號查詢字符串,連 asp-append-version="true" 都不需要,比如下面的 css/js 引用
<link href="~/css/signup.min.css" rel="stylesheet" /> <script src="~/js/signup.min.js"></script>
會被自動轉換爲
<link href="/css/signup.min.css?v=l1oNLvTwQYc06WsxQTHsgCtv7Hs" rel="stylesheet" /> <script src="/js/signup.min.js?v=_b5vuVfEmb-PSHHvHWLVB7PPi7w"></script>
這樣就搞定了!
果然它就是我一直在找的 BundlerMinifier 的替代品。
補充:
如何讓 WebOptimizer 在 Development 環境下不對 css/js 進行打包?
只要在 appsettings.Development.json 中將 enableTagHelperBundling
設置爲 false
{ "webOptimizer": { "enableTagHelperBundling": false } } 或者 if (Env.IsDevelopment()) { services.AddWebOptimizer(minifyCss: false, minifyJavaScript: false); }
注意:
WebOptimizer 使用的 css minifier 引擎是 Uglify ,在處理有些 css 文件時會造成 CPU 100% ,我們就實際遇到過。