Blazor: незначительные пробелы, обрезанные из компонентов во время компиляции

  • Статья

Начиная с ASP.NET Core 5.0 компилятор Razor пропускает незначительное пробелы в компонентах Razor (razor-файлы ) во время компиляции. Обсуждение этого вопроса см. на странице dotnet/aspnetcore#23568.

Представленные версии

5,0

Старое поведение

В Blazor Server и Blazor WebAssembly версий 3.x символы пробела учитываются в исходном коде компонента. Текстовые узлы, состоящие только из пробелов, отображаются в модели DOM браузера даже при отсутствии визуального эффекта.

Рассмотрим следующий код компонента Razor:

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

В предыдущем примере отображаются два узла пробелов:

  • за пределами блока кода @foreach;
  • вокруг элемента <li>;
  • вокруг выходных данных @item.Text.

Список, содержащий 100 элементов, формирует 402 узла пробелов. Это более половины всех отображаемых узлов, хотя ни один из узлов пробелов не влияет на отображаемые выходные данные.

При отрисовке статического HTML для компонентов пробелы внутри тега не сохраняются. Например, просмотрите исходный код следующего компонента:

<foo        bar="baz"     />

Пробел не сохраняется. Предварительно преобразованные для просмотра выходные данные имеют следующий вид:

<foo bar="baz" />

Новое поведение

Если директива @preservewhitespace не используется со значением true, узлы пробелов удаляются в следующих случаях:

  • они находятся в начале или конце элемента;
  • они находятся в начале или конце параметра RenderFragment. Например, дочернее содержимое передается другому компоненту.
  • они находятся в начале или конце блока кода C#, например @if и @foreach.

Причина изменения

Платформа Blazor в ASP.NET Core 5.0 предназначена для повышения производительности визуализации и сравнения. Узлам дерева незначащих пробелов требовалось до 40 процентов времени отрисовки в тестах производительности.

В большинстве случаев визуальный макет отображаемого компонента не затрагивается. Однако при использовании правила CSS, такого как white-space: pre, удаление пробелов может повлиять на отображаемые выходные данные. Чтобы отключить эту оптимизацию производительности и сохранить пробелы, выполните одно из следующих действий.

  • Добавьте директиву @preservewhitespace true в начало RAZOR-файла, чтобы применить предпочтение к конкретному компоненту.
  • Добавьте директиву @preservewhitespace true внутрь файла _Imports.razor, чтобы применить предпочтение ко всему подкаталогу или проекту целиком.

В большинстве случаев никаких действий не требуется, так как приложения обычно продолжают работать в обычном режиме (но быстрее). Если удаление пробелов приводит к возникновению проблем в конкретном компоненте, используйте @preservewhitespace true в этом компоненте, чтобы отключить эту оптимизацию.

Затронутые API

Нет