共用方式為


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

作者:Scott AddieDavid Pine

本文說明運用統合和縮製的優點,包括如何將這些功能與 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 不提供原生統合和縮製解決方案。

GulpWebpack 等協力廠商工具提供統合和縮製的工作流程自動化,以及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 檔案。 例如,在 ProductionStaging 中執行會觸發這些樣式表的轉譯:

<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>

其他資源