MVC 之解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后的丢失

　　在MVC3中我们这样引用资源文件：

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

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

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

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

　　在 Global.asax 文件的 Application_Start() 中执行：

BundleConfig.RegisterBundles(BundleTable.Bundles);

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

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

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

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

　　生成首页后，对 Web 前端稍微有点常识的人都应该知道，浏览器下一步会加载页面中用到的CSS、JS（JavaScript）、图片等样式、脚本和资源文件。

但是可能相对较少的人才会知道，你的浏览器在同一个域名下并发加载的资源数量是有限的，例如IE 6和IE 7是两个，IE 8是6个，chrome各版本不大一样，

一般是4～6个。我刚刚看了一下，我访问淘宝网首页需要加载126个资源，那么如此小的并发连接数自然会加载很久。

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

　　但是，可能会遇到如下问题：

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

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

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Content/jquery.min.js"));

bundles.Add(new ScriptBundle("~/bundles/easyui").Include(

                        "~/Content/jquery.easyui.min.js"));

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

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.unobtrusive*",

                        "~/Scripts/jquery.validate*"));

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

　　解决方案是去掉min即可。

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

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

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

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

3. 项目发布后 Css 样式及 Js 脚本引用丢失

　　项目中使用@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery")方式引用的样式或脚本文件在发布后出现丢失的情况，页面打开后样式全乱了，但是调试的时候却是正常的。查找一下原因是这么说的：

默认本地vs里面调试的时候，因为web.config文件里面有一个debug属性，当有此属性时，默认css和js是不会压缩的，此时加载的js也是不支持.min.js这种的

，加载的都是不带min的js文件！而当发布到iis后，web.config里面没有debug属性了，此时css和js是会自动启用压缩功能，压缩后的css里面若没有指定图片相对于网站的根目录的路径

的话，图片也是没办法正常显示的，js此时也会只加载有.min的文件。

　　解决方案：在绑定文件BundleConfig的方法RegisterBundles下设置属性：

BundleTable.EnableOptimizations = false;