65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET Web Optimization Framework

Abhishek Kumar Goswami
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.97/5 (22投票s)

2014年3月25日

CPOL

7分钟阅读

viewsIcon

103388

downloadIcon

3646

ASP.NET Web 优化框架

引言

ASP.NET Web 优化框架是微软为了优化 ASP.NET Web 应用程序性能而引入的。为了优化 Web 应用程序，该框架使用了以下两种技术：

  1. 通过减少向服务器发出的请求数量
  2. 通过减小所请求资源的大小

现在我想你脑海中可能会浮现出这样的问题——我们为什么要使用这个框架，以及这个框架的必要性是什么。所以，首先让我们试着理解这一点。使用这个框架有多种原因，下面列举了一些：

  1. 如今，在单个网页中，我们为了实现日历、模态弹窗等不同功能会使用许多 JavaScript 库。或者可以说，由于对更丰富视觉内容的需求，下载 CSS、图片等不同资源的成本显著增加。因此，更少、更小的请求可以节省带宽、减少延迟并延长电池寿命。我特别提到电池寿命，是针对移动应用程序而言的。
  2. 目前大多数浏览器将每个主机名的并发连接数限制为六个（想了解更多信息，请点击这里）。这意味着，如果有超过 6 个请求正在处理，那么额外的请求将被浏览器排队等候。

目前，该框架提供以下两种服务：

  1. 捆绑（Bundling）：此功能在 ASP.NET 4.5 中引入，可以减少向服务器发出的请求数量。它将脚本、CSS 文件等多个资源合并为单个资源，从而减少浏览器的请求次数，进而提高页面加载性能。

  2. 压缩（Minification）：此功能通过缩短变量名、移除空白、制表符、注释等方式优化代码，以减小所请求资源的大小。让我们通过一个例子来看看它是如何工作的。
function ( firstNumber, secondNumber)
{   ///<signature>
    //<summary> Adds two integer
    // </summary>
    //<param name="firstNumber" type="Integer">First Number.</param>
    //<param name="secondNumber" type="Integer">Second Number.</param>
    ///</signature>
   var thirdNumber=firstNumber+SecondNumber;
}

我们来看看这段 JavaScript 代码在压缩后会变成什么样：

function(n,p){var i=n+p;}

现在你已经更好地理解了这个框架是如何通过优化来提升 Web 性能的。

现在，让我们看看如何实现它：

  1. 在 Web Form 中
  2. 在 Web Page 站点中
  3. 在 ASP.NET MVC 中

我知道在本文中不可能讨论所有这三种情况，但我可以介绍一些在这三种实现中都通用的内容。

启用或禁用捆绑与压缩

有两种方法可以启用或禁用捆绑与压缩：

  1. 使用 Web.config：在 web.config 文件中，你可以如下设置 compilation 元素的 debug 属性：
    <system.web>
    <compilation debug="true" />
</system.web>
  2. 通过设置 EnableOptimizations：将其设置为 true 以启用捆绑和压缩，如下所示：
    public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

     BundleTable.EnableOptimizations = true;
}

如果你同时设置了这两个值，那么 EnableOptimizations 会覆盖 debug 属性的设置。

关于捆绑，该框架提供了 Bundle 类。让我们来看看这个类及其方法，因为它将在所有三种实现中使用到。

Bundle 类

这个类有一个 Include 方法，它接受一个字符串数组，其中每个字符串都是指向资源的虚拟路径。我们可以像下面这样添加多个文件：

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
          "~/Content/themes/base/jquery.ui.autocomplete.css",
          "~/Content/themes/base/jquery.ui.accordion.css",
          "~/Content/themes/base/jquery.ui.selectable.css",
          "~/Content/themes/base/jquery.ui.code.css",
          "~/Content/themes/base/jquery.ui.button.css",));

但如果你想包含特定目录下的所有文件，该类还提供了另一个名为 IncludeDirectory 的方法。你可以这样使用它：

 public Bundle IncludeDirectory(
     string dvirtPath,  // The Virtual Path for the directory.
     string pattern,         // The search pattern.
     bool subDirectory)    // true to search subdirectories.

我们可以通过使用“*”通配符在搜索文件或子目录时使用模式匹配，如下所示：

