Assembly di caricamento ritardato in ASP.NET Core Blazor WebAssembly

Blazor WebAssembly Le prestazioni di avvio dell'app possono essere migliorate caricando gli assembly dell'app creati dallo sviluppatore solo quando sono effettivamente necessari, un approccio noto come caricamento lazy.

Le sezioni iniziali di questo articolo illustrano la configurazione dell'app. Per una dimostrazione funzionante, vedere la sezione Complete example (Esempio completo) alla fine di questo articolo.

Questo articolo si applica solo alle Blazor WebAssembly app. Il caricamento differito degli assembly non offre vantaggi per le app lato server perché le app renderizzate lato server non scaricano assembly lato client.

Il caricamento differito non deve essere usato per gli assembly di runtime di base, che potrebbero essere rimossi durante la pubblicazione e potrebbero non essere disponibili sul client quando l'app viene caricata.

Segnaposto dell'estensione di un file ({FILE EXTENSION}) per i file di assembly

I file di assembly usano il formato di pacchettizzazione Webcil per gli assembly .NET con un'estensione del file .wasm.

In tutto l'articolo, il {FILE EXTENSION} segnaposto rappresenta "wasm".

Configurazione del file di progetto

Contrassegnare gli assiemi per il caricamento differito nel file di progetto dell'app (.csproj) usando l'elemento BlazorWebAssemblyLazyLoad. Usare il nome dell'assembly con estensione di file. Il Blazor framework impedisce il caricamento dell'assembly all'avvio dell'app.

<ItemGroup>
  <BlazorWebAssemblyLazyLoad Include="{ASSEMBLY NAME}.{FILE EXTENSION}" />
</ItemGroup>

Il {ASSEMBLY NAME} segnaposto è il nome dell'assembly e il {FILE EXTENSION} segnaposto è l'estensione del file. L'estensione del file è obbligatoria.

Includere un elemento BlazorWebAssemblyLazyLoad per ogni assembly. Se un assembly ha dipendenze, includere un elemento BlazorWebAssemblyLazyLoad per ogni dipendenza.

Router configurazione dei componenti

Il Blazor framework registra automaticamente un servizio singleton per il caricamento differito di assembly nelle app client Blazor WebAssembly, LazyAssemblyLoader. Il metodo LazyAssemblyLoader.LoadAssembliesAsync:

• Usa JS l'interoperabilità per recuperare gli assemblaggi tramite una chiamata di rete.
• Carica gli assembly nel runtime che viene eseguito su WebAssembly nel browser.

BlazorIl componente di Router designa gli assembly che Blazor cercano componenti instradabili ed è anche responsabile del rendering del componente per la route in cui si sposta l'utente. Il metodo Router del componente OnNavigateAsync viene usato insieme al caricamento differito per caricare gli assembly corretti per gli endpoint richiesti da un utente.

La logica viene implementata all'interno OnNavigateAsync per determinare gli assembly da caricare con LazyAssemblyLoader. Le opzioni per la struttura della logica includono:

• Controlli condizionali all'interno del OnNavigateAsync metodo .
• Tabella di ricerca che mappa le route ai nomi di assembly, inseriti nel componente o implementati all'interno del codice del componente.

Nell'esempio seguente :

• Lo spazio dei nomi per Microsoft.AspNetCore.Components.WebAssembly.Services viene specificato.
• Il LazyAssemblyLoader servizio viene inserito (AssemblyLoader).
• Il segnaposto {PATH} è il percorso in cui deve essere caricato l'elenco di assembly. Nell'esempio viene usato un controllo condizionale per un singolo percorso che carica un singolo set di assembly.
• Il {LIST OF ASSEMBLIES} segnaposto è l'elenco delimitato da virgole di stringhe di nomi file di assembly, incluse le loro estensioni di file, ad esempio "Assembly1.{FILE EXTENSION}", "Assembly2.{FILE EXTENSION}".

App.razor:

@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger

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

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
           {
               if (args.Path == "{PATH}")
               {
                   var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                       [ {LIST OF ASSEMBLIES} ]);
               }
           }
           catch (Exception ex)
           {
               Logger.LogError("Error: {Message}", ex.Message);
           }
    }
}

Nota

L'esempio precedente non mostra il contenuto del Router markup del Razor componente (...). Per una dimostrazione con codice completo, vedere la sezione Esempio completo di questo articolo.

