欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

详解Asp.Net MVC的Bundle捆绑

程序员文章站 2023-12-18 23:32:52
大多数浏览器会对同一域名的请求限制请求数量，一般是在8个以内。每次最多可以同时请求8个，要是资源多于8个，那么剩下的就要排队等待请求了。所以为了提高首次加载页面的速度。提高...

大多数浏览器会对同一域名的请求限制请求数量，一般是在8个以内。每次最多可以同时请求8个，要是资源多于8个，那么剩下的就要排队等待请求了。所以为了提高首次加载页面的速度。提高请求并发请求数量，降低请求次数就是一个很重要的点。

bundle

asp.net mvc4和.net framework4.5提供了支持捆绑和压缩的新类库system.web.optimization。

该类库提供了如下特性：

捆绑-将多个资源文件（javascript,css）合并成一个单独的文件，但是合并成的单独文件必须是相同类型，要么都是javascript要么都是css。

压缩资源文件-清理空格，换行等，压缩文件大小。

自动清理缓存-服务端更新资源时，客户端不再使用缓存资源，而是重新从服务端缓存。

1. 定义bundle

在app_start文件中新增一个bundleconfig.cs文件。实现静态registerbundles方法。该方法用来创建，注册和配置bundle。（在该目录下代码最好把他们的命名空间去掉 ".app_start"，保持一个统一的高等级的命名空间）。

调用bundlecollection.add()方法添加捆绑资源，该方法参数为scriptbundle或stylebundle。

scriptbundle和stylebundle需要传递一个虚拟路径给构造函数。该虚拟路径其实就是该捆绑的名称或者标识符。所以该虚拟路径可以任意设置，并不需要匹配物理路径。bundle的include方法包含一个或者多个脚本。

通过引用该虚拟路径就可以使用这些捆绑的资源@script.render("~/bundles/jquery")。

debug模式下默认没有开启捆绑和压缩，发布模式下默认是开启的。

public static void registerbundles(bundlecollection bundles)
{
  //该值为true，在任何模式下都使用捆绑和压缩。
  //bundletable.enableoptimizations = true;
  
  //添加名称为“~/bundles/jquery”脚本捆绑
  bundles.add(new scriptbundle("~/bundles/jquery").include("~/scripts/jquery-{version}.js"));
  //添加名称为“~/content/css”样式捆绑
  bundles.add(new stylebundle("~/content/css").include("~/content/site.css"));
}

使用{version}占位符可以在使用nuget更新jquery版本时，不需要更新bundle的引用，自动使用最新的jquery版本。

scriptbundle和stylebundle的include方法参数是一个字符串类型的数组，所以一个bundle实例可以添加多个文件。

bundles.add(new stylebundle("~/content/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"));

但是bundle类也提供了includedirectory方法，可以添加指定目录下的指定文件。

//添加content/themes/base目录下的所有css文件
bundles.add(new stylebundle("~/content/css"").includedirectory("~/content/themes/base", "*.css"));

使用通配符要注意：

使用通配符添加资源时。这些资源文件是按照名称来排序的。

2. 启用bundle

在global.asax的appliaction_start方法中调用之前的定义的方法，bundleconfig.registerbundles(bundletable.bundles)
启用bundle。

public class mvcapplication : system.web.httpapplication
{
 protected void application_start()
 {
  bundleconfig.registerbundles(bundletable.bundles);
 }
}
3. 使用bundle

如果我们需要在页面中使用这些资源时。可以通过styles和scripts来引入。如果要使用捆绑的style，可以在页面中添加@styles.render("~/content/css")。如果要使用捆绑的script，可以在页面中添加@script.render("~/bundles/jquery")
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>@viewbag.title - 我的 asp.net 应用程序</title>
 //引入样式捆绑
 @styles.render("~/content/css") 
</head>
<body> 
 <div class="container body-content">
  @renderbody()
  <hr />
  <footer>
   <p>© @datetime.now.year - 我的 asp.net 应用程序</p>
  </footer>
 </div>
 //引入js捆绑
 @scripts.render("~/bundles/jquery")
 @rendersection("scripts", required: false)
</body>
</html>

可以把css样式文件置顶，javascript文件置底，来优化网页。但是modernizr.js文件要放在页面顶部，因为有些样式文件需要。

使用cdn

bundle对cdn也提供了很好的支持。

public static void registerbundles(bundlecollection bundles)
{
 //bundles.add(new scriptbundle("~/bundles/jquery").include(
 //   "~/scripts/jquery-{version}.js"));

 bundles.usecdn = true; //启用cdn
 //添加地址
 var jquerycdnpath = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js";
 bundles.add(new scriptbundle("~/bundles/jquery",jquerycdnpath).include("~/scripts/jquery-{version}.js"));
}

在使用cdn时，要应对没有获取到资源的情况。

@scripts.render("~/bundles/jquery")
  <script type="text/javascript">
   if (typeof jquery == 'undefined') {
    var e = document.createelement('script');
    e.src = '@url.content("~/scripts/jquery-1.7.1.js")';
    e.type = 'text/javascript';
    document.getelementsbytagname("head")[0].appendchild(e);

   }
  </script>

bundle缓存

浏览器是根据url来缓存数据的。浏览器无论何时请求资源，都会根据url来检查缓存里是否包含了该资源文件。如果包含了，浏览器就不会再去请求，而是使用缓存的文件，来渲染。

bundle机制使我们每次修改资源文件时都会在url后自动添加一个哈希值,从而避免浏览器缓存，不能及时更新资源的情况。

详解Asp.Net MVC的Bundle捆绑

v=******，后面的值就是哈希值。bundle 在debug模式下默认是没有开启的。在发布模式下才会开启。但是我们可以在bundleconfig下添加bundletable.enableoptimizations = true;开启捆绑模式。

bundle注意事项
一个bundle一般包含多个文件，如果我们只是修改了其中的一个文件，那么bundle的哈希值也会改变，就会更新bundle的所有文件。

捆绑和缩小主要降低了第一次访问页面时加载的时间。此时静态资源就会被缓存起来（js,css，图片）。当访问其他页面，且该页面的资源地址和第一次访问的地址相同时，就会从缓存里获取，不再向服务端获取。

如果资源过多，使用cdn，比使用bundle更有效。当然bundle也可以结合cdn使用。 通过使用cdn，可以减轻每个主机名8个并发连接的浏览器限制。因为cdn的主机名与您的主机站点不同，cdn上的资产请求不会与您的主机环境的8个并发连接数计数。

bundle最好按照功能来区分捆绑。例如，默认的asp.net应用程序的net mvc模板创建了一个与jquery分离的jquery验证包。因为所创建的默认视图输入输出值，所以它们需要验证包。

上一篇：

下一篇：

推荐阅读