asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化（ScriptBundle，StyleBundle，Bundling and Minification ）

Bundling and Minification两个单词对今天的内容有个比较好的总结。

问题所在

一、 在asp.net包括mvc项目中，引入js和css也许有人认为是个很容易和很简单操作的事情，vs自带的拖动功能可以很简单的实现引入工作，甚至不需要编写任何代码，但是这样会导致路径问题，母版页和用户控件的问题尤为严重。

二、由于现在web项目的庞大，页面往往需要加载很多未压缩的js和css导致页面加载速度很慢。当然也可以在发布时进行js和css的压缩和合并工作，这样无疑给程序员带来了更多的麻烦。

以上问题就是今天要解决的问题，当然微软已经为我们做了很多工作，我们要做的就是运用他。

Bundling

配置

在新建mvc4的项目中我们会发现比mvc以前项目多个App_Start文件夹，会有BundleConfig.cs文件。在Global.asax中的Application_Start方法中会调用BundleConfig.cs的方法，我们需要做的就是了解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/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // 使用 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"));
        }
    }

我们会发现代码中有很多绑定了js和css，因为路径用到了绝对路径，所有我们不用考虑路径带来的问题。

我们要在这里配置我们需要的js和css，在这里我们也可以对js和css进行分类命名，比如bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*"));因为在进行验证时需要jquery.validate.js和jquery.validate.unobtrusive.js两个js的引用。 关于jquery validate unobtrusive 验证

前台引入

Razor试图

 @Styles.Render("~/Content/css")

 @Scripts.Render("~/bundles/jquery")

webform视图

<%=@Styles.Render("~/Content/css")%>

<%=@Scripts.Render("~/bundles/jquery")%>

以上代码就可以简单的实现对css和js的引入

我们也可以

<script src='@Scripts.Url("~/bundles/jquery")'></script>引入

Styles.Render和Scripts.Render支持多个参数的传入，如果需要引入多个js，只需要一行代码就可以搞定。Scripts.Render("~/bundles/jquery","~/bundles/jqueryval")

 

我们页面的源码中就可以看到

<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/jquery-1.7.1.js"></script> 

在BundleConfig.cs代码中我们看到有许多的*和{version}，*是通配符{version}代表引入js和css的版本，用{version}的优点在于我们更新js和css时不用更改配置。

只要两步我们就轻松实现js和css的引入，完全不用考虑路径和需要引入哪些js和css（我们可以在配置中配置哪些功能需要哪些js和css，然后进行命名）的问题。

 

Minification

压缩合成js和css也许我们在项目运行中没有发现压缩和合成的代码，那是因为如果在发布前压缩和合成了我们就没办法调试js和css了

我们要做的就是把web.config的debug为false即可<compilation debug="false" targetFramework="4.0" />，其实这一项再发布网站时是必做的。所以我们不需要再为js和css的Minification做任何事情。

当然我们也可以在debug为true时看到MInification的代码，设置BundleTable.EnableOptimizations为true即可。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
    BundleTable.EnableOptimizations = true;
}

 

再次运行网站我们会发现页面的源码有所改变

<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>

<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>

机制会把我们分类的js和css合并压缩成一个js和css，这正是我们需要的。

mvc4的Bundling and Minification可以很简单的实现我们需要的工作。