详解Asp.Net MVC的Bundle捆绑

大多数浏览器会对同一域名的请求限制请求数量，一般是在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"));
}

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"));								 
 1/3    1 2 3 下一页 尾页