asp.net mvc 應用Bundle（捆綁和微小）壓縮技術 啟用 BundleConfig 配置web.config

標籤：

從MVC4開始，我們就發現，項目中對Global.asax進行了最佳化，將原來在MVC3中使用的代碼移到了 【App_Start】檔案夾下，而Global.asax只負責初始化。其中的BundleConfig類就有個很牛X的功能：合并與壓縮。想到以前做 ASP.NET的時候要通過工具壓縮，手動合并，很麻煩。通過BundleConfig可以大大的提高工作效率和項目效能。

一、基本的使用

1.1、Global.asax檔案的初始化

1234	protected void Application_Start()      {          RouteConfig.RegisterRoutes(RouteTable.Routes);      }

1.2、BundleConfig 綁定壓縮檔

1234567891011121314

public class BundleConfig{    // 有關 Bundling 的詳細資料，請訪問 http://go.microsoft.com/fwlink/?LinkId=254725    public static void RegisterBundles(BundleCollection bundles)    {         bundles.Add(new ScriptBundle("~/bundles/jquery").Include(                "~/Content/Scripts/jquery-{version}.js"           ));         bundles.Add(new ScriptBundle("~/Content/Scripts/toojs").Include(                  "~/Content/Scripts/jquery.cookie.js",                 "~/Content/Scripts/footer.js"             ));

1.3、視圖中的顯示

123	@Styles.Render("~/Content/Css/Common")  //單個樣式的綁定 @Scripts.Render("~/bundles/jquery","~/Content/Scripts/toojs","~/Content/Sctipts/bootstraptJs")  //多個JS的綁定

1.4、web.config 的配置

12	<system.web>    <compilation debug="true" targetFramework="4.5"/>

1	debug="false"的時候就啟用的壓縮

二、效果說明　

 當啟用壓縮之後，開啟firebug你會看到

多個檔案在一起會被合并，檔案格式去掉了，形成的壓縮，提高了檔案的載入時間。

我覺得還有一個很智能的好處：支援正則匹配檔案

*\{version}  兩個是很好的匹配，在實際項目中，在樣式反覆式開發法時，stlye.1.0.css,stlye.1.1.css,stlye.1.2.css,stlye.1.3.css……模式累加，路徑唯寫 ~/Content/stlye.*.css 就可以了。

在JS開發的時候很多時候改了BUG，JS有版本更 新：Script.1.0.js,Script.1.0.min.js,Script.1.1.js,Script.1.1.min.js  會使用到最新版本，用{version} debug模式下會取最新的檔案，發布的時候會取最新的min

 

三、注意事項：

1	剛開始的時候虛擬路徑的命名有就很奇怪： ~/bundles/jquery。如下：

1	bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

1	bundles.Add(new ScriptBundle("~/Content/Scripts/toojs").Include(<br><br>

1	我開始以為：~/Content/Scripts 是檔案的檔案夾地址，後面隨便命名，但~/bundles 又是什嗎？我們跟蹤的時候發現：

1	在bundles 註冊之前就有了值，原來系統已經定義好了7個路徑標識，應該是預設常用的吧。這個地方坑了我好長時間了，百度也沒人說~

 好了，就這麼多了，這節沒有講代碼，就是說了下捆綁的新功能 。

asp.net mvc 應用Bundle（捆綁和微小）壓縮技術 啟用 BundleConfig 配置web.config