Configurar Lazy-load para Assemblies en Blazor

Blazor con .NET 5 incluye un feature bastante importante para mejorar el performance de nuestras Apps. Usando Lazy-loading podemos traer ensamblados (.DLL) justo en el momento exacto en el que necesitan en vez de cargarlos desde el inicio, aligerando considerablemente la primera carga del proyecto.

Para configurar esta funcionalidad, debemos ir al archivo de proyecto y aparte de agregan las referencias de Nugets lo librerías que vamos a usar, debemos especificar cuales se van a carga usando Lazy-loading.

  <ItemGroup>
    <ProjectReference Include="../Lib/Lib.csproj" />
  </ItemGroup>

   <ItemGroup>
    <BlazorWebAssemblyLazyLoad Include="Lib.dll" />
  </ItemGroup>

Si en este momento ejecutamos el proyecto, obtenemos un error al abrir el modulo que utilice la librería “Lib” ya que este paquete no se esta cargando al inicio pero no se le esta indicando en que momento cargar.

Ahora debemos configurar la carga de este ensamblado y para ello podemos ir al archivo App.Razor y el método OnNavigateAsync especificar el momento en que se realizará esta carga.

En el siguiente ejemplo especifico el archivo de ensamblado para el módulo de fetch-data:

@inject Microsoft.AspNetCore.Components.WebAssembly.Services.LazyAssemblyLoader AssemblyLoader

<Router AppAssembly="@typeof(Program).Assembly"   OnNavigateAsync="OnNavigateAsync"
        AdditionalAssemblies="lazyLoadedAssemblies">
    <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<System.Reflection.Assembly> lazyLoadedAssemblies = new List<System.Reflection.Assembly>();

    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "fetchdata") // Url of the page that needs the lazy loaded assembly
        {
            var assemblies = await AssemblyLoader.LoadAssembliesAsync(new[] { "Lib.dll" });
            lazyLoadedAssemblies.AddRange(assemblies);
        }
    }
}

Dentro del módulo de fetch data se esta agregando un componente de esta libreria:

@page "/fetchdata"
@inject HttpClient Http

<Lib.Component1></Lib.Component1>


<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
.
.
.
.

Con este demo completo ahora podemos ver como la librería Lib se carga justo en el momento en que se abre el modulo de fetch-data aligerando la carga inicial y mejorando el performance considerablemente.

Encuentra mas demos en:

https://github.com/Mteheran/blazornet5