Share via

Blazor: espaço em branco insignificante cortado de componentes no tempo de compilação

  • Artigo

A partir do ASP.NET Core 5.0, o compilador Razor omite o espaço em branco insignificante nos componentes Razor (arquivos .razor) no tempo de compilação. Para discussão, confira o problema dotnet/aspnetcore#23568.

Versão introduzida

5,0

Comportamento antigo

Nas versões 3.x do Blazor Server e do Blazor WebAssembly, o espaço em branco é respeitado no código-fonte de um componente. Os nós de texto somente de espaço em branco são renderizados no DOM (Modelo de Objeto do Documento) do navegador, mesmo quando não há efeito visual.

Considere o seguinte código de componente do Razor:

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

O exemplo anterior renderiza dois nós de espaço em branco:

  • Fora do bloco de código @foreach.
  • Ao redor do elemento <li>.
  • Ao redor da saída @item.Text.

Uma lista que contém 100 itens resulta em 402 nós de espaço em branco. Isso representa mais da metade de todos os nós renderizados, embora nenhum dos nós de espaço em branco tenha efeito visual na saída renderizada.

Ao renderizar HTML estático para os componentes, o espaço em branco dentro de uma marca não é preservado. Por exemplo, exiba a origem do seguinte componente:

<foo        bar="baz"     />

O espaço em branco não está preservado. A saída pré-renderizada é:

<foo bar="baz" />

Novo comportamento

A menos que a diretiva @preservewhitespace seja usada com o valor true, os nós de espaço em branco serão removidos se:

  • Estiver à esquerda ou à direita dentro de um elemento.
  • Estiver à esquerda ou à direita dentro de um parâmetro RenderFragment. Por exemplo, o conteúdo filho passado para outro componente.
  • Preceda ou siga um bloco de código do C#, como @if e @foreach.

Motivo da alteração

Uma meta do Blazor no ASP.NET Core 5.0 é melhorar o desempenho de renderização e comparação. Os nós de árvore com espaço em branco insignificante consumiam até 40% do tempo de renderização nos parâmetros de comparação.

Na maioria dos casos, o layout visual do componente renderizado não é afetado. No entanto, a remoção do espaço em branco pode afetar a saída renderizada ao usar uma regra de CSS, como white-space: pre. Para desabilitar essa otimização de desempenho e preservar o espaço em branco, execute uma das seguintes ações:

  • Adicione a diretiva @preservewhitespace true na parte superior do arquivo .razor para aplicar a preferência a um componente específico.
  • Adicione a diretiva @preservewhitespace true dentro de um arquivo _Imports.razor para aplicar a preferência a um subdiretório inteiro ou a todo o projeto.

Na maioria dos casos, nenhuma ação é necessária, pois os aplicativos normalmente continuarão se comportando normalmente (mas com mais rapidez). Se a remoção de espaço em branco causar problemas de renderização para um componente específico, use @preservewhitespace true nesse componente para desabilitar essa otimização.

APIs afetadas

Nenhum