Blazor: Spasi kosong yang tidak signifikan dipangkas dari komponen pada waktu kompilasi

Artikel
10/04/2023

Dimulai dengan ASP.NET Core 5.0, kompilator Razor menghilangkan spasi putih yang tidak signifikan dalam komponen Razor (file.razor ) pada waktu kompilasi. Untuk diskusi, lihat masalah dotnet/aspnetcore#23568.

Versi yang diperkenalkan

5.0

Perilaku yang lama

Dalam versi 3.x dari Blazor Server dan Blazor WebAssembly, spasi putih dihormati dalam kode sumber komponen. Simpul teks khusus spasi kosong di Model Objek Dokumen (DOM) browser bahkan ketika tidak ada efek visual.

Pertimbangkan kode komponen Razor berikut:

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

Contoh sebelumnya merender dua simpul spasi putih:

Di luar blok kode @foreach.
Di sekitar elemen <li>.
Di sekitar output @item.Text.

Daftar yang berisi 100 item menghasilkan 402 simpul spasi kosong. Itu lebih dari setengah dari semua simpul yang dirender, meskipun tidak ada simpul spasi putih yang secara visual memengaruhi output yang dirender.

Saat merender HTML statis untuk komponen, spasi kosong di dalam tag tidak dipertahankan. Misalnya, lihat sumber komponen berikut:

<foo        bar="baz"     />

Spasi kosong tidak dipertahankan. Output yang telah dirender sebelumnya adalah:

<foo bar="baz" />

Perilaku yang baru

Kecuali direktif @preservewhitespace digunakan dengan nilai true, simpul spasi kosong dihapus jika:

Berada di depan atau di belakang dalam elemen.
Berada di depan atau di belakang dalam RenderFragment parameter. Misalnya, konten anak diteruskan ke komponen lain.
Mendahului atau mengikuti blok kode C# seperti @if dan @foreach.

Alasan untuk berubah

Tujuan untuk Blazor di ASP.NET Core 5.0 adalah untuk meningkatkan performa rendering dan diffing. Simpul pohon spasi putih yang tidak signifikan mengonsumsi hingga 40 persen dari waktu penyajian dalam tolok ukur.

Tindakan yang direkomendasikan

Dalam kebanyakan kasus, tata letak visual komponen yang dirender tidak terpengaruh. Namun, penghapusan spasi putih dapat memengaruhi output yang dirender saat menggunakan aturan CSS seperti white-space: pre. Untuk menonaktifkan pengoptimalan performa ini dan mempertahankan spasi kosong, lakukan salah satu tindakan berikut:

Tambahkan direktif @preservewhitespace true di bagian atas file .razor untuk menerapkan preferensi ke komponen tertentu.
Tambahkan direktif @preservewhitespace true di dalam file _Imports.razor untuk menerapkan preferensi ke seluruh subdirektori atau seluruh proyek.

Dalam kebanyakan kasus, tidak ada tindakan yang diperlukan, karena aplikasi biasanya akan terus berperilaku normal (tetapi lebih cepat). Jika pengupasan spasi putih menyebabkan masalah untuk komponen tertentu, gunakan @preservewhitespace true komponen tersebut untuk menonaktifkan pengoptimalan ini.

API yang Terpengaruh

Tidak ada

Bagikan melalui