asp.net mvc4 使用 System.Web.Optimization 對javascript和style的引入、代碼合並和壓縮的優化（ScriptBundle，StyleBundle，Bundling and Minification ）

Bundling and Minification兩個單詞對今天的內容有個比較好的總結。

問題所在

一、 在asp.net包括mvc項目中，引入js和css也許有人認為是個很容易和很簡單操作的事情，vs自帶的拖動功能可以很簡單的實現引入工作，甚至不需要編寫任何代碼，但是這樣會導致路徑問題，母版頁和用戶控件的問題尤為嚴重。

二、由於現在web項目的龐大，頁面往往需要加載很多未壓縮的js和css導致頁面加載速度很慢。當然也可以在發布時進行js和css的壓縮和合並工作，這樣無疑給程序員帶來了更多的麻煩。

以上問題就是今天要解決的問題，當然微軟已經為我們做了很多工作，我們要做的就是運用他。

Bundling

配置

在新建mvc4的項目中我們會發現比mvc以前項目多個App_Start文件夾，會有BundleConfig.cs文件。在Global.asax中的Application_Start方法中會調用BundleConfig.cs的方法，我們需要做的就是了解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"));
        }
    }

我們會發現代碼中有很多綁定了js和css，因為路徑用到了絕對路徑，所有我們不用考慮路徑帶來的問題。

我們要在這里配置我們需要的js和css，在這里我們也可以對js和css進行分類命名，比如bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));因為在進行驗證時需要jquery.validate.js和jquery.validate.unobtrusive.js兩個js的引用。 關於jquery validate unobtrusive 驗證

前台引入

Razor試圖

 @Styles.Render("~/Content/css")

 @Scripts.Render("~/bundles/jquery")

webform視圖

<%=@Styles.Render("~/Content/css")%>

<%=@Scripts.Render("~/bundles/jquery")%>

以上代碼就可以簡單的實現對css和js的引入

我們也可以

<script src='@Scripts.Url("~/bundles/jquery")'></script>引入

Styles.Render和Scripts.Render支持多個參數的傳入，如果需要引入多個js，只需要一行代碼就可以搞定。Scripts.Render("~/bundles/jquery","~/bundles/jqueryval")

 

我們頁面的源碼中就可以看到

<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/jquery-1.7.1.js"></script> 

在BundleConfig.cs代碼中我們看到有許多的*和{version}，*是通配符{version}代表引入js和css的版本，用{version}的優點在於我們更新js和css時不用更改配置。

只要兩步我們就輕松實現js和css的引入，完全不用考慮路徑和需要引入哪些js和css（我們可以在配置中配置哪些功能需要哪些js和css，然后進行命名）的問題。

 

Minification

壓縮合成js和css也許我們在項目運行中沒有發現壓縮和合成的代碼，那是因為如果在發布前壓縮和合成了我們就沒辦法調試js和css了

我們要做的就是把web.config的debug為false即可<compilation debug="false" targetFramework="4.0" />，其實這一項再發布網站時是必做的。所以我們不需要再為js和css的Minification做任何事情。

當然我們也可以在debug為true時看到MInification的代碼，設置BundleTable.EnableOptimizations為true即可。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
    BundleTable.EnableOptimizations = true;
}

 

再次運行網站我們會發現頁面的源碼有所改變

<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>

<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>

機制會把我們分類的js和css合並壓縮成一個js和css，這正是我們需要的。

mvc4的Bundling and Minification可以很簡單的實現我們需要的工作。