捆绑和缩小(BundleConfig.RegisterBundles) 第四章 : 影响,调试和控制



捆绑的影响和缩小

下表显示了几个重要的区别,分别列出所有资产和使用中的示例程序的捆绑和缩小 (B/M) 之间。

 使用 B/M没有 B/M变化
文件请求934256%
发送的 KB3.2611.92266%
收到 KB388.5153036%
加载时间510 MS780 MS53%

发送的字节数有显著减少与捆绑浏览器相当详细与它们适用的请求的 HTTP 标头。接收字节数减少不是一样大的因为最大的文件 (Scripts\jquery-ui-1.8.11.min.jsScripts\jquery-1.7.1.min.js) 都已经模糊不清。注意: 在示例程序上的计时使用提琴手工具来模拟较慢的网络。(从提琴手规则菜单中,选择性能然后模拟调制解调器速度.)

调试捆绑和缩减 JavaScript

很容易调试您在开发环境中的 JavaScript (在编译元素 Web.config文件设置为debug="true" ) 因为 JavaScript 文件不是捆绑在一起或模糊不清。你也可以调试发布版本哪里您 JavaScript 文件捆绑在一起,并且模糊不清。您使用 IE F12 开发人员工具,调试使用以下方法最包中包含的 JavaScript 函数:

  1. 选择脚本选项卡,然后选择启动调试按钮。
  2. 选择包含您想要使用的资产按钮进行调试的 JavaScript 函数的捆绑。
  3. 通过选择配置按钮设置最的 JavaScript 的格式 然后选择格式 JavaScript.
  4. 搜索以股代息t 输入框中,选择您想要调试的函数的名称。在下面的图像中,搜索以股代息t 输入框中输入了AddAltToImg

F12 开发人员工具调试的详细信息,请参阅 MSDN 文章:使用 F12 开发人员工具调试 JavaScript 错误.

控制捆绑和缩小

启用或禁用通过在编译元素中设置的调试属性的值绑定和缩小 Web.config文件中。在下面的 XML,debug 设置为 true,那么将捆绑和缩小处于禁用状态。

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

要启用捆绑和缩小,设置为"false"的debug 值。您可以重写Web.config设置与BundleTable 类的 EnableOptimizations 属性。下面的代码可以捆绑和缩小和重写的Web.config文件中的任何设置。

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文件设置为false,将不捆绑或文件模糊不清。 此外,将不使用的文件的.min 版本,将选择的完整的调试版本。 EnableOptimizations 重写汇编元素中的调试属性 Web.config文件中


原文:

Impact of Bundling and Minification

The following table shows several important differences between listing all the assets individually and using bundling and minification (B/M) in the sample program.

 Using B/MWithout B/MChange
File Requests934256%
KB Sent3.2611.92266%
KB Received388.5153036%
Load Time510 MS780 MS53%

The bytes sent had a significant reduction with bundling as browsers are fairly verbose with the HTTP headers they apply on requests. The received bytes reduction is not as large because the largest files (Scripts\jquery-ui-1.8.11.min.js and Scripts\jquery-1.7.1.min.js) are already minified. Note: The timings on the sample program used the Fiddler tool to simulate a slow network. (From the Fiddler Rules menu, select Performance then Simulate Modem Speeds.)

Debugging Bundled and Minified JavaScript

It's easy to debug your JavaScript in a development environment (where the compilation Element in the Web.config file is set to debug="true" ) because the JavaScript files are not bundled or minified. You can also debug a release build where your JavaScript files are bundled and minified. Using the IE F12 developer tools, you debug a JavaScript function included in a minified bundle using the following approach:

  1. Select the Script tab and then select the Start debugging button.
  2. Select the bundle containing the JavaScript function you want to debug using the assets button.
  3. Format the minified JavaScript by selecting the Configuration button , and then selecting Format JavaScript.
  4. In the Search Script input box, select the name of the function you want to debug. In the following image, AddAltToImg was entered in the Search Script input box.

For more information on debugging with the F12 developer tools, see the MSDN article Using the F12 Developer Tools to Debug JavaScript Errors.

Controlling Bundling and Minification

Bundling and minification is enabled or disabled by setting the value of the debug attribute in the compilation Element in the Web.config file. In the following XML, debug is set to true so bundling and minification is disabled.

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

To enable bundling and minification, set the debug value to "false". You can override the Web.config setting with the EnableOptimizations property on the BundleTable class. The following code enables bundling and minification and overrides any setting in the Web.config file.

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

    // Code removed for clarity.
    BundleTable.EnableOptimizations = true;
}
Note: Unless EnableOptimizations is true or the debug attribute in the compilation Element in the Web.config file is set to false, files will not be bundled or minified. Additionally, the .min version of files will not be used, the full debug versions will be selected. EnableOptimizations overrides the debug attribute in the compilation Element in the Web.config file
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值