ASP.NET MVC之Bundle壓縮JS和CSS

介紹Bundle之前先引用《淘寶技術這十年》中一段話，對Web前端稍微有點常識的人都應該知道，瀏覽器下一步會加載頁面中用到的CSS、JS（JavaScript）、圖片等樣式、腳本和資源文件。但是可能相對較少的人才會知道，你的瀏覽器在同一個域名下並發加載的資源數量是有限的，例如IE 6和IE 7是兩個，IE 8是6個，chrome各版本不大一樣，一般是4～6個。Bundle是ASP.NET 4.5中的一個新特性，可用來將js和css進行壓縮（多個文件可以打包成一個文件，也可以說是合並多個文件），並且可以區分調試和非調試，在調試時不進行壓縮，以原始方式顯示出來，以方便查找問題。如果你新建一個有模板的MVC4項目，就可以直接使用了。

官方寫法

新建完一個MVC4項目之后可以在APP_Start中的BundleConfig.cs看到這樣的代碼:

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // 使用 Modernizr 的開發版本進行開發和了解信息。然后，當你做好
            // 生產准備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));            
        }
    }
}

　　同時我們可以看一下Global.asax中看下注冊的代碼，如圖:

以上是官方推薦的寫法，下面可以個人實踐一下個人使用的時候的情況。

個人實戰

Bundle有兩個子類，一個是ScriptBundle可以理解為合並JS，一個StyleBundle可以理解為合並CSS，這個時候可以在BundleConfig中添加幾行代碼，如下:

      ScriptBundle myscript = new ScriptBundle("~/FlyElephant/Script");
            myscript.Include("~/Scripts/jquery-1.7.1.js", "~/Scripts/bundle.test.js");
            StyleBundle mystyle = new StyleBundle("~/FlyElephant/Style");
            mystyle.Include("~/Content/site.css");
            bundles.Add(myscript);
            bundles.Add(mystyle);   

 轉到ScriptBundle中的定義發現傳遞的是virtualPath，也就是虛路徑:

    public class ScriptBundle : Bundle
    {
        public ScriptBundle(string virtualPath);
        public ScriptBundle(string virtualPath, string cdnPath);
    }

　　然后新建一個控制器BundleTest和視圖，引用以上代碼：

@{
    ViewBag.Title = "BundleTest";
}
    @Scripts.Render("~/FlyElephant/Script")
    @Styles.Render("~/FlyElephant/Style")
@Html.Raw("<a href='http://www.cnblogs.com/xiaofeixiang/' style='font-size:20px'>博客地址</a>")

這個時候我們就很容易理解之前ScriptBundle中的虛路徑大概是個什么概念了,這個時候運行看下效果:

 

運行到這里發現和正常引用沒有什么區別，這個時候只需要添加一行代碼就可以實現壓縮的效果，在Global.ascx中Application_Start添加如下代碼:

 BundleTable.EnableOptimizations = true;

重新運行一下，效果如下:

 

EnableOptimizations表示是否啟用壓縮，如果你在本地不需要調試，直接運行網站，也可以去Web.config中去配置一下Debug為false也可以達到以上效果，不過該這個很蛋疼，一般都是直接改EnableOptimizations，而且EnableOptimizations是高於Debug的設置的;

本人水平有限，不能面面俱到，詳細信息可參考官網http://www.asp.net/mvc/overview/performance/bundling-and-minification；