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 (RazorLib project).

After checking that, just add:

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

and... done! This 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. The "aggregated" module approach solves the storage and discoverability issue by completely isolating the assemblies from BlazorLazyLoading, except for a single one (ModulesHost) that will aggregate and serve all the lazy DLLs.

This approach is always recommended if:

• You are NOT aiming for absolute dependency isolation and just want lazy loading.
• You are migrating an already existing application to use BlazorLazyLoading.

Steps:

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>