第十一節：Bundles壓縮合並js和css及原理分析

一. 簡介

 1.背景：瀏覽器默認一次性請求的網絡數是有上限的,若是你得js和css文件太多，就會致使瀏覽器須要屢次加載，影響頁面的加載速度, MVC中提供Bundles的方式壓縮合並js和css，是MVC中特有的一種優化方式。

 (固然如今前端也有不少基於node的工做流插件，能夠合併壓縮混淆js或css)

2. 原理(瞭解便可)：核心方法ApplyTransforms，經過StreamReader不斷一次一次進行讀取

  參考文檔：https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

二. 如何使用

 ①：首先要在Global中進行註冊,代碼：BundleConfig.RegisterBundles(BundleTable.Bundles); 【系統默認已經註冊，此步驟不須要咱們操做】

 ②：在BundleConfig類中進行自定義合併壓縮js或css

　　　a. 壓縮css方法：bundles.Add(new StyleBundle("~/XXX").Include("","",""));

　　　　StyleBundle中的參數爲一個虛擬路徑，單必須以【~/】開頭，後面自定義，該名稱即爲在前端頁面引入的名稱。

　　　　Include中的參數爲一個可變的string數組，用來聲明要壓縮合並的css文件的路徑。

　　　b. 壓縮js方法：bundles.Add(new ScriptBundle("~/XXX").Include("","",""));

　　　　ScriptBundle中的參數爲一個虛擬路徑，單必須以【~/】開頭，後面自定義，該名稱即爲在前端頁面引入的名稱

　　　　Include中的參數爲一個可變的string數組，用來聲明要壓縮合並的css文件的路徑。

③：在前端頁面經過Render方法或者原生方法引入合併後的js或css的虛擬目錄

④：將webconfig中的調試模式設置爲false，這樣在不發佈的狀況下就能夠看到壓縮後的效果。

　　　　<compilation debug="false" targetFramework="4.5" />

　　若是設置爲true，直接在vs中運行，是看不到壓縮效果的，仍然是多個js或css文件 (適用於經過Render方式的引入)

⑤：該步驟和④的效果相同.

　　若是不設置④的狀況下，還想在vs中運行看到壓縮效果，也能夠在BundleConfig中加一句話：

　　BundleTable.EnableOptimizations = true; （特別注意：這裏是true，而配置文件的方式是設置爲false）

　　(適用於經過Render方式的引入)

補充：經過表達式擴展：(詳細語法能夠參考上面的地址，下面擴展幾個經常使用的)

①： T* 該目錄下以T開頭的js或css文件

②： *.js *.css 該目錄下的全部js或css文件

③： T*.js T*.css 這個是不合法，違規的

 

 

三. 代碼測試

 1. 新建兩個js文件和css文件

2. 在BundleConfig文件中進行註冊

 

3. 編寫前端頁面，以傳統的方式引入，並查看效果。

 

4. 引入壓縮合並後的路徑。

 

方式一的運行結果：

 

方式二的運行結果：發現並無壓縮

 

 至於爲何，上面已經解釋了。 

 解決方案：

　　方案①：BundleTable.EnableOptimizations = true;

　　方案②：<compilation debug="false" targetFramework="4.5" />

 從新運行：

 

最後補充幾個含格式驗證的壓縮：