Blazor: Obetydligt blanksteg trimmat från komponenter vid kompileringstidpunkten

Från och med ASP.NET Core 5.0 utelämnar Razor-kompilatorn obetydligt blanksteg i Razor-komponenter (.razor-filer) vid kompileringstid. För diskussion, se fråga dotnet/aspnetcore#23568.

Version lanserad

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 @foreach kodblocket.
• Runt elementet <li>.
• Omkring @item.Text utgång.

En lista med 100 objekt resulterar i 402 blankstegsnoder. Det är över hälften av alla noder som renderas, även om inga av blankstegs-noderna visuellt påverkar det renderade resultatet.

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:

• Kan leda eller följa inom ett element.
• Föregå eller efterfölja inom en RenderFragment-parameter. Till exempel, barninnehåll skickas till en annan komponent.
• Föregå eller följ ett C#-kodblock som @if och @foreach.

Orsak till ändring

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