Share via

Blazor：不顯著的空白字元自編譯時間的元件內修剪

  • 發行項

從 ASP.NET Core 5.0 開始，Razor 編譯器會在編譯時間內省略 Razor 元件 (.razor 檔案) 中的不顯著空白字元。 如需討論，請參閱問題 dotnet/aspnetcore#23568。

導入的版本

5.0

舊的行為

在 3.x 版的 Blazor Server 和 Blazor WebAssembly 中，元件的原始程式碼中會保留空白字元。 只有空白字元的文字節點會在瀏覽器的文件物件模型 (DOM) 中轉譯，沒有視覺效果者亦然。

請考慮下列 Razor 元件程式碼：

<ul>
    @foreach (var item in Items)
    {
        <li>
            @item.Text
        </li>
    }
</ul>

上述範例會轉譯兩個空白字元節點：

  • 位於 @foreach 程式碼區塊外部。
  • 在 <li> 元素周圍。
  • 在 @item.Text 輸出周圍。

包含 100 個項目的清單會產生 402 個空白字元節點。 這個數字超過所有已轉譯節點的一半，但其實這所有的空白字元節點都不會對已轉譯的輸出內容造成任何視覺上的影響。

為元件轉譯靜態 HTML 時，系統不會保留標記內的空白字元。 例如，請檢視下列元件的來源：

<foo        bar="baz"     />

系統並未保留空白字元。 預先轉譯的輸出為：

<foo bar="baz" />

新的行為

除非使用 @preservewhitespace 指示詞搭配 true 值，否則系統會移除以下情況的空白字元節點：

  • 為元素內的前置或後置。
  • 為 RenderFragment 參數內的前置或後置。 例如傳遞至另一元件的子系內容。
  • 位於 C# 程式碼區塊之前或之後，例如 @if 和 @foreach。

變更原因

在 ASP.NET Core 5.0 中，Blazor 的目標是改善轉譯和差異的效能。 不顯著的空白字元樹狀節點在基準測試中耗用高達 40% 的轉譯時間。

在多數案例中，已轉譯元件的視覺配置不會受到影響。 不過，使用如 white-space: pre 之類的 CSS 規則時，移除空白字元可能會影響轉譯的輸出。 若要停用此效能最佳化功能並保留空白字元，請採取下列其中一個動作：

  • 在 .razor 檔案上方新增 @preservewhitespace true 指示詞，可將喜好設定套用至特定元件。
  • 在 _Imports.razor 檔案內新增 @preservewhitespace true 指示詞，可將喜好設定套用至整個子目錄或整個專案。

在多數案例中，您不需要採取任何動作，因為應用程式通常會繼續正常運作 (但速度會更快)。 如果移除空白字元導致特定元件發生任何問題，請在該元件中使用 @preservewhitespace true 來停用此最佳化。

受影響的 API

無