ASP.NET MVC 4使用Bundle的打包壓縮JS/CSS

打包(Bundling)及壓縮(Minification)指的是將多個js檔案或css檔案打包成單一檔案並壓縮的做法，如此可減少瀏覽器需下載多個檔案案才能完成網頁顯示的延遲感，同時透過移除JS/CSS檔案案中空白、批註及修改JavaScript內部函式、變數名稱的壓縮手法，能有效縮小檔案案體積，提高傳輸效率，提供使用者更流暢的瀏覽體驗。

在ASP.NET MVC 4中可以使用BundleTable捆綁多個css檔案和js檔案，以提高網路載入速度和頁面解析速度。更為重要的是透過捆綁可以解決IE瀏覽器的31個CSS檔案連線的限制。在做ASP.Net專案時很多時候會使用一些開源的javascript控制元件。無形中增加了css和javascript檔案的引用。如果手工將這些css檔案合併將給將來版本升級造成很大的麻煩。於是，我們只好小心翼翼的處理這些css檔案在頁面中的引用。ASP.NET捆綁是ASP.NET 4.5的新功能，是System.Web.Optimization名稱空間下。他提供了一些ASP.NET執行效能方面的最佳化，比如，一個頁面可能有很多CSS/JS/圖片,透過靈活的應用BundleTable類，他可以幫你將檔案合併壓縮程式碼最佳化成一個最理想的檔案，然後輸出到客戶端，從而提高了瀏覽器下載速度。

首先在專案的App_Start資料夾中，會有一個BundleConfig.cs檔案：

這裡面寫了所有需要Bundle的內容，可以自行設定：

其中的bundles.Add是在向網站的BundleTable中新增Bundle項，這裡主要有ScriptBundle和StyleBundle，分別用來壓縮指令碼和樣式表。用一個虛擬路徑來初始化Bundle的例項，這個路徑並不真實存在，然後在新Bundle的基礎上Include專案中的檔案進去。具體的Include語法可以查閱上面提供的官方簡介。

然後對Bundle的註冊是在專案根下的Global.asax檔案中，這個檔案中的Application_Start是網站程式的開始，裡面註冊了網站各種初始化的內容，其中就包括對BundleTable的Bundle新增：

預設情況下，Bundle是會對js和css進行壓縮打包的，不過有一個屬性可以顯式的說明是否需要打包壓縮：

BundleTable.EnableOptimizations = true;

如果將其設為false，那麼就會和下面說的debug=true時的情況相同了。

在使用時，在相應位置呼叫ScriptRender和StyleRender的Render方法：

終端使用者頁面即可達到效果打包壓縮效果。

有一個地方主要注意，在Web.config中，當compilation編譯的debug屬性設為true時，表示專案處於除錯模式，這時Bundle是不會將檔案進行打包壓縮的，頁面中引用的js和css會分散原樣的展示在html中，這樣做是為了除錯時查詢問題方便（壓縮以後就噁心了。。。）。

最終部署執行時，將debug設為false就可以看到js和css被打包和壓縮了。

=============

使用Bundle的關鍵在於要向ASP.NET中的BundleTable註冊Bundle。

如果要在ASP.NET WebForm中使用Bundle，需要在新建專案時選擇.NET Framework 4.5，最好使用模板網站新建，這樣就可以直接看到Bundle了。