終於等到你！WebOptimizer - A bundler and minifier for ASP.NET Core

dudu發表於2018-04-19
WebOptimizerNifiASP.NET

迷人的 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 進行打包

注意：

WebOptimizer 使用的 css minifier 引擎是 Uglify ，在處理有些 css 檔案時會造成 CPU 100% ，我們就實際遇到過。

相關文章