Assiemi che includono componenti instradabili

Quando l'elenco di assembly include componenti instradabili, l'elenco di assembly per un determinato percorso viene passato alla raccolta del componente RouterAdditionalAssemblies.

Nell'esempio seguente :

• L'elenco in < passa l'elenco degli assembly a Assembly. Il framework cerca le route negli assembly e aggiorna la raccolta di route se vengono trovate nuove route. Per accedere al tipo Assembly, lo spazio dei nomi per System.Reflection è incluso nella parte superiore del file App.razor.
• Il segnaposto {PATH} è il percorso in cui deve essere caricato l'elenco di assembly. Nell'esempio viene usato un controllo condizionale per un singolo percorso che carica un singolo set di assembly.
• Il {LIST OF ASSEMBLIES} segnaposto è l'elenco delimitato da virgole di stringhe di nomi file di assembly, incluse le loro estensioni di file, ad esempio "Assembly1.{FILE EXTENSION}", "Assembly2.{FILE EXTENSION}".

App.razor:

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

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

@code {
    private List<Assembly> lazyLoadedAssemblies = [];

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if (args.Path == "{PATH}")
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    [ {LIST OF ASSEMBLIES} ]);
                lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

Nota

L'esempio precedente non mostra il contenuto del Router markup del Razor componente (...). Per una dimostrazione con codice completo, vedere la sezione Esempio completo di questo articolo.

Per ulteriori informazioni, vedere ASP.NET Core Blazor routing e navigazione.

Interazione dell'utente con <Navigating> il contenuto

Durante il caricamento degli assembly, che può richiedere alcuni secondi, il componente Router può indicare all'utente che si sta verificando una transizione di pagina con la proprietà del router Navigating.

Per ulteriori informazioni, vedere ASP.NET Core Blazor routing e navigazione.

Gestire gli annullamenti in OnNavigateAsync

L'oggetto NavigationContext passato al OnNavigateAsync callback contiene un CancellationToken oggetto impostato quando si verifica un nuovo evento di navigazione. Il OnNavigateAsync callback deve lanciare un'eccezione quando il token di annullamento è impostato, per evitare di continuare a eseguire il OnNavigateAsync callback su una navigazione obsoleta.

Per ulteriori informazioni, vedere ASP.NET Core Blazor routing e navigazione.

Esempio completo

La dimostrazione in questa sezione:

• Crea un assembly di controlli robot (GrantImaharaRobotControls.{FILE EXTENSION}) come Razor libreria di classi (RCL) che include un Robot componente (Robot.razor con un modello di route di /robot).
• Carica pigramente l'assembly del RCL per eseguire il rendering del suo componente Robot quando l'URL /robot viene richiesto dall'utente.

Creare un'applicazione autonoma Blazor WebAssembly per dimostrare il caricamento differito dell'assembly di una libreria di classi Razor. Assegnare al progetto il nome LazyLoadTest.

Aggiungere un progetto di libreria di classi core ASP.NET alla soluzione:

• Visual Studio: fare clic con il pulsante destro del mouse sul file della soluzione in Esplora soluzioni e scegliere Aggiungi>Nuovo progetto. Nella finestra di dialogo dei nuovi tipi di progetto selezionare Razor Libreria di classi. Assegnare al progetto il nome GrantImaharaRobotControls. Non selezionare la casella di controllo pagine di supporto e visualizzazioni.
• Visual Studio Code/.NET CLI: Esegui dotnet new razorclasslib -o GrantImaharaRobotControls da un prompt dei comandi. L'opzione -o|--output crea una cartella e assegna un nome al progetto GrantImaharaRobotControls.

Creare una HandGesture classe nell'RCL con un ThumbUp metodo che ipoteticamente faccia eseguire a un robot un gesto di pollice in su. Il metodo accetta un argomento per l'asse, Left o Right, come enum. Il metodo restituisce true con successo.

HandGesture.cs:

using Microsoft.Extensions.Logging;

namespace GrantImaharaRobotControls;

public static class HandGesture
{
    public static bool ThumbUp(Axis axis, ILogger logger)
    {
        logger.LogInformation("Thumb up gesture. Axis: {Axis}", axis);

        // Code to make robot perform gesture

        return true;
    }
}

public enum Axis { Left, Right }

