Enable Lazy Loading in Blazor Wasm

Steps involved in enabling Lazy Loading. This uses .NET 8.0

Step 1

In the Solution file do the below changes in "PropertyGroup"

BlazorWeb.sln

<PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  ...
  ...
  <BlazorWebAssemblyEnableLinker>true</BlazorWebAssemblyEnableLinker>
  <BlazorWebAssemblyLazyLoadAssemblies>true</BlazorWebAssemblyLazyLoadAssemblies>
</PropertyGroup>

Step 2

Create the RCL Library as given below for example

  1. Blazor.UI.LoginForms

  2. Blazor.UI.FormGenerator

and now go the running solution or Main Web Appliation and add the following.

BlazorWeb.sln

<ItemGroup>
  <BlazorWebAssemblyLazyLoad Include="Blazor.UI.LoginForms.wasm" />
  <BlazorWebAssemblyLazyLoad Include="Blazor.UI.FormGenerator.wasm" />
</ItemGroup> 

Step 3

In Program.cs add the following

Program.cs
// Register the LazyAssemblyLoader service
builder.Services.AddScoped<LazyAssemblyLoader>();

Step 4

In App.razor add the following

App.razor

@using System.Reflection
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger

<Router AppAssembly="@typeof(App).Assembly"
        OnNavigateAsync="OnNavigateAsync"
AdditionalAssemblies="lazyLoadedAssemblies">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

@code {
    private IEnumerable<Assembly>? lazyLoadedAssemblies;

    protected override async Task OnInitializedAsync()
    {
        // Initialize as false to indicate that the assembly is not yet loaded.
        GlobalSettings.IsFormAssemblyLoaded = false;
    }

    private async Task OnNavigateAsync(Microsoft.AspNetCore.Components.Routing.NavigationContext args)
    {
        try
        {
            if (args.Path.Contains("authentication"))
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    new[] { "Blazor.UI.LoginForms.wasm" });
            }
            else if (args.Path.Contains("simple-form"))
            {
                var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                    new[] { "Blazor.UI.FormGenerator.wasm" });                
                // Once loaded, set the flag to true.
                //GlobalSettings.IsFormAssemblyLoaded = true;

            }            
        }
        catch (Exception ex)
        {
            Logger.LogError("Error: {Message}", ex.Message);
        }
        finally
        {
            //await Task.Delay(150);
            // Optionally, trigger a state change to re-render the components that depend on this flag.
            //StateHasChanged();
        }
    }

    
}

Additionally if you need to set some delay you can use finally block... as mentioned in the above.

Last updated

Was this helpful?