---
title: "Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application"
published_at: "2020-12-21T11:57:09+00:00"
modified_at: "2026-02-10T12:09:46+00:00"
url: "https://www.syncfusion.com/blogs/post/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application"
excerpt: "The Blazor platform provides support for lazy loading assemblies starting with .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..."
taxonomy_category:
- "Blazor"
- "Syncfusion"
- "Tips and Tricks"
- "UI"
- "Web"
- "What's new"
taxonomy_post_tag:
- ".NET 5"
- "Blazor"
- "wasm"
- "Web"
- "WebAssembly"
---
# Lazy Loading Syncfusion Blazor Assemblies in a Blazor WebAssembly Application
[Ajith R](https://www.syncfusion.com/blogs/author/ajith-r)
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://www.syncfusion.com/blogs/post/introducing-individual-nuget-packages-for-syncfusion-blazor-ui-components.aspx)
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. 
2. The **Configure your new project** window will appear. In it, click ** Create**. 
3. Next, choose the **.NET 5.0** option from the drop-down box and select ** Blazor WebAssembly App** from the list. Then, click ** Create**. 
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. 
6. Now, configure the Syncfusion Blazor service in the **~/Program.cs** file like in the following code example.``` 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.``` ........ ........ ........ ........ ```
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**``` @page "/button" @using Syncfusion.Blazor.Buttons;
```
9. Finally, run the application and it will load all the assemblies (without lazy loading) in the web browser during initial loading. 
## 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.``` ``` **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.``` @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. ``` @using System.Reflection; ........ ........ @code { private List lazyLoadedAssemblies = new List(); 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. ``` @code { private List lazyLoadedAssemblies = new List(); private async Task OnNavigateAsync(NavigationContext args) { try { IEnumerable assemblies = null; switch (args.Path) { case "button": assemblies = await assemblyLoader.LoadAssembliesAsync( new List() { "Syncfusion.Blazor.Buttons.dll" }); break; case "calendar": assemblies = await assemblyLoader.LoadAssembliesAsync( new List() { "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.``` @using Microsoft.AspNetCore.Components.Routing;
The requested page is loading...
...... ...... ```
6. The following example code demonstrates loading the Syncfusion Blazor assemblies dynamically when the user navigates to the specific route path.``` @using System.Reflection; @using Microsoft.AspNetCore.Components.Routing; @using Microsoft.AspNetCore.Components.WebAssembly.Services; @inject LazyAssemblyLoader assemblyLoader;
The requested page is loading...
...... ...... @code { private List lazyLoadedAssemblies = new List(); private async Task OnNavigateAsync(NavigationContext args) { try { IEnumerable assemblies = null; switch (args.Path) { case "button": assemblies = await assemblyLoader.LoadAssembliesAsync( new List() { "Syncfusion.Blazor.Buttons.dll" }); break; case "calendar": assemblies = await assemblyLoader.LoadAssembliesAsync( new List() { "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.  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!