Creating a Lazy Loadable Module

A lazy loadable module is just a .NET assembly (project) with few extra steps at build time.

In order to covert your csproj to a lazy loadable module, it will require:

• To use Microsoft.NET.Sdk.Razor as SDK.
• To have BlazorLazyLoading.Module as PackageReference (recommended to use PrivateAssets="all").

and... done! Your module can now be lazy loaded 😄

ℹ️ BlazorLazyLoading.Module will NOT add any runtime dependency, it just contains build tooling.

Building the Module

When building the module, you will notice how 2 paths are automatically generated.
Their content is very useful when debugging 😄

• wwwroot/_lazy.json (manifest file)

  This file includes metadata to be consumed by the client in order to effectively find resources inside the Module.
  As for v1 it includes Razor Components and Pages (with routing).

• wwwroot/_lazy/ (bin directory)

  This folder will contain every runtime dependency (DLL) that this Module needs. It is required to support loading NuGet and project references effectively by Blazor.

These files will be automaticlly served as StaticWebAssets by the Blazor host.

Creating an "aggregated" Module

Having every dependency copied to each module isn't a storage-friendly solution but it's perfect for creating completely isolated modules.

If you are NOT aiming for absolute dependency isolation and just want lazy loading, the following approach is recommended:

1. Remove the BlazorLazyLoading.Module reference from all your Lazy Modules (if you already converted them).

2. Create a new Module project without any content or dependencies, just BlazorLazyLoading.Module. (I personally recommend ModulesHost as for the name)

3. Reference all the RazorLib projects that you want to lazy load by using ProjectReference and specifying the module name like the following:
   

   <ProjectReference Name="MyLazyArea" Include="..\MyLazyArea\MyLazyArea.csproj" />

   ⚠️ Important! Be sure you specify a module name in the ProjectReference or it will NOT be able to generate the manifest properly at build time!

Advanced scenario: Skipping the Manifest Generation

If you wish to load the module manually by using IAssemblyLoader, you can disable the manifest generation step by setting BLLGenerateLazyManifest to false:

<PropertyGroup>
    <BLLGenerateLazyManifest>false<BLLGenerateLazyManifest>
</PropertyGroup>

Installation

There are 4 packages available, each of them with a very specific responsability.

- BlazorLazyLoading.Module

This package includes everything you need to build a lazy module (or multiple). It should be included only in projects using Microsoft.NET.Sdk.Razor as SDK.

It can get installed by adding the following line inside the csproj:

<PackageReference Include="BlazorLazyLoading.Module" Version="1.0.0" PrivateAssets="all" />

How it works

At build time, this project will build itself

- BlazorLazyLoading.Server

This package includes everything you need to support lazy loading on Blazor Server or prerendering.

It can get installed by adding the following line inside the csproj:

<PackageReference Include="BlazorLazyLoading.Server" Version="1.0.0" PrivateAssets="all" />

It will also require to be initialized from Startup.cs by adding the following lines:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddLazyLoading(new LazyLoadingOptions
        {
            ModuleHints = new[] { "ModulesHost" }
        });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // Ideally after app.UseStaticFiles()
        app.UseLazyLoading();
    }
}

We will dive into LazyLoadingOptions a bit later.