捆綁和壓縮原理是:將多個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的更多知識,請參閱: