ASP.NET MVC 4 Optimization的JS/CSS檔案動態合併及壓縮

libingql發表於2013-12-22
ASP.NETMVCJSCSS

　　JS/CSS檔案的打包合併（Bundling）及壓縮（Minification）是指將多個JS或CSS檔案打包合併成一個檔案，並在網站釋出之後進行壓縮，從而減少HTTP請求次數，提高網路載入速度和頁面解析速度。壓縮功能實現了對javascript指令碼和CSS進行壓縮的功能，它能夠去除指令碼或樣式中不必要的空白和註釋，同時能夠優化指令碼變數名的長度。

　　在ASP.NET MVC 4中JS/CSS檔案動態合併及壓縮通過呼叫System.Web.Optimization定義的類ScriptBundle及StyleBundle來實現。

　　1. 新建ASP.NET MVC 4空專案，引用System.Web.Optimization

　　1>、新建ASP.NET MVC 4空專案：

　　2>、引用System.Web.Optimization

　　通過NuGet新增對System.Web.Optimization的引用：

　　2. ASP.NET MVC 4專案使用System.Web.Optimization

　　1>、BundleConfig.cs

　　在類檔案BundleConfig.cs中配置需要捆綁的JS及CSS檔案。

using System.Web;
using System.Web.Optimization;

namespace MvcExample
{
    public class BundleConfig
    {
        // For more information on Bundling, visit 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 StyleBundle("~/Content/css").Include("~/Content/site.css"));
        }
    }
}

　　2>、_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</head>
<body>
    @RenderBody()
</body>
</html>

　　3>、Global.asax

　　在中新增程式碼：

BundleConfig.RegisterBundles(BundleTable.Bundles);
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace MvcExample
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801
    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);
        }
    }
}

　　4>、Web.config

　　在根目錄及Views資料夾下的Web.config中新增名稱空間引用：

<add namespace="System.Web.Optimization"/>

　　3. ASP.NET MVC 4專案JS/CSS打包壓縮效果

　　1>、檢視載入原始JS/CSS效果

　　完成上面的專案程式碼之後，執行檢視原始檔：

　　2>、檢視捆綁壓縮JS/CSS效果

　　修改根目錄下Web.config ，將debug設定為false。

<compilation debug="false" targetFramework="4.0" />

　　在Firebug中檢視css檔案壓縮後的載入內容，可以看出原始css檔案中的註釋及空白換行均被刪除。

　　啟用JS/CSS檔案壓縮合並，除了可以在Web.config中配置，也可以在BundleConfig.cs或Global.asax中新增程式碼：

BundleTable.EnableOptimizations = true;

　　BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace MvcExample
{
    public class BundleConfig
    {
        // For more information on Bundling, visit 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 StyleBundle("~/Content/css").Include("~/Content/site.css"));

            BundleTable.EnableOptimizations = true;
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace MvcExample
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801
    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);
            BundleTable.EnableOptimizations = true;
        }
    }
}

　　4. 參考資料

　　http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

相關文章