System.Web.Optimization 合并壓縮技術的使用

標籤：benefit   b2b   web應用   不能   註冊   頁面   boa   modern   並且   

　捆綁和壓縮原理是：將多個css檔案 動態合并和 壓縮為一個css檔案、多個js檔案 動態合并和 壓縮為一個js檔案，如此達到減少瀏覽器對伺服器資源檔的請求數量、縮小資源檔的尺寸來提高頁面反應速度的目的。ASP.NET 4.5及以上版本支援此技術（Optimization）。  使用方法：    先nuget下載包 Microsoft.AspNet.Web.Optimization，然後配置做以下配置：     第一步：照慣例，在App_start檔案夾下建立類，               這裡有個參數“BundleTable.EnableOptimizations”的設定：如果不設定此項，則System.Web.Optimization使用了預設策略，在Debug模式下將不啟用合并與壓縮。若設定了則將覆蓋預設策略；

第二步：在Global.Application_Start下註冊， 

第三步：視圖頁面調用，在視圖頁面分別用Scripts.Render和Styles.Render調用，

            注意以下問題：

        1）Render("virtualPath")中虛擬路徑名不能有靜態檔案的尾碼，如："***.js""***.css"，否則IIS只會去找對應靜態檔案，找不到則作請求失敗處理，虛擬路徑名也不能與存在的檔案夾名相同，否則IIS會當是瀏覽該檔案夾的請求。例如：如果存在路徑“content/css”，則不能Render為”content/css“，當然這樣是可以的：”centent/css/abc“；

         2）css需考慮有引用image的情況，若為相對路徑，方法有：            只做壓縮，不做合并。每個css分別建立Styles.Render，並且動態檔案虛擬路徑父級與真實css檔案父級路徑相同，再取一個不會與檔案名稱相衝突的終點名稱，            實現壓縮與合并。此時得建立一個專門的目錄，目錄名與動態虛擬目錄的父級目錄相同，再把各css引用的圖片複製進來。
         3）此功能原理為動態產生的內容js/css，IIS下請“啟用動態內容壓縮”，否則可能出現壓縮後的檔案傳輸時比未壓縮時還大的尷尬情境。因為預設情況下”靜態內容壓縮“是開啟的，所以靜態檔案做了壓縮傳輸。而動態檔案儘管做了代碼字串的壓縮，但沒做傳輸壓縮處理（gzip），所以傳輸的資料大了。             （  註：gzip為Internet 上使用非常普遍的一種資料壓縮格式，或者說一種檔案格式。HTTP協議上的GZIP編碼是 一種用來改進WEB應用程式效能的技術，一般對純文字內容可壓縮到原大小的40% )，               4）CSS不正常顯示問題：有的css檔案合并壓縮後會出現在ie瀏覽器上顯示不正常，有時chrome上也顯示不正常。網上有人也說過遇到類似情況，比如某些版本的bootstrap.css會出現。    遇到此情況，我的處理方式是把有問題的css檔案從合并列表中剔除，單獨載入它。在還沒找到是哪個css檔案又趕進度時，則整個css列表設為不合并壓縮：BundleTable.EnableOptimizations = false;  

  在MVC項目中的 BundleConfig操作中是微軟已經給我們準備好的CSS和JS壓縮，我們可以把模版頁的樣式表和指令碼放入這個地方壓縮（子頁太多，所以另作壓縮）。這個設定檔在App_Start檔案夾下，Global.asax在全域設定檔下，會啟用這個設定檔，對EnableOptimizations設定後，可以允許壓縮和不允許操作

1 bundles.Add(new StyleBundle("~/bundles/styles/benefits").Include( "~/Content/Benefits/BenefitsMaster.css", 2 "~/Content/Benefits/BenefitsHead.css" )); 3 bundles.Add(new ScriptBundle("~/bundles/scripts/base").Include( "~/Scripts/sea.js" , 4 "~/Scripts/seajs/style.js" ,5  "~/Scripts/seajs/combo.js" ,6  "~/Scripts/seajs/config.js" , 7 "~/Scripts/fmall/init.js" )); 8 分別對 樣式表,指令碼頁面進行壓縮，建立虛擬路徑

1 頁面直接調用 ：2 @Styles.Render("~/Content/themes/base/css", "~/Content/css") 3 @Scripts.Render("~/bundles/modernizr") 項其實也是包含在三中的，我獨立出來，最主要感覺是我覺得他是個不錯的傢伙。
　　代碼簡單，但是非常的適用，不知道大家有沒有使用過AjaxMinify這個東東，可以把指令碼編譯，壓縮成最小的內容。
　　不過都是要使用命令的，然而在MVC4.0中System.Web.Optimization已經包含了這個東東，他們就是JsMinify和CssMinify，不要小看這兩個類，雖然公開的方法就兩個。 
　　按照上述方法是用Scripts和Styles將指令碼和樣式表引入頁面時，無需修改任何代碼就可以將指令碼和樣式表編譯壓縮輸入到用戶端，
　　這樣不僅可以有效增加JSHack的難度以及降低檔案的大小。為了達到這個目的，我們只需要將BundleTable中的一個屬性設定為true即可！！

   System.Web.Optimization的更多知識，請參閱： 官網：http://www.asp.net/mvc/overview/performance/bundling-and-minification

System.Web.Optimization 合并壓縮技術的使用