关于MVC中BundleCollection压缩js css文件 发布…
2018-06-22 06:15:45来源：未知 阅读 ()
ASP.NET MVC4，ASP.NET MVC5中对JS和CSS的引用又做了一次变化，在MVC3中我们这样引用资源文件：
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
将在运行的时候自动将虚拟（相对）路径转换为应用程序绝对路径。这是比较传统的引用方式，尽管他做了一次转换操作，对服务器的请求数量压力并没有什么改进的变化，所以推测可能出于模块化设计思想和并发方面的考虑，微软在MVC4，MVC5中将这一方式做了改变：
在新建一个ASP.NETMVC4之后站点的时候都会在～/App_Start目录下有一个BundleConfig.cs的启动文件，当然创建其他的ASP.NET4.0及4.0以上的项目也会有。这个文件里面包含了如下代码：
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
这段代码被放在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不一定能成功加载。
我们一般习惯于将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;
问题解决。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- Asp.net MVC SignalR来做实时Web聊天实例代码 2020-03-29
- ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据 2020-03-29
- ASP.NET MVC Admin主页快速构建 2020-03-23
- Asp.Net MVC4通过id更新表单内容的思路详解 2020-03-19
- MVC数据验证详解 2020-03-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
