Charge paresseuse, performances de Boost Blazor Wasm

Apprenez à implémenter des assemblages de chargement paresseux dans Blazor WebAssembly pour améliorer les performances de l’application.

Le plus grand défi et critique face à Webassembly Blazor est sa première performance de charge.

Il existe plusieurs optimisations de performances que vous pouvez appliquer pour améliorer les performances globales d’une application Blazor WebAssembly. Cependant, en fonction de la taille de l’application, le fichier WebAssembly téléchargé sur le client peut entraîner un délai notable.

Dans cet article, je vais vous montrer comment implémenter des assemblages de chargement paresseux dans une application Blazor WebAssembly. Cette approche vous permet de réduire la taille de l’assemblage principal et de charger plus de code à la demande.

Tu peux accéder au code utilisé dans cet exemple sur github.

Introduction aux assemblages de chargement paresseux

Avec Chargement paresseuxnous pouvons différer le chargement d’un assemblage jusqu’à ce que l’utilisateur navigue vers un itinéraire qui nécessite l’assemblage.

Par exemple, nous avons une section membre sur le site Web qui n’est utilisé que par 5% des visiteurs.

Avec le chargement paresseux, nous pouvons laisser le client télécharger le site Web sans la section membre.

Lorsque l’utilisateur se rend à la section membre, par exemple, en cliquant sur un lien dans un menu de navigation, nous chargeons l’assemblage contenant la section membre.

Création d’une application Blazor WebAssembly autonome

Tout d’abord, nous créons un Application autonome Blazor WebAssembly. Le chargement Lazy fonctionne également lors de l’hébergement de l’application à l’aide d’un projet ASP.NET Core Server, mais nous voulons nous concentrer sur l’application WebAssemby côté client.

Je nomme l’application BlazorWasmLazyLoading. Ce nom est important car j’utiliserai le même schéma de dénomination lors de la création et de la référence de la bibliothèque de classe Razor.

Création d’une bibliothèque de classe de rasoir

La base de la mise en œuvre du chargement paresseux pour une application Blazor WebAssembly divise les composants en différents projets pendant le développement. Nous devons créer une bibliothèque de classes de rasoirs et déplacer tous les composants que nous voulons charger de chargement du projet client principal dans la bibliothèque de classe Razor.

Dans cet exemple, nous voulons implémenter un section des membresqui ne sera chargé que lorsque l’utilisateur naviguera vers le /members itinéraire.

Nous créons une nouvelle bibliothèque de classe de rasoir et la nomme BlazorWasmLazyLoading.Members. Dans cette bibliothèque de classe de rasoir, j’ajoute un dossier de pages et ce qui suit Members Composant de page:

@page "/members"

<h1>Member Login</h1>

<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />

C’est un composant simple à des fins de démonstration, qui s’inscrit avec le système de routage pour le /members Racheter et rendre un HTML qui stylise un formulaire de connexion.

Nous mettons tous les composants que nous voulons utiliser à l’intérieur de la section des membres dans cette bibliothèque de classe de rasoir.

Ajout d’une référence de projet

Maintenant que nous avons un projet de bibliothèque de classe de rasoir à l’intérieur de la solution, nous devons ajouter une référence de projet à partir du BlazorWasmLazyLoading Projet à la BlazorWasmLazyLoading.Members projet.

Vous pouvez utiliser l’interface utilisateur dans votre éditeur / ide de choix, ou vous pouvez ajouter la définition XML suivante directement à l’intérieur du .csproj déposer:

<ItemGroup>
 <ProjectReference Include="..\BlazorWasmLazyLoadingMembers\BlazorWasmLazyLoading.Members.csproj" />
</ItemGroup>

Ajoutez la propriété BlazorWeBassemblylazyload au fichier du projet

Nous devons également définir une propriété spécifique à un blazor à l’intérieur du .csproj Fichier de l’application Blazor WebAssembly.

Dans le BlazorWasmLazyLoading.csproj Fichier, nous ajoutons la définition XML suivante:

<ItemGroup>
 <BlazorWebAssemblyLazyLoad Include="BlazorWasmLazyLoading.Members.wasm" />
</ItemGroup>

Il spécifie que le BlazorWasmLazyLoading.Members.wasm Le fichier ne doit pas être chargé au démarrage, même s’il est référencé à l’aide d’une référence de projet.

Le .wasm L’extension du fichier est utilisée pour le code WebAssembly respecté, et nous devons nous assurer d’ajouter l’extension de fichier à la définition du fichier du projet.

Implémentation de chargement paresseux dans le routeur

Nous avons maintenant différentes pièces pour utiliser le chargement paresseux dans une application Blazor WebAssembly. Nous avons créé une bibliothèque de classe de rasoir, l’avons référencée dans le projet WEBAssembly principal et ajouté le requis BlazorWebAssemblyLazyLoad propriété dans son fichier de projet.

Nous sommes maintenant prêts à implémenter un chargement paresseux dans le composant du routeur. Oui, nous devons dire au routeur où trouver certains composants de page et quels assemblages à charger lorsque l’utilisateur se rendra à un itinéraire spécifique.

