編碼的世界 / 優質文選 / 生涯

Asp.net(C#) MVC4自帶的JS、CSS優化功能

2022年3月24日
-   

 功能複雜、界面漂亮的網站常常會遇到JS、CSS文件過大，導致網站訪問速度變慢，本章正是針對此問題進行優化。
本章所說的JS、CSS優化功能：一、緩存：首次訪問站點，JS和CSS文件會下載到瀏覽器緩存中，之後的再次訪問站點時，不再從服務器下載JS CSS文件，而是從瀏覽器緩存中讀取；除非JS CSS文件有更新改動，則在訪問時自動更新瀏覽器緩存中的JS CSS文件。
二、優化壓縮：自動將JS CSS文件優化壓縮，也就是去掉文件中的不必要的注釋空格換行等等，然後才將優化壓縮的文件傳到客戶端。
使用步驟：此功能會用到MVC4 的System.Web.Optimization組件，
若是舊項目轉換過來則需手工添加引用C:Program Files (x86)Microsoft ASP.NETASP.NET MVC 4PackagesMicrosoft.AspNet.Web.Optimization.1.0.0lib
et40System.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）：         我錯了，不是這樣的。  此章課題有待深入研究，高手請飄過！

熱門文章