1，捆绑和缩小是ASP.NET 4.5中可以使用的两种技术，可以改善请求加载时间。捆绑和缩小可以减少对服务器的请求数量并减少所请求资产（例如CSS和JavaScript）的大小，从而缩短加载时间
如下图所示：
大多数当前主流浏览器将每个主机名的同时连接数限制为六个。这意味着在处理六个请求时，浏览器会对主机上的其他资产请求进行排队。在下图中，IE F12开发人员工具网络选项卡显示示例应用程序的“关于”视图所需资产的时间。
灰色条显示浏览器排队等待六个连接限制的时间。黄色条是第一个字节的请求时间，即发送请求和从服务器接收第一个响应所用的时间。蓝条表示从服务器接收响应数据所花费的时间。您可以双击资产以获取详细的计时信息。例如，下图显示了加载/Scripts/MyScripts/JavaScript6.js文件的计时详细信息。
上图显示了Start事件，它提供了请求排队的时间，因为浏览器限制了同时连接的数量。在这种情况下，请求排队等待46毫秒，等待另一个请求完成。
捆绑
Bundling是ASP.NET 4.5中的一项新功能，可以轻松地将多个文件合并或捆绑到一个文件中。您可以创建CSS，JavaScript和其他捆绑包。更少的文件意味着更少的HTTP请求，并且可以提高首页加载性能。
下图显示了之前显示的“关于”视图的相同时序视图，但这次启用了捆绑和缩小。
缩小
Minification对脚本或css执行各种不同的代码优化，例如删除不必要的空格和注释以及将变量名缩短为一个字符。请考虑以下JavaScript函数。
JavaScript的复制
AddAltToImg = function (imageTagAndImageID, imageContext) {
///<signature>
///<summary> Adds an alt tab to the image
// </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/, ''));
}
缩小后，功能将减少到以下内容（将一些注释和没用的符号一起去除，剩下一行代码，从而加快了加载速度）：
JavaScript的复制
AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }
除了删除注释和不必要的空格外，还重命名（缩短）以下参数和变量名称，如下所示：
| 原版的 | 改名 |
|---|---|
| imageTagAndImageID | ñ |
| imageContext | Ť |
| imageElement | 一世 |
捆绑和缩小的影响
下表显示了单独列出所有资产以及在示例程序中使用捆绑和缩小（B / M）之间的几个重要差异。
| 使用B / M. | 没有B / M | 更改 | |
|---|---|---|---|
| 文件请求 | 9 | 34 | 256％ |
| KB已发送 | 3.26 | 11.92 | 266％ |
| KB已收到 | 388.51 | 530 | 36％ |
| 加载时间 | 510 MS | 780 MS | 53％ |
发送的字节在捆绑时显着减少，因为浏览器在请求时应用的HTTP标头相当冗长。收到的字节减少量不是很大，因为最大的文件（Scripts \ jquery-ui-1.8.11.min.js和Scripts \ jquery-1.7.1.min.js）已经缩小。注意：示例程序的时序使用Fiddler工具来模拟慢速网络。（从Fiddler Rules菜单中，选择Performance，然后选择Simulate Modem Speeds。）
调试捆绑和缩小的JavaScript
这很容易调试在开发环境中（其中你的JavaScript 编译元素中的Web.config文件设置为debug="true"），因为JavaScript文件并没有捆绑或精缩。您还可以调试JavaScript文件捆绑和缩小的版本构建。使用IE F12开发人员工具，使用以下方法调试缩小包中包含的JavaScript函数：
- 选择Script选项卡，然后选择Start debugging按钮。
- 使用assets按钮选择包含要调试的JavaScript函数的包。
- 通过选择“ 配置”按钮
，然后选择“ 格式化JavaScript”来格式化缩小的JavaScript。 - 在“ 搜索脚本”输入框中，选择要调试的函数的名称。在下图中，在“ 搜索脚本”输入框中输入了AddAltToImg。
有关使用F12开发人员工具进行调试的详细信息，请参阅MSDN文章使用F12开发人员工具调试JavaScript错误。
控制捆绑和缩小
通过 在Web.config文件中的编译元素中设置debug属性的值来启用或禁用捆绑和缩小。在以下XML中，设置为true，因此禁用捆绑和缩小。debug
XML复制
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
要启用捆绑和缩小，请将debug值设置为“false”。您可以使用类上的属性覆盖Web.config设置。以下代码启用捆绑和缩小，并覆盖Web.config文件中的任何设置。EnableOptimizationsBundleTable
C＃复制
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true;
}
注意
除非EnableOptimizations是true或者Web.config文件中的编译元素 中的debug属性设置为，否则不会捆绑或缩小文件。此外，将不使用.min版本的文件，将选择完整的调试版本。覆盖Web.config文件中编译元素 中的debug属性falseEnableOptimizations
使用ASP.NET Web窗体和Web页面进行捆绑和缩小
- 对于Web页面，请参阅博客条目将Web优化添加到网页站点。
- 对于Web窗体，请参阅博客条目向Web窗体添加捆绑和缩小。
使用ASP.NET MVC捆绑和缩小
在本节中，我们将创建一个ASP.NET MVC项目来检查捆绑和缩小。首先，创建一个名为MvcBM的新ASP.NET MVC Internet项目，而不更改任何默认值。
打开App \ _Start \ BundleConfig.cs文件并检查RegisterBundles用于创建，注册和配置分发包的方法。以下代码显示了该RegisterBundles方法的一部分。
C＃复制
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
}
上面的代码创建了一个名为〜/ bundles / jquery的新JavaScript包，它包含Scripts文件夹中与通配符字符串“〜/ Scripts / jquery- {version”匹配的所有相应的（即调试或缩小但不是.vsdoc）文件。} .js文件”。对于ASP.NET MVC 4，这意味着使用调试配置，文件jquery-1.7.1.js将添加到包中。在发布配置中，将添加jquery-1.7.1.min.js。捆绑框架遵循几个常见的约定，例如：
- 当FileX.min.js和FileX.js存在时，选择“.min”文件以供发布。
- 选择非“.min”版本进行调试。
- 忽略仅由IntelliSense使用的“-vsdoc”文件（例如jquery-1.7.1-vsdoc.js）。
{version}上面显示的通配符匹配用于在Scripts文件夹中使用适当版本的jQuery自动创建jQuery包。在此示例中，使用通配符可提供以下好处：
- 允许您使用NuGet更新到更新的jQuery版本，而无需在视图页面中更改前面的捆绑代码或jQuery引用。
- 自动选择调试配置的完整版本和发布版本的“.min”版本。
使用CDN
以下代码用CDN jQuery包替换本地jQuery包。
C＃复制
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 = "https://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.
}
在上面的代码中，将在发布模式下从CDN请求jQuery，并且将在调试模式下本地获取jQuery的调试版本。使用CDN时，如果CDN请求失败，您应该有一个回退机制。布局文件末尾的以下标记片段显示在CDN失败时添加到请求jQuery的脚本。
CSHTML复制
创建一个包
该捆绑类Include方法采用一个字符串数组，其中每个串是对资源的虚拟路径。App \ _Start \ BundleConfig.cs文件中的RegisterBundles方法的以下代码显示了如何将多个文件添加到捆绑包中：
C＃复制
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"));
该捆绑类IncludeDirectory提供方法来添加所有目录中的匹配的搜索图案，其中的文件（和任选的所有子目录）。该捆绑类IncludeDirectoryAPI如下所示：
C＃复制
public Bundle IncludeDirectory(
string directoryVirtualPath, // The Virtual Path for the directory.
string searchPattern) // The search pattern.
public Bundle IncludeDirectory(
string directoryVirtualPath, // The Virtual Path for the directory.
string searchPattern, // The search pattern.
bool searchSubdirectories) // true to search subdirectories.
使用Render方法在视图中引用Bundles（Styles.Render对于CSS和Scripts.RenderJavaScript）。Views \ Shared \ _Layout.cshtml文件中的以下标记显示了默认的ASP.NET Internet项目视图如何引用CSS和JavaScript包。
扫一扫
8068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
