Blazor: Obetydligt blanksteg trimmat från komponenter vid kompileringstidpunkten

Artikel
10/04/2023

Från och med ASP.NET Core 5.0 utelämnar Razor-kompilatorn obetydligt blanksteg i Razor-komponenter (.razor-filer ) vid kompileringstiden. Mer information finns i problem med dotnet/aspnetcore#23568.

Version introducerad

5,0

Gammalt beteende

I 3.x-versioner av Blazor Server och Blazor WebAssembly respekteras tomt utrymme i en komponents källkod. Textnoder med endast blanksteg återges i webbläsarens dokumentobjektmodell (DOM) även om det inte finns någon visuell effekt.

Överväg följande Razor-komponentkod:

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

I föregående exempel återges två blankstegsnoder:

Utanför kodblocket @foreach .
Runt elementet <li> .
Runt utdata @item.Text .

En lista med 100 objekt resulterar i 402 blankstegsnoder. Det är över hälften av alla noder som återges, även om ingen av noderna för blanksteg visuellt påverkar de renderade utdata.

När statisk HTML återges för komponenter bevaras inte blanksteg i en tagg. Du kan till exempel visa källan för följande komponent:

<foo        bar="baz"     />

Tomt utrymme bevaras inte. De förre renderade utdata är:

<foo bar="baz" />

Nytt beteende

@preservewhitespace Om inte direktivet används med värdet truetas blankstegsnoder bort om de:

Leder eller släpar i ett element.
Leder eller följer i en RenderFragment parameter. Till exempel skickas underordnat innehåll till en annan komponent.
Föregå eller följ ett C#-kodblock som @if och @foreach.

Orsak till ändringen

Ett mål för Blazor i ASP.NET Core 5.0 är att förbättra prestanda för rendering och diffing. Obetydliga trädnoder för blanksteg förbrukade upp till 40 procent av återgivningstiden i benchmarks.

Rekommenderad åtgärd

I de flesta fall påverkas inte den renderade komponentens visuella layout. Borttagningen av tomt utrymme kan dock påverka de renderade utdata när du använder en CSS-regel som white-space: pre. Om du vill inaktivera den här prestandaoptimeringen och bevara tomt utrymme utför du någon av följande åtgärder:

@preservewhitespace true Lägg till direktivet överst i razor-filen för att tillämpa inställningarna på en specifik komponent.
@preservewhitespace true Lägg till direktivet i en _Imports.razor-fil för att tillämpa inställningarna på en hel underkatalog eller hela projektet.

I de flesta fall krävs ingen åtgärd, eftersom program vanligtvis fortsätter att bete sig normalt (men snabbare). Om blankstegsborttagningen orsakar problem för en viss komponent kan du inaktivera den här optimeringen med hjälp @preservewhitespace true av komponenten.

Berörda API:er

Ingen

Dela via