ASP.NET MVC4之js css文件合并功能(3)

程序员文章站 2023-12-21 11:14:40

mvc4增加了一些新功能，接下来，我们来研究下mvc4中的新增功能，我们在新建一个mvc4项目的时候，会发现在项目下多出了一个app_start文件夹，文件夹下面有4个文件...

mvc4增加了一些新功能，接下来，我们来研究下mvc4中的新增功能，我们在新建一个mvc4项目的时候，会发现在项目下多出了一个app_start文件夹，文件夹下面有4个文件，bundleconfig.cs，filterconfig.cs，routeconfig.cs，webapiconfig.cs，其中bundleconfig.cs文件就是我们这一节要讲的的文件。
众所周知，浏览器在向服务器发送请求的时候，请求的文件连接数量是有限制的。使用bundleconfig可以将多个文件请求和并成一个请求，去除文件中的一些注释，空白，压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度，起到优化网站的作用。
1.定义分组
创建mvc4项目后，我们会在global.asax文件中的application_start()方法中看到如下代码，起到注册作用
bundleconfig.registerbundles(bundletable.bundles);
bundleconfig.cs代码：

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")); 
 
   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-*")); 
 
   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")); 
  } 
 }

bundlecollection是一个集合，用于将绑定规则添加到集合中，使用add方法.
bundles.add(new scriptbundle("~/bundles/jquery").include( "~/scripts/jquery-{version}.js"));
new scriptbundle("~/bundles/jquery")定义一个分组名称，include表示这个分组下具体包括的文件。
version参数代表版本号 ,*代表所有，这两个是可以理解为通配符。
以上代码表示创建一个~/bundles/jquery分组，该分组指向的文件为scripts文件夹下的jquery-1.7.1.js文件。
如果scripts文件夹下有jquery-1.7.1.js，jquery-1.6.1.js，则会指向这两个文件。

同样，bundles.add(new stylebundle("~/content/css").include("~/content/site.css"));表示创建了一个~/content/css分组，指向~/content/site.css文件.

2.使用分组
分组已经定义好，我们接下演示怎样使用。
如果在页面中使用scripts，可以使用@scripts.render("~/bundles/jquery")方法，参数为分组名称
如果在页面中使用css,可以使用@styles.render("~/content/css")方法，参数为分组名称.
可以看下views文件夹下的shard文件夹的_layout.cshtml文件

<!doctype html> 
<html> 
<head> 
 <meta charset="utf-8" /> 
 <meta name="viewport" content="width=device-width" /> 
 <title>@viewbag.title</title> 
 @styles.render("~/content/css") 
 @scripts.render("~/bundles/modernizr") 
</head> 
<body> 
 @renderbody() 
 
 @scripts.render("~/bundles/jquery") 
 @rendersection("scripts", required: false) 
</body> 
</html>

运行项目后，可以查看页面源代码，效果如下

ASP.NET MVC4之js css文件合并功能(3)

3.合并请求
接下来我们通过分组将请求多个文件合并成请求一个，可以使用如下两种方法来实现
1).将web.config中的编译调试debug设为false <compilation debug="false" targetframework="4.5"/>
2).在bundleconfig中的方法末尾添加 bundletable.enableoptimizations = true;
再次运行页面，可以看到生成如下代码
src="/bundles/jquery?v=wbuqtimtmgl9hj0haqmerbd8com3uagnawp4udekfnm1"
?前面是分组名称，后面是多个文件合并后生成的哈希码

ASP.NET MVC4之js css文件合并功能(3)

4.对比效果
我们在火狐下用firebug查看合并前后的对比效果，可以对比下请求的文件大小，时间等方面的差别还是挺大的
压缩合并前：

ASP.NET MVC4之js css文件合并功能(3)

压缩合并后:

ASP.NET MVC4之js css文件合并功能(3)

注:默认情况下 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);

我们通过分组将请求多个文件合并成请求一个，压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度。希望通过本文可以帮助大家更好的优化网站。

ASP.NET MVC4之js css文件合并功能(3)