Blazor : espace blanc insignifiant supprimé des composants au moment de la compilation

  • Article

À compter de ASP.NET Core 5.0, le compilateur Razor omet les espaces blancs non significatifs dans les composants Razor (fichiers .razor) au moment de la compilation. Pour plus d’informations, consultez le problème dotnet/aspnetcore#23568.

Version introduite

5,0

Ancien comportement

Dans les versions 3.x de Blazor Server et Blazor WebAssembly, l’espace blanc est respecté dans le code source d’un composant. Les nœuds de texte avec espaces blancs uniquement s’affichent dans le DOM (Document Object Model) du navigateur, même s’il n’y a aucun effet visuel.

Considérez le code de composant Razor suivant :

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

L’exemple précédent restitue deux nœuds d’espace blanc :

  • En dehors du bloc de code @foreach.
  • Autour de l’élément <li>.
  • Autour de la sortie @item.Text.

Une liste contenant 100 éléments donne 402 nœuds d’espace blanc. Cela correspond à plus de la moitié de tous les nœuds rendus, même si aucun des nœuds d’espace blanc n’affecte visuellement la sortie rendue.

Lors du rendu du code HTML statique pour les composants, les espaces blancs à l’intérieur d’une balise n’étaient pas conservés. Par exemple, affichez la source du composant suivant :

<foo        bar="baz"     />

L’espace blanc n’est pas conservé. La sortie pré-rendue est la suivante :

<foo bar="baz" />

Nouveau comportement

Sauf si la directive @preservewhitespace est utilisée avec la valeur true, les nœuds d’espace blanc sont supprimés s’ils :

  • Sont de début ou de fin dans un élément.
  • Sont de début ou de fin dans un paramètre RenderFragment. Par exemple, le contenu enfant est passé à un autre composant.
  • Précèdent ou suivent un bloc de code C# comme @if ou @foreach.

Raison du changement

L’un des objectifs de Blazor dans ASP.NET Core 5.0 est d’améliorer les performances de rendu et de différence. Les nœuds d’arborescence d’espaces blancs non significatifs consommaient jusqu’à 40 % du temps de rendu dans les tests de référence.

Dans la plupart des cas, la disposition visuelle du composant rendu n’est pas affectée. Cependant, la suppression de l’espace blanc peut affecter la sortie rendue lors de l’utilisation d’une règle CSS, par exemple white-space: pre. Pour désactiver cette optimisation des performances et conserver l’espace blanc, effectuez l’une des actions suivantes :

  • Ajoutez la directive @preservewhitespace true en haut du fichier .razor pour appliquer la préférence à un composant spécifique.
  • Ajoutez la directive @preservewhitespace true dans un fichier _Imports.razor pour appliquer la préférence à un sous-répertoire entier ou à l’ensemble du projet.

Dans la plupart des cas, aucune action n’est requise, car les applications continuent de se comporter normalement (mais plus rapidement). Si la suppression de l’espace blanc entraîne un problème de rendu pour un composant particulier, utilisez @preservewhitespace true dans ce composant pour désactiver cette optimisation.

API affectées

None