Tout d’abord, nous ouvrons App.razor Fichier dans le projet d’application Blazor WebAssembly, qui contient la définition du routeur. Nous injectons deux nouveaux types dans le composant et ajoutons en utilisant des instructions à leurs espaces de noms.

@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using System.Reflection

@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<Program> Logger

Tout d’abord, nous avons besoin d’une instance du LazyAssemblyLoader classe, que nous utiliserons pour charger les assemblages, comme vous pourriez le deviner à partir de son nom.

Ensuite, nous voulons également injecter une instance du ILogger type qui nous permet d’écrire une instruction de journal au cas où une erreur se produit.

<Router AppAssembly="@typeof(App).Assembly" 
 AdditionalAssemblies="_lazyLoadedAssemblies"
 OnNavigateAsync="OnNavigateAsync">
 
</Router>

Nous ajoutons deux nouvelles propriétés à la définition du routeur. Tout d’abord, nous ajoutons le AdditionalAssemblies propriété et affecter un champ privé, que nous créerons dans la section du code sous peu. Ensuite, nous ajoutons un OnNavigateAsync gestionnaire d’événements au OnNavigateAsync propriété de l’événement.

Maintenant, nous sommes prêts à implémenter la section Code, qui comprend la logique qui effectue le chargement paresseux des assemblages en cas de besoin.

@code {
    private List<Assembly> _lazyLoadedAssemblies = new List<Assembly>();

    private async Task OnNavigateAsync(NavigationContext context)
    {
        try
        {
            if (context.Path == "members")
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(new[] { "BlazorWasmLazyLoading.Members.wasm" });
                _lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

Le OnNavigateAsync La méthode est déclenchée lorsque l’utilisateur navigue d’une page à une autre.

Le NavigationContext L’objet nous fournit des informations contextuelles, telles que le Path propriété contenant l’itinéraire auquel l’utilisateur essaie d’accéder.

Nous utilisons un try-catch Déclaration pour assister à toutes les erreurs imprévues et rédiger une instruction LOG au cas où une erreur se produit.

Nous vérifions le Path s’il est égal à members chaîne. Cela signifie que l’utilisateur essaie de naviguer vers le /members itinéraire.

Si tel est le cas, nous utilisons le AssemblyLoader propriété que nous avons injecté en haut du composant et son LoadAssembliesAsync Méthode pour charger l’assemblage. Dans ce cas, nous voulons charger le code à l’intérieur du BlazorWasmLazyLoading.Members projet. Assurez-vous d’ajouter le .wasm fin.

Enfin et surtout, nous ajoutons les assemblages chargés (vous pouvez charger un ou plusieurs assemblages) au privé _lazyLoadedAssemblies champ, que nous faisons référence à la AdditionalAssemblies propriété sur le Router composant.

Tester le chargement paresseux dans une application Blazor WebAssembly

Lorsque nous exécutons l’application, la route par défaut (« https://www.telerik.com/ ») de l’application Web est chargée.

Lorsque nous ouvrons les outils du développeur (assurez-vous de désactiver le cache) et rechargez la page, nous pouvons voir que l’assemblage des membres n’a pas été chargé.

Lorsque nous naviguons vers le /members Route, l’assemblage des membres est téléchargé sur le client et la page des membres est chargée.

Comment le chargement paresseux fonctionne sous le capot

Cela nous amène à la question de savoir comment le chargement paresseux fonctionne dans Blazor.

Nous utilisons le LazyAssemblyLoader Type, enregistré automatiquement avec le système d’injection de dépendance au démarrage lors de l’utilisation du WebAssemblyHostBuilder classe dans le Program.cs déposer.

Le LazyAssemblyLoader Type Utilisations Interopérabilité JavaScript Pour récupérer des assemblages à l’aide d’un appel HTTP depuis le serveur. Il charge ensuite les assemblages téléchargés dans l’exécution d’exécution sur WebAssembly dans le navigateur.

S’il y a des pages routables dans l’assemblage chargé paresseux, Blazor les rend disponibles en enregistrant les composants avec le Router.

Conclusion

Avec un chargement paresseux, nous pouvons réduire la taille du bundle WebAssembly principal téléchargé sur le client lorsque l’utilisateur visite le site Web. Il peut considérablement réduire la taille du bundle webassembly et donc le moment où le site Web est chargé.

Nous obtenons un contrôle granulaire sur comment Nous voulons diviser l’application en un ou plusieurs assemblages chargés de paresseux en divisant les composants en différentes bibliothèques de classe de rasoir.

Dans le App.razor fichier, nous configurons le Router se comporter selon les besoins de notre demande. Nous pouvons charger la charge paresseuse un ou plusieurs assemblées Lorsque l’utilisateur se rend vers un itinéraire spécifique.

Sous le capot, le intégré LazyAssemblyLoader Type utilise l’interopérabilité JavaScript pour récupérer les faisceaux WebAssembly du serveur à la demande.

Tu peux accéder au code utilisé dans cet exemple sur github.

Si vous voulez en savoir plus sur le développement du blazor, vous pouvez regarder mon Cours crash gratuit du blazor sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Bases du blazor.