你的位置:首页 > ASP.net教程

[ASP.net教程]mvc bundle的介绍及使用 转载自 http://www.ityouzi.com/archives/mvc


Asp.Net MVC4 BundleConfig文件合并、压缩,网站优化加速


 浏览器在向服务器发送请求的时候,请求的文件链接数量是有限制的,如果页面文件少就没有什么问题了,如果文件太多就会导致链接失败等等问题。针对这个问题MVC4中增加了新功能:BundleConfig.cs,使用BundleConfig可以将多个文件请求和并成一个请求,去除文件中的一些注释、空白、压缩文件的大小,自动合并压缩优化代码,缩短响应时间,提高网页速度,起到优化网站的作用。

 

具体使用方法

1、注册BundleConfig

在global.asax文件中的Application_Start()方法中添加以下代码

1
 BundleConfig.RegisterBundles(BundleTable.Bundles);



 

2、创建分组文件

打开:App_Start/BundleConfig.cs 文件,里面有些系统默认的方法(如果是自己创建的文件是没有的,可以通过创建一个非空的MVC项目来查看)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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、使用分组

在视图页面添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>



 

代码解释:

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



其中的“~/bundles/jquery” 是上面定义的文件分组名称

 

4、合并页面请求

接下来我们通过分组将请求多个文件合并成请求一个,可以使用如下两种方法来实现:

  1. 将web.config中的编译调试debug设为false  <compilation debug="false" targetFramework="4.5"/>

  2. 在BundleConfig中的方法末尾添加  BundleTable.EnableOptimizations = true; (建议使用这个方法),

 

配置完成以后刷新页面,就可以看到 :

 src="http://www.cnblogs.com//bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"

解释:?前面是分组名称,后面是多个文件合并后生成的哈希码

可以要通过火狐的firebug或者是谷歌浏览器查看合并前后的效果,看着加载文件数量和加载速度还是有很大提升的。

 

5、其它注意事项

1、使用中注意区分Js和css文件,产生分组的方法和前台调用的方法名称都是不一样的,详细请看上面的代码

2、默认情况下BundleTable.Bundles会过滤掉后缀名为这些的文件:

    ,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,

当加载后缀名为这些的文件,将显示空白。可以用如下方法去除对这些文件过滤限制

1
2
3
4
  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);



 

 

如果提示:未能加载 WebGrease.dll ,请查看这里:http://ityouzi.com/archives/mvc-webgrease-error.html