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