ASP.NET MVC 4 RC的JS/CSS打包壓縮功能 Scripts.Render和Styles.Render

打包(Bundling)及壓縮(Minification)指的是將多個js文件或css文件打包成單一文件並壓縮的做法，如此可減少瀏覽器需下載多個文件案才能完成網頁顯示的延遲感，同時通過移除JS/CSS文件案中空白、批注及修改JavaScript內部函數、變量名稱的壓縮手法，能有效縮小文件案體積，提高傳輸效率，提供使用者更流暢的瀏覽體驗。

在ASP.NET MVC 4中可以使用BundleTable捆綁多個css文件和js文件，以提高網絡加載速度和頁面解析速度。更為重要的是通過捆綁可以解決IE瀏覽器的31個CSS文件連接的限制。

ASP.NET捆綁是ASP.NET 4.5的新功能，是System.Web.Optimization命名空間下。他提供了一些ASP.NET運行性能方面的優化，比如，一個頁面可能有很多CSS/JS/圖片,通過靈活的應用BundleTable類，他可以幫你將文件合並壓縮代碼優化成一個最理想的文件，然后輸出到客戶端，從而提高了瀏覽器下載速度。

ASP.NET MVC 4 Beta 解決方法

在ASP.NET MVC 4 Beta時代便已內建打包壓縮功能，做法是在global.asax.cs的Application_Start加入

BundleTable.Bundles.EnableDefaultBundles();

如此，便可使用以下寫法一口氣將整個Scripts目錄下的JS及Contents目錄下所有CSS打包並壓縮成單一文件案，改善網頁載入效率: (參考)

<script src="@Url.Content("~/Scripts/js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Content/CSS")" type="text/javascript"></script>

ASP.NET MVC 4 RC

在ASP.NET MVC 4 RC，發現RC版在打包壓縮做法上又有所革新，變得更加彈性有條理。

原本打包規則被藏在global.asax.cs Application_Start中，RC版起則多了一個新目錄App_Start，其中包含RouteConfig.cs、FilterConfig.cs、BundleConfig.cs三個類，做法上改為通過WebActivator啟動。新的系統配置將路由規則、過濾器及打包規則等注冊邏輯由Application_Start中拆出來，各自放在獨立文件案中，管理及修改起來一目了然，架構上更漂亮。

跟Beta時代很大的差異是將JS與CSS加以群組化，分別定義出jquery, jqueryui, jqueryval, modernizr, css及themes/base/css等群組，讓網頁可以視需要只加載必要的JS及CSS文件群組，不像先前每次得打包整個目錄，對於JS文件的加載順序及相依性也能做較精准的調控。

而在.cshtml中，則使用Styles.Render及Scripts.Render載入BundleConfig.cs所定義的JS及CSS群組，

@Styles.Render("~/Content/themes/base/css", "~/Content/css")

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

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui","~/bundles/jqueryval")

@RenderSection("scripts", required: false)

實例效率參考

以MVC示例，我們在cshtml頁面需要引入許多css和js文件

   <script src="~/Scripts/jquery-1.8.2.js"></script>
    <link href="~/Content/themes/base/jquery.ui.core.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.button.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" />
     <link href="~/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" />
     <link href="~/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" />
     <link href="~/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" />
     <link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />

這種寫法在瀏覽頁面時，效率如圖，google瀏覽器查看：

如果使用bundling技術，使用如下代替正常的引用路徑

  @Scripts.Render("~/bundles/jquery")  
  @Styles.Render("~/Content/themes/base/css")      
  @RenderSection("scripts", required: false)

具體的文件需要在App_Start->BundleConfig.cs中，把要添加的js文件include進來：

  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"));

頁面訪問效率如下：

 

對比上下的結果，可以發現

請求數：15->4

下載資源數：281K->51.2K

響應時間也會縮短。

需要注意的是，webconfig中的設置： <compilation debug="false" targetFramework="4.5" />，這里一定要設置為false，如果設置為true，在預覽頁面的時候，不會壓縮這些文件，和正常引入文件的寫法是一樣的效果，主要是為了方便調試。vs2013里默認就是false的，不用做特別的設置。

 

參考：http://www.cnblogs.com/shanyou/archive/2012/06/22/2558580.html