Blazor: Derleme zamanında bileşenlerden kırpılan önemsiz boşluk

  • Makale

ASP.NET Core 5.0'dan başlayarak Razor derleyicisi, derleme zamanında Razor bileşenlerinde (.razor dosyaları) önemsiz boşluklar atlar. Tartışma için bkz. sorun dotnet/aspnetcore#23568.

Sürüm kullanıma sunulmuştur

5.0

Eski davranış

Blazor Server ve Blazor WebAssembly'nin 3.x sürümlerinde, bir bileşenin kaynak kodunda boşluk kullanılır. Yalnızca boşluk metin düğümleri, görsel efekt olmasa bile tarayıcının Belge Nesne Modeli'nde (DOM) işlenir.

Aşağıdaki Razor bileşen kodunu göz önünde bulundurun:

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

Yukarıdaki örnekte iki boşluk düğümü işlenir:

  • @foreach kod bloğunun dışında.
  • <li> öğesinin çevresinde.
  • @item.Text çıkışının çevresinde.

100 öğe içeren bir liste, 402 boşluk düğümüyle sonuçlanır. Bu, işlenen tüm düğümlerin yarısından fazladır, ancak boşluk düğümlerinin hiçbiri işlenen çıkışı görsel olarak etkilemez.

Bileşenler için statik HTML işlenirken, etiketin içindeki boşluk korunmadı. Örneğin, aşağıdaki bileşenin kaynağını görüntüleyin:

<foo        bar="baz"     />

Boşluk korunmaz. Önceden işlenmiş çıkış şöyledir:

<foo bar="baz" />

Yeni davranış

yönergesi @preservewhitespace değeriyle truekullanılmadığı sürece, aşağıdakiler durumunda boşluk düğümleri kaldırılır:

  • Bir öğenin başında veya sonunda yer alır.
  • Bir parametrenin başında RenderFragment veya sonunda yer alır. Örneğin, alt içerik başka bir bileşene geçiriliyor.
  • ve @foreachgibi @if bir C# kod bloğunun önüne geçin veya bunu izleyin.

Değişiklik nedeni

ASP.NET Core 5.0'da Blazor'ın hedeflerinden biri işleme ve fark oluşturma performansını geliştirmektir. Karşılaştırmalarda işleme süresinin yüzde 40'ını tüketen önemsiz boşluk ağacı düğümleri.

Çoğu durumda, işlenen bileşenin görsel düzeni etkilenmez. Ancak, boşluk kaldırma işlemi gibi white-space: prebir CSS kuralı kullanılırken işlenen çıkışı etkileyebilir. Bu performans iyileştirmesini devre dışı bırakmak ve boşluğu korumak için aşağıdaki eylemlerden birini gerçekleştirin:

  • Tercihi @preservewhitespace true belirli bir bileşene uygulamak için .razor dosyasının en üstüne yönergesini ekleyin.
  • Tercihi @preservewhitespace true bir alt dizinin tamamına veya projenin tamamına uygulamak için yönergesini bir _Imports.razor dosyasına ekleyin.

Çoğu durumda, uygulamalar normalde normal (ancak daha hızlı) davranmaya devam edeceği için herhangi bir eylem gerekmez. Boşluk kaldırma belirli bir bileşende sorunlara neden oluyorsa, bu iyileştirmeyi devre dışı bırakmak için bu bileşende kullanın @preservewhitespace true .

Etkilenen API’ler

Hiçbiri