Include(“~/Scripts/Common/*.js”) ===> 这将包含所有 js 文件。

IncludeDirectory(“~/Scripts/Common”,”T*.js”) ===> 这将包含所有以 T 开头的 js 文件。

那么，下一个问题是，我们已经创建了捆绑包，现在如何在视图（view）或 aspx 文件中引用它们呢？

我们将使用 Styles.Render 来引用 CSS，使用 Scripts.Render 来引用脚本文件，如下所示：

@Styles.Render("~/Content/theme/base/css","~/Content/css");

@Scripts.Render("~/bundles/jquery");

到这里，我已经介绍了关于这个框架的所有基本细节。

现在，让我们一步步看看如何在 Web Form 应用程序中使用这个框架。我将从一个 Web Form 应用程序的空模板开始，从零讲起。

  1. 创建一个空的 Web 站点，并请确保 .NET Framework 版本为 4.5。

  2. 现在，你需要在你的网站中安装这个框架。请按照截图所示打开 NuGet 包管理器控制台。

  3. 输入命令“Install - Package Microsoft.AspNet.Web.Optimization”并按回车。这将在你的网站中安装 ASP.NET 优化框架。

  4. 你可以在 bin 文件夹中检查所需的 DLL 是否已经添加。

  5. 现在你需要创建两个文件夹，Scripts 和 Styles，用于存放脚本和 CSS 文件，并创建一个名为 Test.aspx 的 Web Form。这里我没有使用 MasterPage，因为我在 Test.aspx 中使用的东西同样可以用在 masterpage 中。现在你的解决方案资源管理器应该如下图所示：

    为了演示，我在 scripts 文件夹中添加了 4 个文件，在 Styles 文件夹中添加了 2 个文件。你可以根据自己的需求添加。

  6. 按照以下方式在你的网站中添加 Global.asax 文件：
    1. 右键点击解决方案资源管理器
    2. 点击“添加”，然后从子菜单中选择“添加新项”
    3. 选择 Global.asax 文件

    你可以看到 Global.asax 文件中有很多事件。我这里重点关注 Application_Start 事件。你需要在这个事件中编写以下代码。

    System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.ScriptBundle("~/bundle/js")
              .Include("~/Scripts/*.js"));
        System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.StyleBundle("~/bundle/css")
             .Include("~/Styles/*.css"));

    在这里，我直接创建了两个捆绑包并将其添加到捆绑表中。你可以根据自己的分类来定义和使用。你还可以将单个捆绑包进一步划分为其他子捆绑包。你可能还注意到一件事，我使用了 *.js，因为我将所有 js 文件添加到一个捆绑包中，CSS 文件也是同样的处理。所以，我在这里做的就是将所有 JavaScript 文件捆绑成一个包，这意味着它们将作为一个实体加载，而不是多个不同的文件；对于 CSS 也一样，我为所有 CSS 文件创建了一个单独的捆绑包。

    我想现在你可以更好地从实践中理解这个框架是如何优化资源调用和加载的。

    在一些文章中，你可能会发现他们创建了一个名为 BundleConfig 的单独文件，在一个静态文件中创建捆绑包，然后在 global.asax 文件中通过调用那个静态方法来添加捆绑包。这提供了更高一层的抽象。由于这是一篇非常基础的文章，我就直接在 global.asax 文件中创建并添加了捆绑包。

  7. 现在我们的捆绑包已经准备好了，最后一项任务就是将这个捆绑包引入到我们的 aspx 文件中。我们可以通过使用 Scripts.Render 和 Styles.Render 方法来完成，如下所示：
      <%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
     <%: System.Web.Optimization.Styles.Render("~/bundle/css") %>
  8. 现在我们已经完成了所有的实现。只剩下最后一项任务，那就是启用捆绑和压缩。正如我在前面提到的，有两种方式可以启用它。你可以使用其中任意一种。这里我通过设置 web.config 文件的 compilation 元素的 debug 属性来启用，如下所示：
    <system.web>
    <compilation debug="false" />
</system.web>
  9. 好了，现在是时候高兴一下并测试我们的成果了。运行应用程序，你将看到以下屏幕：

    现在按 F12 来见证 Web 优化框架真正的魔力。

    点击“脚本”选项卡，并选择 Test.aspx 下拉列表。你可以看到像 js?v…….. 这样的随机字符串，那就是捆绑包的名称。

在这里，如果你观察到，加载的不是独立的 js 文件，而是一个单独的捆绑包。你可以在“网络”选项卡中看到对不同资源的真实调用情况。在这里你可以看到，只有一个对 JavaScript 文件的调用和一个对 CSS 文件的调用。

如果你没有看过 Internet Explorer 的这个开发者工具，并且没有观察过未使用 ASP.NET 优化框架的普通应用程序的情况，你可能无法分辨出真正的区别。所以，为了这些人，我可以向你展示一下明确的差异。

现在回到你的 web.config 文件，将 debug = true 设置好，然后运行应用程序并再次按 F12。这时，当你点击“脚本”选项卡时，你将看到以下屏幕：

如果你观察这里，现在你可以看到两个独立的 JavaScript 文件被分别加载了。所以，假设你在你的 aspx 页面中添加了 20 个 js 文件，那么就会为这 20 个 js 文件产生 20 次独立的调用。现在再检查一下“网络”选项卡，在这里你可以看到有 4 次独立的调用，分别对应 4 个独立的文件。

我想现在你能够更好地理解 ASP.NET Web 优化框架的用处了。在这篇文章中，我尽力涵盖了如何在你的网站中使用 ASP.NET Web 优化框架的所有基础知识。请尝试使用它，你肯定会获得很好的体验。感谢阅读。

© . All rights reserved.