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"
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
...
...
<BlazorWebAssemblyEnableLinker>true</BlazorWebAssemblyEnableLinker>
<BlazorWebAssemblyLazyLoadAssemblies>true</BlazorWebAssemblyLazyLoadAssemblies>
</PropertyGroup>
Step 2
Create the RCL Library as given below for example
Blazor.UI.LoginForms
Blazor.UI.FormGenerator
and now go the running solution or Main Web Appliation and add the following.
<ItemGroup>
<BlazorWebAssemblyLazyLoad Include="Blazor.UI.LoginForms.wasm" />
<BlazorWebAssemblyLazyLoad Include="Blazor.UI.FormGenerator.wasm" />
</ItemGroup>
Step 3
In Program.cs add the following
// Register the LazyAssemblyLoader service
builder.Services.AddScoped<LazyAssemblyLoader>();
Step 4
In App.razor add the following
@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?