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的内容。
1 public class BundleConfig 2 { 3 // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725 4 public static void RegisterBundles(BundleCollection bundles) 5 { 6 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 7 "~/Scripts/jquery-{version}.js")); 8 9 bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( 10 "~/Scripts/jquery-ui-{version}.js")); 11 12 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( 13 "~/Scripts/jquery.unobtrusive*", 14 "~/Scripts/jquery.validate*")); 15 16 // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好 17 // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。 18 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( 19 "~/Scripts/modernizr-*")); 20 21 bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 22 23 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 24 "~/Content/themes/base/jquery.ui.core.css", 25 "~/Content/themes/base/jquery.ui.resizable.css", 26 "~/Content/themes/base/jquery.ui.selectable.css", 27 "~/Content/themes/base/jquery.ui.accordion.css", 28 "~/Content/themes/base/jquery.ui.autocomplete.css", 29 "~/Content/themes/base/jquery.ui.button.css", 30 "~/Content/themes/base/jquery.ui.dialog.css", 31 "~/Content/themes/base/jquery.ui.slider.css", 32 "~/Content/themes/base/jquery.ui.tabs.css", 33 "~/Content/themes/base/jquery.ui.datepicker.css", 34 "~/Content/themes/base/jquery.ui.progressbar.css", 35 "~/Content/themes/base/jquery.ui.theme.css")); 36 } 37 }
我们会发现代码中有很多绑定了js和css，因为路径用到了绝对路径，所有我们不用考虑路径带来的问题。
我们要在这里配置我们需要的js和css，在这里我们也可以对js和css进行分类命名，比如bundles.Add(newScriptBundle("~/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即可。
1 public static void RegisterBundles(BundleCollection bundles) 2 { 3 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 4 "~/Scripts/jquery-{version}.js")); 5 6 // Code removed for clarity. 7 BundleTable.EnableOptimizations = true; 8 }
再次运行网站我们会发现页面的源码有所改变
<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可以很简单的实现我们需要的工作。