Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application
Tags: blazor, webdev, csharp, dotnet
Published: 2021-01-05 04:43:48

---
title: Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application
published: true
date: 2020-12-21 11:57:09 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Lazy-Loading-Syncfusion-Blazor-Assemblies-in-a-Blazor-WebAssembly-Application-672x372.png
---

The Blazor platform provides support for [lazy loading assemblies](https://docs.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-5.0) starting with [.NET 5 Preview 8](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-preview-8/). It is a feature that allows you to load a specific set of assemblies on navigating to a particular component’s route path—that means the specified assemblies will be loaded in the browser only when they are required. The loaded assemblies will be cached and reused for future navigation.

The Blazor lazy loading of assemblies works only in Blazor [WebAssembly](https://webassembly.org/) (WASM) applications. It is not suitable for Blazor server-side applications.

As already explained in a previous blog post, Syncfusion provides [individual NuGet package](https://dev.to/sureshmohan/introducing-individual-nuget-packages-for-syncfusion-blazor-ui-components-42nc-temp-slug-1418695) support, starting from the [2020 Volume 4 (v18.4.0.30) release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download). So, we can now utilize the lazy loading Blazor assemblies feature with our Blazor UI components.

Let’s check out this feature in action!

## Prerequisites

- [.NET 5.0 SDK](https://dotnet.microsoft.com/download/dotnet/5.0)
- [Visual Studio 2019 v16.8.0](https://visualstudio.microsoft.com/vs/)

## Create a Blazor WebAssembly application

In this segment, we are going to create a new Blazor WebAssembly application and install the individual Syncfusion Blazor NuGet packages.

1. Open Visual Studio 2019 and  **Create a new project**. Then, select  **Blazor App**  and click **Next ** as shown in the following screenshot.  
 ![Open Visual Studio 2019 and Create a new project](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Open-Visual-Studio-2019-and-Create-a-new-project.png)
2. The  **Configure your new project**  window will appear. In it, click **Create**.  
 ![In the Configure your new project window, click on Create button](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/In-the-Configure-your-new-project-window-click-on-Create-button.png)
3. Next, choose the  **.NET 5.0**  option from the drop-down box and select **Blazor WebAssembly App** from the list. Then, click **Create**.  
 ![choose the .NET 5.0 option and select Blazor WebAssembly App. Then, click Create](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/choose-the-.NET-5.0-option-and-select-Blazor-WebAssembly-App.-Then-click-Create.png)
4. Right-click on the project and select  **Manage NuGet Packages**.
5. Then, search for the **Syncfusion.Blazor** keyword and install the required Syncfusion Blazor NuGet packages.Here, we have installed the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) NuGet packages in the application. Refer to the following screenshot. ![Install the Syncfusion.Blazor.Buttons and Syncfusion.Blazor.Calendars NuGet packages](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Install-the-Syncfusion.Blazor.Buttons-and-Syncfusion.Blazor.Calendars-NuGet-packages.png)
6. Now, configure the Syncfusion Blazor service in the **~/Program.cs** file like in the following code example.
```csharp
using Syncfusion.Blazor;

public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            
            ........
            ........

            builder.Services.AddSyncfusionBlazor();
            await builder.Build().RunAsync();
        }
    }
```
7. Then, add the Syncfusion Blazor theme file reference in the **~/wwwroot/index.html ** file.
```html
<!DOCTYPE html>
<html>

<head>
    ........
    ........
    <link href="BlazorApp1.styles.css" rel="stylesheet" />
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>
........
........
</html>
```
8. Now, add the two Razor components ( **Button.**** razor **and** Calendar.razor**) in the**~/Pages **folder and the following code examples in them.** Buttons.razor**
```js
@page "/button"

@using Syncfusion.Blazor.Buttons;

<h3>Syncfusion Blazor Button</h3>

<SfButton>Button</SfButton>
<SfButton IsPrimary="true">Primary Button</SfButton>
```

**Calendar.razor**

```html
@page "/calendar"

@using Syncfusion.Blazor.Calendars; 

<h3>Syncfusion Blazor Calendar</h3>

<SfCalendar TValue="DateTime"></SfCalendar>
```
9. **_ _** Finally, run the application and it will load all the assemblies (without lazy loading) in the web browser during initial loading.  
 ![Run the application and it will load all the assemblies (without lazy loading) in the web browser during initial loading](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Run-the-application-and-it-will-load-all-the-assemblies-without-lazy-loading-in-the-web-browser-during-initial-loading-1.png)

## Configure lazy loading in the application

Now, let’s configure the lazy loading of assemblies in our application. The process is as follows:

1. Include the required Syncfusion Blazor assemblies and their dependencies in your project file (.csproj) by using the  **BlazorWebAssemblyLazyLoad ** tag item.Refer to the following code example.
```html
<ItemGroup>
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.Buttons.dll" />
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.Calendars.dll" />
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.Inputs.dll" />
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.Lists.dll" />
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.Data.dll" />
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.Spinner.dll" />
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.Popups.dll" />
    <BlazorWebAssemblyLazyLoad Include="Syncfusion.Blazor.SplitButtons.dll" />
</ItemGroup>
```

**Note: ** Do not include the **Syncfusion.Blazor.Core** and **Syncfusion.Blazor.Themes** packages in the **BlazorWebAssemblyLazyLoad** item. These packages contain common functionalities needed for the application’s initial rendering.

2. Open the **~/App.razor** file and inject the  **LazyAssemblyLoader ** service in it as shown in the following code.
```csharp
@using Microsoft.AspNetCore.Components.WebAssembly.Services

@inject LazyAssemblyLoader assemblyLoader
```
3. Then, add the  **AdditionalAssemblies ** and  **OnNavigateAsync** methods to the  **Router** component.

**Note: ** The **OnNavigateAsync** is a callback that will be invoked when the user visits a route for the first time by directly navigating in the browser or when using the [NavigationManager.NavigateTo](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.navigationmanager.navigateto) method invocation. The argument of this callback contains the navigating route path.

Refer to the following code.

```js
@using System.Reflection;

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true" AdditionalAssemblies="@lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">
    ........
    ........
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new List<Assembly>();

    private async Task OnNavigateAsync(NavigationContext args)
    {
    }
}
```
4. Now, add the lazy loaded assemblies to the **AdditionalAssemblies** property based on the route path in the **OnNavigateAsync ** callback.

**Note: ** Add all the nested dependency assemblies along with the corresponding component assembly which is used in the current route path.

Refer to the following code example.

```js
@code {
    private List<Assembly> lazyLoadedAssemblies = new List<Assembly>();
    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            IEnumerable<Assembly> assemblies = null;
            switch (args.Path)
            {
                case "button":
                    assemblies = await assemblyLoader.LoadAssembliesAsync(
                        new List<string>() {
                            "Syncfusion.Blazor.Buttons.dll"
                        });
                    break;
                case "calendar":
                    assemblies = await assemblyLoader.LoadAssembliesAsync(
                        new List<string>() {
                            "Syncfusion.Blazor.Calendars.dll" ,
                            "Syncfusion.Blazor.Buttons.dll",
                            "Syncfusion.Blazor.Inputs.dll",
                            "Syncfusion.Blazor.Lists.dll",
                            "Syncfusion.Blazor.Data.dll",
                            "Syncfusion.Blazor.Spinner.dll",
                            "Syncfusion.Blazor.Popups.dll",
                            "Syncfusion.Blazor.SplitButtons.dll",
                        });
                    break;
            }
            if (assemblies != null)
            {
                lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {

        }
```
5. While using the lazy loading feature, the assembly downloading time can take several seconds for each new route navigation.You can notify the user about this by using the  **Navigating ** component and displaying a custom message (e.g., “The requested page is loading…”) like in the following code example.
```js
@using Microsoft.AspNetCore.Components.Routing;

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true" AdditionalAssemblies="@lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">
    <Navigating>
        <div class="nav-banner">
            <p>The requested page is loading...</p>
        </div>
    </Navigating>
    ......
    ......
</Router>
```
6. The following example code demonstrates loading the Syncfusion Blazor assemblies dynamically when the user navigates to the specific route path.
```js
@using System.Reflection;
@using Microsoft.AspNetCore.Components.Routing;
@using Microsoft.AspNetCore.Components.WebAssembly.Services;

@inject LazyAssemblyLoader assemblyLoader;

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true" AdditionalAssemblies="@lazyLoadedAssemblies" OnNavigateAsync="@OnNavigateAsync">
    <Navigating>
        <div class="nav-banner">
            <p>The requested page is loading...</p>
        </div>
    </Navigating>
    ......
    ......
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new List<Assembly>();
    private async Task OnNavigateAsync(NavigationContext args)
    {
        try
        {
            IEnumerable<Assembly> assemblies = null;
            switch (args.Path)
            {
                case "button":
                    assemblies = await assemblyLoader.LoadAssembliesAsync(
                        new List<string>() {
                            "Syncfusion.Blazor.Buttons.dll"
                            });
                    break;
                case "calendar":
                    assemblies = await assemblyLoader.LoadAssembliesAsync(
                        new List<string>() {
                            "Syncfusion.Blazor.Calendars.dll" ,
                            "Syncfusion.Blazor.Buttons.dll",
                            "Syncfusion.Blazor.Inputs.dll",
                            "Syncfusion.Blazor.Lists.dll",
                            "Syncfusion.Blazor.Data.dll",
                            "Syncfusion.Blazor.Spinner.dll",
                            "Syncfusion.Blazor.Popups.dll",
                            "Syncfusion.Blazor.SplitButtons.dll",
                            });
                    break;
            }
            if (assemblies != null)
            {
                lazyLoadedAssemblies.AddRange(assemblies);
            }
        }
        catch (Exception ex)
        {

        }
    }
}
```
7. Finally, run the application and the Syncfusion Blazor assemblies will be lazy loaded while navigating to the various route paths.Refer to the following GIF image.  
 ![Output](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Lazy-Loading-Gif.gif)  
In the above GIF image, we can see that:

- When you navigate through various route paths, only the corresponding component assemblies and their dependencies will be loaded.
- If a component’s dependent assembly is already loaded in the previous route path, then it will not be loaded again.
- If you navigate to the same page again, the assemblies will be reused from the cache to render the components.

## GitHub reference

You can get the complete working sample from this [GitHub](https://github.com/SyncfusionExamples/blazor-lazy-loading) repository.

## Summary

In this blog post, we covered the procedure to create a Blazor WebAssembly application with individual Syncfusion Blazor NuGet packages, and the procedure to enable lazy loading of assemblies. Refer to this [documentation](http://blazor.syncfusion.com/documentation/nuget-packages/) for the Syncfusion Blazor NuGet packages and their assembly names. This feature is available in the [2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download).

Try out the steps discussed in this blog and share your feedback in the comments section below!

You can contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents), or [feedback portal](https://www.syncfusion.com/feedback/blazor-components). We are always happy to assist you!