Bundling and Minification 捆绑和压缩特性

捆绑和压缩两种技术可以在ASP.NET 4.5中使用，以提高请求的负载时间。捆绑和压缩的改善加载时间减少到服务器的请求数和减少大小的请求的资产（如CSS和JavaScript）。

第一部分：介绍

 

由于目前主要浏览器的 同时连接每个主机名的(并发连接)数量限制是6个 ，意味着当这6次请求正在处理的时候 额外的请求则会处于排队等待 下面用ie10的开发工具来看一下 vs2012自动生成的mvc4网页的请求例子。

双击某个路径（下图显示的时间为加载 / Scripts/MyScripts/JavaScript6.js文件的细节）可以查看明细信息：

上面的图像显示了启动的情况下，给出了时间的请求被排队，因为浏览器的并发连接数限制。在这种情况下，将请求排队等待另一个请求完成46毫秒。 

---

1.捆绑#

捆绑是ASP.NET 4.5中的新功能，使得很容易地合并或多个文件捆绑成一个文件。您可以创建CSS，JavaScript和其他捆绑。较少的文件意味着更少的HTTP请求，并可以提高页面加载性能。#

 下图显示了相同的时序视图的关于查看先前所显示的，但是这一次捆绑和压缩启用。

 

 忽略图片那些请求 可以明显看到(css js)请求的次数

 

2.压缩 #

压缩执行各种不同的代码优化的脚本或CSS，如删除不必要的空白和注释，并缩短变量名的一个字符。考虑下面的JavaScript功能。

 

?

AddAltToImg = function (imageTagAndImageID, imageContext) {

    ///<signature>

    ///<summary>给图片添加一个alt

    // </summary>

    //<param name="imgElement" type="String">The image selector.</param>

    //<param name="ContextForImage" type="String">The image context.</param>

    ///</signature>

    var imageElement = $(imageTagAndImageID, imageContext);

    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));

}

 压缩后的

?

AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }

 

---

 

来看一下BM的性能提升

---

第二部分：在ASP.NET MVC 中使用

在创建的默认mvc4示例中的 App_Start \的BundleConfig.cs 文件   其中 RegisterBundles 方法 的代码：

 

 // 有关 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", "~/Scripts/jquery.ui.datepicker-zh-CN.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/EasyUi").Include(
                        "~/Scripts/EasyUi/easyloader.js"));

            bundles.Add(new ScriptBundle("~/bundles/kindeditor").Include(
                        "~/Scripts/kindeditor/kindeditor-min.js", "~/Scripts/kindeditor/lang/zh_CN.js"));

            bundles.Add(new ScriptBundle("~/Ztree").Include(
                        "~/Scripts/Ztree/jquery.ztree.core-{version}.js"));

            // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
            // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Css").Include("~/Content/Default/Style.css"));
            bundles.Add(new StyleBundle("~/UserCss").Include("~/Content/Default/User/Style.css"));
            bundles.Add(new StyleBundle("~/ManageCss").Include("~/Content/Default/Manage/Style.css"));
            bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
            bundles.Add(new StyleBundle("~/JqueryUiMetro").Include("~/Content/JqueryUi/Metro/jquery-ui-{version}.css"));
            bundles.Add(new StyleBundle("~/ZtreeCss").Include("~/Content/zTree/Default.css"));
        }

 

CDN用法：看跟上面的区别#

public static void RegisterBundles(BundleCollection bundles)
{
    //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    //            "~/Scripts/jquery-{version}.js"));

    bundles.UseCdn = true;   //enable CDN support

    //add link to jquery on the 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"));

    // Code removed for clarity.
}

在上面的代码中，jQuery将被要求在释放模式和调试版本的jQuery的CDN，而在本地调试模式将获取。当使用CDN，CDN请求失败的情况下，你应该有一个回退机制。下面的标记片段从去年底的布局文件显示脚本添加到请求jQuery的CDN失败。

 

 </footer>

        @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> 

        @RenderSection("scripts", required: false)
    </body>
</html>

使用CDN#

               

创建一个包#

代码显示了如何将多个文件添加到一个包

 

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

 

前台使用Render来显示：

<!DOCTYPE html>
<htmllang="en">
<head>
    @* Markup removed for clarity.*@    
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @* Markup removed for clarity.*@
   
   @Scripts.Render("~/bundles/jquery")
   @RenderSection("scripts", required: false)
</body>
</html>

 #

使用通配符"*"来选择文件#

 

bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll")
    .IncludeDirectory("~/Content/themes/base", "*.css"));