ASP.NET MVC4中用 BundleCollection使用问题手记

ASP.NET MVC4中对JS和CSS的引用又做了一次变化，在MVC3中我们这样引用资源文件：

<span class="kwrd"><</span><span class="html">link</span> <span class="attr">href</span><span class="kwrd">="@Url.Content("</span>~/<span class="attr">Content</span>/<span class="attr">Site</span>.<span class="attr">css</span><span class="kwrd">")"</span> <span class="attr">rel</span><span class="kwrd">="stylesheet"</span>   <span class="attr">type</span><span class="kwrd">="text/css"</span> <span class="kwrd">/></span>

将在运行的时候自动将虚拟（相对）路径转换为应用程序绝对路径。这是比较传统的引用方式，尽管他做了一次转换操作，对服务器的请求数量压力并没有什么改进的变化，所以推测可能出于模块化设计思想和并发方面的考虑，微软在MVC4中将这一方式做了改变：

在新建一个ASP.NETMVC4站点的时候都会在～/App_Start目录下有一个BundleConfig.cs的启动文件，当然创建其他的ASP.NET4.0及4.0以上的项目也会有。这个文件里面包含了如下代码：

 bundles.Add(<span class="kwrd">new</span> ScriptBundle(<span class="str">"~/bundles/jqueryval"</span>).Include(                        <span class="str">"~/Scripts/jquery.unobtrusive*"</span>,                        <span class="str">"~/Scripts/jquery.validate*"</span>));     bundles.Add(<span class="kwrd">new</span> StyleBundle(<span class="str">"~/Content/css"</span>).Include(<span class="str">"~/Content/site.css"</span>));

这段代码被放在Application_Start()中执行了：

BundleConfig.RegisterBundles(BundleTable.Bundles);

上述Add方法的含义在于将网站引用资源根据实际情况进行分组引用，然后页面部分按照如下方式来引用：

@Scripts.Render(<span class="str">"~/bundles/jquery"</span>)    @Styles.Render(<span class="str">"~/Content/css"</span>)

在运行之后会生成常规引用代码，从而达到资源引用的目的。但是这个改进远远没有看起来那么简单，我们先引用《淘宝这十年》中一段话：

生成首页后，对Web前端稍微有点常识的人都应该知道，浏览器下一步会加载页面中用到的CSS、JS（JavaScript）、图片等样式、脚本和资源文件。但是可能相对较少的人才会知道，你的浏览器在同一个域名下并发加载的资源数量是有限的，例如IE 6和IE 7是两个，IE 8是6个，chrome各版本不大一样，一般是4～6个。我刚刚看了一下，我访问淘宝网首页需要加载126个资源，那么如此小的并发连接数自然会加载很久。

我们只需要将BundleTable.EnableOptimizations设置为true，MVC4就会启用压缩，将单次引用的资源文件压缩，减少请求数量和带宽，当然在开发调试时一般不开启。

那么会遇到什么问题呢？

1. 自定义的JS不一定能成功加载。

    我们一般习惯于将JS和CSS放置在一个大目录中，因为有些时候他们是分不开的（项目规模大了除外），比如我是将EasyUI的目录结构原原本本的放在Content目录下，那么删除掉Scripts目录和BundleConfig.cs中无关引用，添加自己的如下：

 bundles.Add(<span class="kwrd">new</span> ScriptBundle(<span class="str">"~/bundles/jquery"</span>).Include(                        <span class="str">"~/Content/jquery.min.js"</span>));     bundles.Add(<span class="kwrd">new</span> ScriptBundle(<span class="str">"~/bundles/easyui"</span>).Include(                        <span class="str">"~/Content/jquery.easyui.min.js"</span>));

页面中按照上面的方式引用，结果发现根本没有引用到，于是注意到MVC在设计这里的功能的时候引入了通配符，比如

bundles.Add(<span class="kwrd">new</span> ScriptBundle(<span class="str">"~/bundles/jquery"</span>).Include(                    <span class="str">"~/Scripts/jquery-{version}.js"</span>));    bundles.Add(<span class="kwrd">new</span> ScriptBundle(<span class="str">"~/bundles/jqueryval"</span>).Include(                        <span class="str">"~/Scripts/jquery.unobtrusive*"</span>,                        <span class="str">"~/Scripts/jquery.validate*"</span>));

可以通过版本匹配，也可以通过*号匹配但是必须放在最后，没有提会忽略哪些字符串，所以导致了上述问题。

解决方案是去掉min即可。

2.css被压缩后，里面图片路径文件的问题。

样式表中Content/themes/styles.css 里图片一般都是这样写的 background: url(img/bg.png)，在启用了压缩之后路径就会改变，所以路径全部出现找不到资源的情况。

解决方案：对于独立的CSS单独分组如：

bundles.Add(<span class="kwrd">new</span> StyleBundle(<span class="str">"~/Content/css"</span>).Include(<span class="str">"~/Content/site.css"</span>));

暂时发现这2个问题，MSDN居然没有做说明，特此记录！

这两个问题终于找到答案了：

 注:默认情况下 BundleTable.Bundles会过滤掉后缀名为这些的文件,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,

 当加载后缀名为这些的文件，将显示空白。 可以用如下方法去除对这些文件过滤限制

  BundleTable.Bundles.IgnoreList.Clear(); 
            BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);
            //BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always); 
            //BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);