MVC 中使用 System.Web.Optimization 合并压缩JS、CSS

前言：

Optimization 捆绑和压缩原理是：将多个css文件动态合并和压缩为一个css文件、多个js文件动态合并和压缩为一个js文件，以此达到减少浏览器对服务器资源文件的请求数量、缩小资源文件的尺寸来提高页面反应速度的目的。ASP.NET 4.5及以上版本支持此技术（Optimization）。

操作

1.通过NuGet添加Microsoft ASP.NET Web Optimization Framework的引用(MVC的项目默认是已经安装了， 所以这里可以忽略)
2. 在App_Code中添加BundleConfig.cs

using System.Web.Optimization;
 
public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/Content/CSS/Base/BaseCss")
            .Include("~/Content/CSS/Base/base.css",
            "~/Content/CSS/Base/index.css"));
 
        bundles.Add(new ScriptBundle("~/Content/Script/Base/BaseJS")
            .Include("~/Content/Script/Base/base.js", 
            "~/Content/Script/Base/index.js", 
            "~/Content/Script/Base/jquery.js"));
    }
}

3.在Global.asax的Application_Start中添加如下代码：

BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);

4.在.cshtml中添加如下的js/css引用代码：

@System.Web.Optimization.Styles.Render("~~/Content/CSS/Base/BaseCss")
@System.Web.Optimization.Scripts.Render("~/Content/Script/Base/BaseJS")

5.运行结果：

System.Web.Optimization的更多知识，请参阅：官网：http://www.asp.net/mvc/overview/performance/bundling-and-minification

有些时候本地为了方便测试， 可以暂时将css ,js 代码压缩关闭，可以使用 BundleTable.EnableOptimizations = false;来关闭压缩操作， 以便进行调试。