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；