.net MVC BundleConfig.cs 合并js和css文件说明文档
来源:互联网 发布:淘宝一元购流程 编辑:程序博客网 时间:2024/05/17 09:18
浏览器在向服务器发送请求的时候,请求的文件链接数量是有限制的,如果页面文件少就没有什么问题了,如果文件太多就会导致链接失败等等问题。针对这个问题MVC4中增加了新功能:BundleConfig.cs,使用BundleConfig可以将多个文件请求和并成一个请求,去除文件中的一些注释、空白、压缩文件的大小,自动合并压缩优化代码,缩短响应时间,提高网页速度,起到优化网站的作用。
具体使用方法
1、注册BundleConfig
在global.asax文件中的Application_Start()方法中添加以下代码
BundleConfig.RegisterBundles(BundleTable.Bundles);
2、创建分组文件
打开:App_Start/BundleConfig.cs 文件,里面有些系统默认的方法(如果是自己创建的文件是没有的,可以通过创建一个非空的MVC项目来查看)
public
class
BundleConfig
{
// 有关 Bundling 的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public
static
void
RegisterBundles(BundleCollection bundles)
{
bundles.Add(
new
ScriptBundle(
"~/bundles/jquery"
).Include(
"~/Scripts/jquery-{version}.js"
));
bundles.Add(
new
ScriptBundle(
"~/bundles/jqueryui"
).Include(
"~/Scripts/jquery-ui-{version}.js"
));
//JS文件
bundles.Add(
new
ScriptBundle(
"~/bundles/jqueryval"
).Include(
"~/Scripts/jquery.unobtrusive*"
,
"~/Scripts/jquery.validate*"
));
// 使用 Modernizr 的开发版本进行开发和了解信息。然后,当你做好
// 生产准备时,请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
bundles.Add(
new
ScriptBundle(
"~/bundles/modernizr"
).Include(
"~/Scripts/modernizr-*"
));
//CSS文件
bundles.Add(
new
StyleBundle(
"~/Content/css"
).Include(
"~/Content/site.css"
));
bundles.Add(
new
StyleBundle(
"~/Content/themes/base/css"
).Include(
"~/Content/themes/base/jquery.ui.core.css"
,
"~/Content/themes/base/jquery.ui.resizable.css"
,
"~/Content/themes/base/jquery.ui.selectable.css"
,
"~/Content/themes/base/jquery.ui.accordion.css"
,
"~/Content/themes/base/jquery.ui.autocomplete.css"
,
"~/Content/themes/base/jquery.ui.button.css"
,
"~/Content/themes/base/jquery.ui.dialog.css"
,
"~/Content/themes/base/jquery.ui.slider.css"
,
"~/Content/themes/base/jquery.ui.tabs.css"
,
"~/Content/themes/base/jquery.ui.datepicker.css"
,
"~/Content/themes/base/jquery.ui.progressbar.css"
,
"~/Content/themes/base/jquery.ui.theme.css"
));
}
}
代码解释:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
"~/bundles/jquery" :表示分组的文件路径(也就是产生一个虚拟的文件夹)。
"~/Scripts/jquery-{version}.js" :表示该分组包含的具体文件,是项目实际存在的文件。如果有多个文件参考代码中下面的写法。 {version}参数代表版本号 ,*代表所有,这两个是可以理解为通配符。
代码中的其它几个add意思是一样的。根据不同的文件类型等创建不同的分组,比如js文件创建一个分组,css创建一个分组等。
3、使用分组
在视图页面添加代码
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<meta name=
"viewport"
content=
"width=device-width"
/>
<title>@ViewBag.Title</title>
<!--Style 分组代码调用 名称就是定义的分组文件名称 -->
@Styles.Render(
"~/Content/css"
)
<!--JavaScript 分组代码调用 名称就是定义的分组文件名称 -->
@Scripts.Render(
"~/bundles/modernizr"
)
</head>
<body>
@RenderBody()
<!--JavaScript 分组代码调用 名称就是定义的分组文件名称 -->
@Scripts.Render(
"~/bundles/jquery"
)
@RenderSection(
"scripts"
, required:
false
)
</body>
</html>
代码解释:
@Scripts.Render(
"~/bundles/jquery"
)
其中的“~/bundles/jquery” 是上面定义的文件分组名称
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,
当加载后缀名为这些的文件,将显示空白。可以用如下方法去除对这些文件过滤限制
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);
- .net MVC BundleConfig.cs 合并js和css文件说明文档
- ASP.NET MVC - BundleConfig.cs(打包压缩js和css )
- 在ASP.NET MVC中,App_Start/BundleConfig.cs来打包压缩js和css
- Asp.Net MVC BundleConfig文件合并、压缩,网站优化加速
- MVC 通过BundleConfig 将JS和CSS文件引入到视图中
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
- 在ASP.NET WEBFORM项目中使用MVC4中的BundleConfig捆绑压缩JS和CSS
- MVC BundleConfig文件的作用
- 在服务端合并js和css文件
- 在服务端合并js和css文件
- .Net MVC中使用css 和js
- 合并JS和CSS
- ASP.NET MVC4细嚼慢咽---(5)js css文件合并
- ASP.NET MVC 4 的Bundles功能 打包压缩JS/CS文件
- 把JS和CSS合并到1个文件
- Symfony利用assetsBundle合并和压缩css,js文件
- 最简单的css和js文件合并
- web优化之-Asp.net MVC js、css动态合并 动态压缩
- CUDAExample-0-cppOverload
- AngularJS
- 判断安卓应用是否是第一次启动
- 第十三章mvc模式与php框架
- 追MM与Java的23种设计模式
- .net MVC BundleConfig.cs 合并js和css文件说明文档
- 转:Android 发送短信的方法
- 【ahk】为招商证券通达信版增加热键显隐跳空缺口,热键ctrl+
- MVC 架构设计
- hibernate的连接查询
- PAT乙级题目1002构思的改进和实践
- phpmail
- SHU1954 Dispsy loves flowers
- asp.net Operation failed, unable to locate the solution directory