Aggiungere il componente seguente alla radice del progetto RCL. Il componente consente all'utente di inviare una richiesta di gesto del pollice in su della mano sinistra o destra.

Robot.razor:

@page "/robot"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject ILogger<Robot> Logger

<h1>Robot</h1>

<EditForm FormName="RobotForm" Model="robotModel" OnValidSubmit="HandleValidSubmit">
    <InputRadioGroup @bind-Value="robotModel.AxisSelection">
        @foreach (var entry in Enum.GetValues<Axis>())
        {
            <InputRadio Value="entry" />
            <text>&nbsp;</text>@entry<br>
        }
    </InputRadioGroup>

    <button type="submit">Submit</button>
</EditForm>

<p>
    @message
</p>

@code {
    private RobotModel robotModel = new() { AxisSelection = Axis.Left };
    private string? message;

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        var result = HandGesture.ThumbUp(robotModel.AxisSelection, Logger);

        message = $"ThumbUp returned {result} at {DateTime.Now}.";
    }

    public class RobotModel
    {
        public Axis AxisSelection { get; set; }
    }
}

LazyLoadTest Nel progetto, crea un riferimento al progetto per l'RCL:GrantImaharaRobotControls

• Visual Studio: fare clic con il pulsante destro del mouse sul LazyLoadTest progetto e selezionare Aggiungi>riferimento al progetto per aggiungere un riferimento al progetto per l'RCL.GrantImaharaRobotControls
• CLI di Visual Studio Code/.NET: Eseguire dotnet add reference {PATH} nel prompt dei comandi dalla cartella del progetto. Il segnaposto {PATH} rappresenta il percorso del progetto RCL.

Specificare l'assembly RCL per il caricamento differito nel file di progetto dell'app (LazyLoadTest):

<ItemGroup>
    <BlazorWebAssemblyLazyLoad Include="GrantImaharaRobotControls.{FILE EXTENSION}" />
</ItemGroup>

Il componente seguente Router illustra il caricamento dell'assembly GrantImaharaRobotControls.{FILE EXTENSION} quando l'utente passa a /robot. Sostituire il componente predefinito App dell'app con il componente seguente App .

Durante le transizioni di pagina, viene visualizzato un messaggio con stile all'utente con l'elemento <Navigating> . Per altre informazioni, vedere la sezione Interazione dell'utente con <Navigating> il contenuto .

L'assembly viene assegnato a AdditionalAssemblies, il che porta il router a cercare nell'assembly i componenti instradabili, tra cui trova il componente Robot. Il percorso del componente Robot viene aggiunto alla raccolta di percorsi dell'app. Per ulteriori informazioni, vedere l'articolo Blazor e la sezione Assembly che includono componenti instradabili di questo articolo.

App.razor:

@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="typeof(App).Assembly"
        AdditionalAssemblies="lazyLoadedAssemblies" 
        OnNavigateAsync="OnNavigateAsync">
    <Navigating>
        <div style="padding:20px;background-color:blue;color:white">
            <p>Loading the requested page&hellip;</p>
        </div>
    </Navigating>
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = [];
    private bool grantImaharaRobotControlsAssemblyLoaded;

    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            if ((args.Path == "robot") && !grantImaharaRobotControlsAssemblyLoaded)
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    [ "GrantImaharaRobotControls.{FILE EXTENSION}" ]);
                lazyLoadedAssemblies.AddRange(assemblies);
                grantImaharaRobotControlsAssemblyLoaded = true;
            }
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
    }
}

Compilare ed eseguire l'app.

Quando il componente Robot dall'RCL viene richiesto in /robot, l'assembly GrantImaharaRobotControls.{FILE EXTENSION} viene caricato e viene eseguito il rendering del componente Robot. È possibile esaminare il caricamento dell'assembly nella scheda Rete degli strumenti di sviluppo del browser.

Risoluzione dei problemi

• Se si verifica un rendering imprevisto, ad esempio il rendering di un componente da una navigazione precedente, confermare che il codice lanci un'eccezione se il token di annullamento è impostato.
• Se gli assembly configurati per il caricamento differito si caricano inaspettatamente all'avvio dell'app, verificare che l'assembly sia contrassegnato per il caricamento differito nel file di progetto.

Risorse aggiuntive

• Gestire gli eventi di spostamento asincroni con OnNavigateAsync
• procedure consigliate per le prestazioni principali Blazor di ASP.NET