Asp.Net MVC 捆绑（Bundle）

时间 2019-11-19

标签 asp.net asp mvc 捆绑 bundle 栏目 ASP 繁體版

原文原文链接

Asp.Net MVC 捆绑（Bundle）

大多数浏览器会对同一域名的请求限制请求数量，通常是在8个之内。每次最多能够同时请求8个，要是资源多于8个，那么剩下的就要排队等待请求了。因此为了提升首次加载页面的速度。提升请求并发请求数量，下降请求次数就是一个很重要的点。javascript

Bundle

Asp.Net MVC4和.NET Framework4.5提供了支持捆绑和压缩的新类库System.Web.Optimization。css

该类库提供了以下特性：html

捆绑-将多个资源文件（javascript,css）合并成一个单独的文件，可是合并成的单独文件必须是相同类型，要么都是JavaScript要么都是CSS。
压缩资源文件-清理空格，换行等，压缩文件大小。
自动清理缓存-服务端更新资源时，客户端再也不使用缓存资源，而是从新从服务端缓存。

1. 定义Bundle

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

调用BundleCollection.Add()方法添加捆绑资源，该方法参数为ScriptBundle或StyleBundle。jquery
ScriptBundle和StyleBundle须要传递一个虚拟路径给构造函数。该虚拟路径其实就是该捆绑的名称或者标识符。因此该虚拟路径能够任意设置，并不须要匹配物理路径。Bundle的Include方法包含一个或者多个脚本。ajax
经过引用该虚拟路径就可使用这些捆绑的资源@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>&copy; @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后自动添加一个哈希值,从而避免浏览器缓存，不能及时更新资源的状况。

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验证包。由于所建立的默认视图输入输出值，因此它们须要验证包。

若有不对，请多多指教。

参考：

Bundleing and Minification
Asp.Net MVC 4 Web 编程