原先從 ASP.NET MVC 4 開始就有的能幫助我們針對 js、css 靜態檔案做 Bundling 及 Minification 的 BundleConfig 到了 ASP.NET Core 還在嗎?答案是有的,只是換了一種使用方式,大致上還是跟原先一樣有兩個步驟:
- 設定要 Include 的指令碼檔案
- 在 View 裡面嵌入使用
但實現細節卻大不相同,我們來看看是怎麼個不同法?
從範本建立專案
為了方便起見我就用 ASP.NET Core Web 應用程式 (.NET Core)
這個專案範本建立範例專案。
建好專案之後就可以看到一個檔案 bundleconfig.json
,設定要 Include 的指令碼檔案就在裡面做。
有關於 bundleconfig.json 更詳細的設定說明可以參考 - JavaScript Minifier settings。
安裝 Bundler & Minifier
要讓 Bundling 及 Minification 可以作用,還需要安裝 Bundler & Minifier 擴充套件。
裝完之後呢,在 bundleconfig.json 上按右鍵,找到 Bundler & Minifier
把 Enable 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,讓網站得以順利執行。