ASP.NET Core 中的捆绑和缩小静态资产

项目
11/06/2024

本文介绍应用捆绑和缩小的好处，包括如何在 ASP.NET Core Web 应用中使用这些功能。

什么是捆绑和缩小

捆绑和缩小是可以在 Web 应用中应用的两个不同的性能优化。捆绑和缩小一起使用，可减少服务器的请求数并减小请求的静态资产的大小，从而提高性能。

捆绑和缩小主要缩短第一个页面请求加载时间。请求网页后，浏览器会缓存静态资产（JavaScript、CSS 和图像）。因此，在请求相同资产的同一站点上请求相同的一个或多个页面时，捆绑和缩小不会提高性能。如果未在资产上正确设置过期标头，且未使用捆绑和缩小，则浏览器的新鲜度启发会在几天后将资产标记为过期。此外，浏览器还需要对每个资产进行验证请求。在这种情况下，即使在第一个页面请求后，捆绑和缩小仍能提高性能。

捆绑

捆绑将多个文件合并到单个文件中。捆绑可减少呈现 Web 资产（如网页）所需的服务器请求数。可以专门为 CSS、JavaScript 等创建任意数量的单个捆绑。文件越少，从浏览器发送到服务器或从提供应用程序的服务发送的 HTTP 请求就越少。这会提高第一页加载性能。

缩小

缩小在不更改功能的情况下从代码中删除不必要的字符。因此，请求的资产（如 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/, ''));
}

缩小将函数缩减为以下内容：

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

除了删除注释和不必要的空格外，还进行了以下参数和变量名称重命名：

原始	重命名
`imageTagAndImageID`	`t`
`imageContext`	`a`
`imageElement`	`r`

捆绑和缩小的影响

下表概述了单独加载资产与对典型 Web 应用使用捆绑和缩小之间的差异。

操作	不使用捆绑/缩小	使用捆绑/缩小	约简
文件请求	18	7	61%
传送的字节数 (KB)	265	156	41%
加载时间（毫秒）	2360	885	63%

加载时间缩短，但此示例在本地运行。将捆绑和缩小与通过网络传输的资产结合使用时，可实现更高的性能提升。

用于生成上表中数字的测试应用演示了可能不适用于给定应用的典型改进。建议测试应用，以确定捆绑和缩小是否可以缩短加载时间。

选择捆绑和缩小策略

ASP.NET Core 与 WebOptimizer（一种开源捆绑和缩小解决方案）兼容。有关设置说明和示例项目，请参阅 WebOptimizer。 ASP.NET Core 不提供本机捆绑和缩小解决方案。

第三方工具（如 Gulp 和 Webpack）提供了针对捆绑和缩小的自动化工作流，以及 Lint 分析和映像优化。通过使用捆绑和缩小，在应用部署之前创建缩小文件。在部署之前进行捆绑和缩小具有减少服务器负载的优点。但是，必须认识到，捆绑和缩小会增加生成的复杂性，并且仅适用于静态文件。

基于环境的捆绑和缩小

最佳做法是，应在生产环境中使用应用的捆绑文件和缩小文件。在开发过程中，原始文件可简化应用的调试。

使用视图中的环境标记帮助程序指定要包含在页面中的文件。环境标记帮助程序仅在特定环境中运行时呈现其内容。

以下 environment 标记将在 Development 环境中运行时呈现未处理的 CSS 文件：

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

以下 environment 标记将在非 Development 环境中运行时呈现捆绑的和缩小的 CSS 文件。例如，在 Production 或 Staging 中运行将触发这些样式表的呈现：

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

通过