Blazor: spazi vuoti non significativi eliminati dai componenti in fase di compilazione

  • Articolo

A partire da ASP.NET Core 5.0, il compilatore Razor omette gli spazi vuoti non significativi nei componenti Razor (file .razor) in fase di compilazione. Per informazioni, vedere il problema dotnet/aspnetcore#23568.

Versione introdotta

5.0

Comportamento precedente

Nelle versioni 3.x di Blazor Server e Blazor WebAssembly, gli spazi vuoti vengono rispettati nel codice sorgente di un componente. Il rendering dei nodi di testo con soli spazi vuoti viene eseguito nell'oggetto DOM del browser anche quando non sono presenti effetti visivi.

Si consideri il codice del componente Razor seguente:

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

L'esempio precedente esegue il rendering di due nodi con spazi vuoti:

  • All'esterno del blocco di codice @foreach.
  • Attorno all'elemento <li>.
  • Attorno all'output @item.Text.

Un elenco contenente 100 elementi determina 402 nodi con spazi vuoti. Si tratta di più della metà di tutti i nodi di cui è stato eseguito il rendering, anche se nessuno dei nodi con spazi vuoti influisce visivamente sull'output di cui è stato eseguito il rendering.

Quando si esegue il rendering di HTML statici per i componenti, gli spazi vuoti all'interno di un tag non vengono mantenuti. Ad esempio, visualizzare l'origine del componente seguente:

<foo        bar="baz"     />

Gli spazi vuoti non sono mantenuti. L'output di cui è stato eseguito il rendering è:

<foo bar="baz" />

Nuovo comportamento

A meno che la direttiva @preservewhitespace non venga usata con il valore true, i nodi con spazi vuoti vengono rimossi se:

  • Si trovano all'inizio o alla fine di un elemento.
  • Si trovano all'inizio o alla fine di un elemento all'interno di un parametro RenderFragment. Ad esempio, il contenuto figlio passato a un altro componente.
  • Precede o segue un blocco di codice C#, ad esempio @if o @foreach.

Motivo della modifica

L'obiettivo di Blazor in ASP.NET Core 5.0 è migliorare le prestazioni di rendering e differenze. I nodi dell'albero con spazi vuoti non significativi utilizzavano fino al 40% del tempo di rendering nei benchmark.

Nella maggior parte dei casi, il layout visivo del componente sottoposto a rendering non è interessato dalla modifica. Tuttavia, la rimozione degli spazi vuoti potrebbe influire sull'output sottoposto a rendering quando si usa una regola CSS, ad esempio white-space: pre. Per disabilitare questa ottimizzazione delle prestazioni e mantenere lo spazio vuoto, eseguire una delle azioni seguenti:

  • Aggiungere la direttiva @preservewhitespace true all'inizio del file .razor per applicare la preferenza a un componente specifico.
  • Aggiungere la direttiva @preservewhitespace true all'interno di un file _Imports.razor per applicare la preferenza a un'intera sottodirectory o all'intero progetto.

Nella maggior parte dei casi, non è necessaria alcuna azione perché le app continuano in genere a comportarsi normalmente (ma più velocemente). Se la rimozione degli spazi vuoti causa un problema di rendering per un determinato componente, usare @preservewhitespace true in tale componente per disabilitare questa ottimizzazione.

API interessate

Nessuno