[食譜好菜] BundleConfig 在 ASP.NET Core 還存在嗎?

原先從 ASP.NET MVC 4 開始就有的能幫助我們針對 js、css 靜態檔案做 Bundling 及 Minification 的 BundleConfig 到了 ASP.NET Core 還在嗎?答案是有的,只是換了一種使用方式,大致上還是跟原先一樣有兩個步驟:

  1. 設定要 Include 的指令碼檔案
  2. 在 View 裡面嵌入使用

但實現細節卻大不相同,我們來看看是怎麼個不同法?

從範本建立專案

為了方便起見我就用 ASP.NET Core Web 應用程式 (.NET Core) 這個專案範本建立範例專案。

建好專案之後就可以看到一個檔案 bundleconfig.json,設定要 Include 的指令碼檔案就在裡面做。

有關於 bundleconfig.json 更詳細的設定說明可以參考 - JavaScript Minifier settings

安裝 Bundler & Minifier

要讓 Bundling 及 Minification 可以作用,還需要安裝 Bundler & Minifier 擴充套件。

裝完之後呢,在 bundleconfig.json 上按右鍵,找到 Bundler & MinifierEnable bundle on build... 這個選項打勾,這樣在建置的時候就會自動處理 Bundling 及 Minification。

實際來試試

我把我手邊最大一坨 js code 貼上去處理看看,可以看到原本 361KB,處理過後檔案大小降到 268KB,少了 25.76%。

要引用處理完的指令碼檔,在過去是使用 @Scripts.Render()@Styles.Render() 將指令碼檔加入到網頁之中,現在只要在引用打包完後的指令碼檔時,加一個屬性叫 asp-append-version 的 TagHelper,把它設定為 true 就可以了。

那 UseCdn 的屬性有沒有?

有,當然有,不過使用方式改變了一下,假設我要從 cdnjs.cloudflare.com 引用 jQuery 2.2.0 就會變這樣:

這啥?!這個叫 SRI(Subresource Integrity) 規格,它的概念是在指定資源的時候加上加密雜湊碼,在瀏覽器下載完指令碼檔案後,針對已經下載的指令碼檔案計算出加密雜湊碼,只有在兩邊的雜湊碼相同時才會執行指令碼。

如果我們不知道 CDN 資源的雜湊碼怎麼辦?可以到 SRI Hash Generator 這個網站,請它幫我們產生。

integrity

integrity 屬性是放置加密雜湊碼的地方,格式是 sha{輸出雜湊值長度}-{雜湊碼}

crossorigin

crossorigin 屬性如果是對 CDN 的話通常是設定 anonymous,意思是忽略任何使用者留下的 cookie 或驗證資料。

asp-fallback-src

這個是 ASP.NET Core 的 TagHelper,意思就是當 CDN 資源無法使用的時候的備援資源。

asp-fallback-test

這個也是 ASP.NET Core 的 TagHelper,用來測試如果 CDN 資源可以使用的狀況下,則哪些物件應該是已定義的狀態?

來看一下最終產出來的 code

順便來測試當 CDN 資源無法使用的時候會發生什麼事?我這邊就將 jQuery 的版本調成 2.2.1,而雜湊碼不變,刻意地測試雜湊碼不匹配的狀況。

可以看到 Console 的錯誤訊息很明顯地告訴我們 Failed to find a valid digest in the 'integrity' attribute for resource...,接著瀏覽器又隨即從備援資源下載正確版本的 jQuery,讓網站得以順利執行。

參考資料

C# 指南ASP.NET 教學ASP.NET MVC 指引
Azure SQL Database 教學SQL Server 教學Xamarin.Forms 教學