在 ASP.NET Core 中統合和縮製靜態資產

發行項
11/30/2023

本文說明運用統合和縮製的優點，包括如何將這些功能與 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 應用程式的統合和縮製之間的差異。

動作	不使用 B/M	使用 B/M	減少
檔案要求	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>

在 Development 以外的環境中執行時，下列 environment 標籤會轉譯統合和縮製的 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>

共用方式為