ASP.NET MVC4中用 BundleCollection使用问题手记
ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件:
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径。这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量压力并没有什么改进的变化,所以推测可能出于模块化设计思想和并发方面的考虑,微软在MVC4中将这一方式做了改变:
在新建一个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方法的含义在于将网站引用资源根据实际情况进行分组引用,然后页面部分按照如下方式来引用:
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")
在运行之后会生成常规引用代码,从而达到资源引用的目的。但是这个改进远远没有看起来那么简单,我们先引用《淘宝这十年》中一段话:
生成首页后,对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"));
暂时发现这2个问题,MSDN居然没有做说明,特此记录!
ASP.NET MVC4中用 BundleCollection使用问题手记的更多相关文章
- ASP.NET MVC4中用 BundleCollection
来源:http://www.cnblogs.com/madyina/p/3702314.html ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: &l ...
- CentOS上 Mono 3.2.8运行ASP.NET MVC4经验
周一到周三,折腾了两天半的时间,经历几次周折,在小蝶惊鸿的鼎力帮助下,终于在Mono 3.2.8上运行成功MVC4.在此总结经验如下: 系统平台的版本: CentOS 6.5 Mono 3.2.8 J ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- ASP.NET MVC4中的bundles特性引发服务器拒绝访问(403错误)
在ASP.NET MVC4中微软引入了bundles特性,这个特性可以将服务器端的多个Javascript或多个css文件捆绑在一起作为一个单一的URL地址供客户端浏览器调用,从而减少了页面上Http ...
- Asp.Net MVC4新特性指南(2):新特性介绍
上一章讲解了最基本的MVC4说明.今天就介绍下几种新特性的使用例子: 就当大家有MVC3的基础了.在这个基础上在看下面的介绍就容易多了.1.Web API MVC4包括一个更好的解决方案:A ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨 系列目录 基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(19)-权限管理系统-用户登录
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(19)-权限管理系统-用户登录 我们之前做了验证码,登录界面,却没有登录实际的代码,我们这次先把用户登录先 ...
- 一年开发ASP.NET MVC4项目经验总结
一年开发ASP.NET MVC4项目所用所学技术经验总结 阅读目录 文章背景 前端所用技术摘要 后端所用技术摘要 1. 文章背景 本人2014年从Java转行到C#从事BS项目的开发,刚开始接触的是A ...
- 【转】Asp.Net MVC4 之Url路由
MVC4常见路由的处理方式 //直接方法重载+匿名对象 routes.MapRoute( name: "Default", url: "{controller}/{act ...
随机推荐
- POJ3057 Evacuation(二分图最大匹配)
人作X部:把门按时间拆点,作Y部:如果某人能在某个时间到达某门则连边.就是个二分图最大匹配. 时间可以二分枚举,或者直接从1枚举时间然后加新边在原来的基础上进行增广. 谨记:时间是个不可忽视的维度. ...
- [开源框架推荐]Icepdf:纯java的pdf文档的提取和转换库
ICEpdf 是一个轻量级的开源 Java 语言的 PDF 类库.通过 ICEpdf 可以用来浏览.内容提取和转换 PDF 文档,而无须一些本地PDF库的支持. 可以用来做什么? 1.从pdf文件中提 ...
- 关于后台管理linkbutton按钮几个重要属性的理解
<asp:LinkButton ID="lkbtnDelete" runat="server" CausesValidation="False& ...
- [ZT] Vim快捷键分类
一. 移动: h,j,k,l: 左,下,上,右. w: 下一个词的词首. e:下一个词的词尾. b:上一个词的词首. <>: v 模式选中后进行缩进.二. 跳 ...
- Swift Internal Parameter and External Parameter 外部参数和内部参数
今天跟大神又学习了些关于IOS开发Swift语言的外部参数和内部参数 func doSomething(num1: Int, num2: Int) -> Int { return num1 + ...
- Hadoop工程包架构解析
Hadoop源码解析 1 --- Hadoop工程包架构解析 1 Hadoop中各工程包依赖简述 Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算 ...
- PAT天梯赛练习题 L2-013 红色警报(并查集+逆序加边)
L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...
- [转]Jquery通用开源框架之【ejq.js】
ejq是一款非常小巧的JS工具库,未压缩才50K,在jquery的基础上对jquery缺失部分作了很好的弥补作用. 优点: 1.具有内置的模板解析引擎语法和angularjs相近减少学习成本 2.能够 ...
- jQuery如何去判断页面是否有父页面?
jQuery如何去判断页面是否有父页面? 是要判断当前页面是否被嵌入在frame里吗? 1 2 3 if (top != self) { alert('我在框架里'); }
- 推荐!国外程序员整理的 PHP 资源大全
推荐!国外程序员整理的 PHP 资源大全 2014/08/02 · PHP, 工具与资源 · 8.5K 阅读 · 1 评论· php 分享到:0 与<YII框架>不得不说的故事—安全篇 R ...