一、简述
Bundle，英文原意就是捆、收集、归拢。在MVC中的Bundle技术，也就是一个对css和js文件的捆绑压缩的技术。
它的用处：
将多个请求捆绑为一个请求，减少服务器请求数
压缩javascript，css等资源文件，减小网络带宽，提升性能
使用Bundle技术，并且拥有缓存功能，同时也可以对资源文件进行一定的模块化管理，可使用正则对需要的文件进行过滤匹配，也可以使用cdn文件
二、技术详解
1.怎么开启bundle
在项目的App_Start文件夹中，会有一个BundleConfig.cs文件；
public class BundleConfig { // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); // 使用要用于开发和学习的 Modernizr 的开发版本。然后，当你做好 // ready for production, use the build tool at https://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); BundleTable.EnableOptimizations = true; //是否打包压缩 } }
对Bundle的注册是在项目根下的Global.asax文件中，这个文件中的Application_Start是网站程序的开始，里面注册了网站各种初始化的内容，其中就包括对BundleTable的Bundle添加：BundleConfig.RegisterBundles(BundleTable.Bundles);
默认情况下，Bundle是会对js和css进行压缩打包的，不过有一个属性可以显式的说明是否需要打包压缩。
BundleTable.EnableOptimizations = true;
配置web.config，关掉调试状态，否则不会进行压缩。
<system.web>
<compilation debug="false" targetFramework="4.5.2" />
</system.web>
2.如何使用
视图中调用方法：
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/bootstrap")
捆绑框架如以下几个共同的约定：
- 如果“FileX.min.js”和“FileX.js”都存在，请为发行版选择“.min”文件。
- 选择用于调试的非".min"版本。
- 忽略"-vsdoc"仅使用智能感知的文件 （如 jquery-1.7.1-vsdoc.js）。
如上所示的{version}通配符匹配用于自动创建一个 jQuery 束具有适当版本的 jQuery脚本文件夹中。在此示例中，使用通配符提供了以下好处：
- 允许您使用 NuGet 更新到新的 jQuery 版本而无需更改前面的绑定代码或 jQuery 引用在您查看网页。
- 自动选择完整版，为调试配置和发布的".min"版本生成。
3.使用 CDN
以下代码将使用 CDN jQuery 绑定来替换本地 jQuery 绑定。
public static void RegisterBundles(BundleCollection bundles) { bundles.UseCdn = true; //enable CDN support //add link to jquery on the CDN var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"; bundles.Add(new ScriptBundle("~/bundles/jquery",jqueryCdnPath).Include("~/Scripts/jquery-{version}.js")); }
在上面的代码中，jQuery 将请求从 CDN 虽然在释放模式和 jQuery 的调试版本将被回迁本地在调试模式下。当使用 CDN，你应该有一个回退机制在 CDN 请求失败的情况下。下面的标记片段从布局文件的末尾显示脚本添加请求 jQuery 应 CDN 失败。
@Scripts.Render("~/bundles/jquery") <script type="text/javascript"> if (typeof jQuery == 'undefined') { var e = document.createElement('script'); e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")'; e.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(e); } </script> @RenderSection("scripts", required: false)
三、常见问题
1. css中引用的图片路径出现错误
在css中，图片路径一般都是写相对路径，使用bundle后出现错误。处理方法：通过 new CssRewriteUrlTransform() 来解决
bundles.Add( new StyleBundle("~/Content/login") .Include("~/Content/login.css", new CssRewriteUrlTransform()) );
2. css中使用@Import "base.css" 找不到对应的文件
解决：修改为 @import url("base.css");
import的相关文章：https://segmentfault.com/a/1190000000369549
参考：
http://blog.csdn.net/zhou44129879/article/details/16818987
http://www.cnblogs.com/weishao/archive/2013/04/12/3015005.html
