.net MVC BundleConfig.cs 合并js和css文件说明文档
2015-12-20 23:24
561 查看
浏览器在向服务器发送请求的时候,请求的文件链接数量是有限制的,如果页面文件少就没有什么问题了,如果文件太多就会导致链接失败等等问题。针对这个问题MVC4中增加了新功能:BundleConfig.cs,使用BundleConfig可以将多个文件请求和并成一个请求,去除文件中的一些注释、空白、压缩文件的大小,自动合并压缩优化代码,缩短响应时间,提高网页速度,起到优化网站的作用。
在global.asax文件中的Application_Start()方法中添加以下代码
打开:App_Start/BundleConfig.cs 文件,里面有些系统默认的方法(如果是自己创建的文件是没有的,可以通过创建一个非空的MVC项目来查看)
代码解释:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
"~/bundles/jquery" :表示分组的文件路径(也就是产生一个虚拟的文件夹)。
"~/Scripts/jquery-{version}.js" :表示该分组包含的具体文件,是项目实际存在的文件。如果有多个文件参考代码中下面的写法。 {version}参数代表版本号 ,*代表所有,这两个是可以理解为通配符。
代码中的其它几个add意思是一样的。根据不同的文件类型等创建不同的分组,比如js文件创建一个分组,css创建一个分组等。
在视图页面添加代码
代码解释:
其中的“~/bundles/jquery” 是上面定义的文件分组名称
接下来我们通过分组将请求多个文件合并成请求一个,可以使用如下两种方法来实现:
将web.config中的编译调试debug设为false <compilation debug="false" targetFramework="4.5"/>
在BundleConfig中的方法末尾添加 BundleTable.EnableOptimizations = true; (建议使用这个方法),
配置完成以后刷新页面,就可以看到 :
src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"
解释:?前面是分组名称,后面是多个文件合并后生成的哈希码
可以要通过火狐的firebug或者是谷歌浏览器查看合并前后的效果,看着加载文件数量和加载速度还是有很大提升的。
1、使用中注意区分Js和css文件,产生分组的方法和前台调用的方法名称都是不一样的,详细请看上面的代码
2、默认情况下BundleTable.Bundles会过滤掉后缀名为这些的文件:
,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,
当加载后缀名为这些的文件,将显示空白。可以用如下方法去除对这些文件过滤限制
具体使用方法
1、注册BundleConfig
在global.asax文件中的Application_Start()方法中添加以下代码
2、创建分组文件
打开:App_Start/BundleConfig.cs 文件,里面有些系统默认的方法(如果是自己创建的文件是没有的,可以通过创建一个非空的MVC项目来查看)bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
"~/bundles/jquery" :表示分组的文件路径(也就是产生一个虚拟的文件夹)。
"~/Scripts/jquery-{version}.js" :表示该分组包含的具体文件,是项目实际存在的文件。如果有多个文件参考代码中下面的写法。 {version}参数代表版本号 ,*代表所有,这两个是可以理解为通配符。
代码中的其它几个add意思是一样的。根据不同的文件类型等创建不同的分组,比如js文件创建一个分组,css创建一个分组等。
3、使用分组
在视图页面添加代码
4、合并页面请求
接下来我们通过分组将请求多个文件合并成请求一个,可以使用如下两种方法来实现:将web.config中的编译调试debug设为false <compilation debug="false" targetFramework="4.5"/>
在BundleConfig中的方法末尾添加 BundleTable.EnableOptimizations = true; (建议使用这个方法),
配置完成以后刷新页面,就可以看到 :
src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"
解释:?前面是分组名称,后面是多个文件合并后生成的哈希码
可以要通过火狐的firebug或者是谷歌浏览器查看合并前后的效果,看着加载文件数量和加载速度还是有很大提升的。
5、其它注意事项
1、使用中注意区分Js和css文件,产生分组的方法和前台调用的方法名称都是不一样的,详细请看上面的代码2、默认情况下BundleTable.Bundles会过滤掉后缀名为这些的文件:
,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,
当加载后缀名为这些的文件,将显示空白。可以用如下方法去除对这些文件过滤限制
相关文章推荐
- CSS-布局模型
- DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替
- 10029---CSS 下拉菜单 ,图片廊
- CSS position 属性
- 10028---CSS 导航栏
- CSS水平、垂直居中小结
- 一个纯CSS写的登录的样式
- css常用颜色
- 为你的WordPress博客添加CSS3炫酷读者墙
- 用CSS3实现带小三角形的div框(不用图片)
- 【遇到的问题】想写一个通用的adapter,样式一样但是数据源是不同的,怎么做
- CSS系列:CSS常用样式
- [译] 关于CSS中的float和position
- ListView 添加长度样式不固定的分割线
- 10027---CSS 伪元素
- css毛玻璃效果
- CSS之box-sizing的用处简介
- 10026---CSS 伪类
- java--css+js做的树形菜单(完整版)
- CSS3 仿古墓丽影9菜单界面