Asp.net(C#) MVC4自帶的JS、CSS優化功能
功能複雜、介面漂亮的網站常常會遇到JS、CSS檔案過大，導致網站訪問速度變慢，本章正是針對此問題進行優化。
本章所說的JS、CSS優化功能：
一、快取：首次訪問站點，JS和CSS檔案會下載到瀏覽器快取中，之後的再次訪問站點時，不再從伺服器下載JS CSS檔案，而是從瀏覽器快取中讀取；除非JS CSS檔案有更新改動，則在訪問時自動更新瀏覽器快取中的JS CSS檔案。
二、優化壓縮：自動將JS CSS檔案優化壓縮，也就是去掉檔案中的不必要的註釋空格換行等等，然後才將優化壓縮的檔案傳到客戶端。
使用步驟：
此功能會用到MVC4 的System.Web.Optimization元件，
若是舊專案轉換過來則需手工新增引用C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 4\Packages\Microsoft.AspNet.Web.Optimization.1.0.0\lib\net40\System.Web.Optimization.dll
若是VS2010新建MVC4專案則會自動引用System.Web.Optimization.dll元件，並在/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/jquery").Include( "~/Scripts/jquery-1.9.1.min.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*")); bundles.Add(new ScriptBundle("~/bundles/jscommon").Include( "~/Scripts/JSCommon.js")); // 使用 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")); } }
上邊這段程式碼作用是向Bundle物件集合中註冊CSS JS檔案，可以註冊單個檔案，也可以註冊多個檔案。
接著在檢視頁面或母板頁中需要哪個檔案則引用相對的虛擬路徑：
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <title> <asp:ContentPlaceHolder ID="TitleContent" runat="server" /> </title> <link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <%: Styles.Render("~/Content/css") %> <%: Scripts.Render("~/bundles/jquery") %> <%: Scripts.Render("~/bundles/modernizr") %> <%: Scripts.Render("~/bundles/jscommon")%> </head>
然後在Global.asax中加上一句程式碼開啟優化功能：BundleTable.EnableOptimizations = true;
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
BundleTable.EnableOptimizations = true;//是否啟用優化
}
}執行專案，使用GOOGLE瀏覽器就能很方便的看到jquery、jscommon、css檔案的網路下載Size從一開始的流量變成(from cache)，status也會變成304Not Modified，當檔案有更新時則自動更新瀏覽器快取。
點選這些CSS JS檔案就會發現已經被壓縮優化。
更新（20140127）：
我錯了，不是這樣的。 此章課題有待深入研究，高手請飄過！