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

如何在 MVC 4 中使用 Web 优化

Abhishek Kumar Goswami
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (8投票s)

2014年3月27日

CPOL

4分钟阅读

viewsIcon

42415

downloadIcon

422

如何在 ASP.NET MVC 4 中使用 ASP.NET Web 优化框架

引言

在我的前一篇文章中，我描述了什么是 ASP.NET Web 优化框架，以及该框架提供了哪些类，以便在 Web 窗体、Web 页面和 ASP.NET MVC 中使用此框架。所以在本文中，我将解释如何在 ASP.NET MVC 4 中使用此框架。

由于我在之前的文章中已经解释了 ASP.NET Web 优化框架，所以我将直接切换到实现。但我建议在阅读本文之前，请先阅读我的上一篇文章，因为它是本文的先决条件。

所以现在，让我们看看如何逐步在 Web 窗体应用程序中使用此框架。在这里，我将从头开始描述，采用 ASP.NET MVC 4 应用程序的空模板。

  1. 创建一个 ASP.NET MVC 4 Web 应用程序。

  2. 选择项目模板为“空”。

  3. 现在您需要在您的网站中安装此框架，所以打开 NuGet 包管理器控制台，如图所示

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

  5. 您可以在*bin*文件夹中检查是否已添加所需的 DLL。
  6. 现在您需要创建两个文件夹，Scripts 和 Styles，用于存放脚本和 CSS 文件，以及一个名为HomeController的控制器和一个用于Index的视图。现在您的解决方案资源管理器应该看起来像下面这样

    在这里，我分别在Scripts文件夹和Styles文件夹中添加了 2 个文件用于演示。您可以根据您的需要添加。

  7. 打开 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"));

    在这里，我直接创建并将两个 bundle 添加到 bundle 表中。您可以根据您的分类进行定义和使用。您可以将单个 bundle 进一步分类为其他子 bundle。您可能注意到的另一件事是我正在使用 * .js，因为我将所有 js 文件添加到一个 bundle 中，CSS 也是如此。 所以我在这里所做的正是将所有 JavaScript 文件捆绑到一个 bundle 中，这意味着它们将作为单个实体加载，而不是作为多个不同的文件，对于 CSS 也是如此，我为所有 CSS 文件创建了一个单个 bundle。

    我想现在您可以更好地了解此框架如何实际优化资源的调用和加载。

    在某些文章中，您可能会发现他们创建了一个名为 BundleConfig 的单独文件，用于在 static 方法中创建 bundle，并且他们通过调用该 static 方法将 bundle 添加到 global.asax 文件中。这提供了一个更高级别的抽象。由于这是一篇非常基础的文章，我直接在 global.asax 文件中创建并添加了 bundle。

  8. 现在我们已经准备好 bundle，所以最后一项任务是将此 bundle 包含到我们的视图文件中。 我们可以使用 Scripts.Render 和 Styles.Render 方法来做到这一点，如下所示
     @System.Web.Optimization.Scripts.Render("~/bundle/js")
 @System.Web.Optimization.Styles.Render("~/bundle/css")
  9. 现在我们已经准备好所有实现，只剩下一个任务，那就是启用捆绑和最小化。正如我在上一篇文章中所描述的那样，有两种方法可以启用它。所以你可以使用其中任何一种方法。在这里，我通过设置 web.config 文件 compilation 元素的 debug 属性来启用，如下所示
    <system.web>
    <compilation debug="false" />
</system.web>
  10. 所以现在，是时候高兴并测试我们的工作了。所以运行应用程序，你会看到以下屏幕

现在按 F12 看看 web 优化框架的真正魔力。

单击“脚本”选项卡并选择 Test.aspx 下拉列表。你可以看到 js?v…….. 类似于一些随机的 string，这就是 bundle 名称。

在这里，如果你观察到，没有单独的 js 文件，只有一个 bundle 正在加载。你可以在“网络”选项卡中看到对不同资源的真实调用。在这里你可以看到，只有一个 JavaScript 文件的调用，一个 CSS 文件的调用。

如果您没有见过 Internet Explorer 的这个开发者工具，并且您没有在这里观察到没有 ASP.NET 优化框架的普通应用程序，那么您可能无法区分真正的区别，所以对于这些人，我可以向您展示正确的区别。

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

如果你能观察到，现在你可以看到两个单独的 JavaScript 文件正在单独加载，所以假设你在你的视图中添加了 20 个 js 文件，那么将对 20 个 js 文件进行 20 个单独的调用。现在检查一下网络选项卡，所以在这里你可以看到有 4 个单独的文件有 4 个单独的调用。

现在我想您可以更好地理解 ASP.NET Web 优化框架的用途了。

在本文中，我试图涵盖如何在您的网站中使用 ASP.NET Web 优化框架的所有基础知识。请尝试使用它，如果您还没有这样做，您一定会获得良好的体验。感谢阅读。

© . All rights reserved.