Development Environment: .NET SDK 5.0.100-rc.2.20479.15 , Microsoft Visual Studio Community 2019 Preview – Version 16.8.0 Preview 5.0 . Windows 10 x64 version 2004, Google Chrome Version 86.0.4240.111 (Official Build) (64-bit) or Micrsoft Edge Version 86.0.622.51 (Official build) (64-bit). Create a new project
Name the library project (Class libarary – .NET Standard) as CounterAssembly . Select the supported version as .NET 5
File CounterHelper.cs
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">using</span> <span class="token namespace">System</span> <span class="token punctuation">;</span> <span class="token keyword">namespace</span> <span class="token namespace">CounterAssembly</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">CounterHelper</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token return-type class-name"><span class="token keyword">int</span></span> <span class="token function">Increment</span> <span class="token punctuation">(</span> <span class="token class-name"><span class="token keyword">int</span></span> <span class="token keyword">value</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">value</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Build class libarary project. Then add references
Add this line to _Import.razor
1 2 | @using Microsoft.AspNetCore.Components.WebAssembly.Services |
The entire content of the _Import.razor file becomes
1 2 3 4 5 6 7 8 9 10 11 12 13 | @using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.AspNetCore.Components.WebAssembly.Http @using Microsoft.JSInterop @using SundayOct.Client @using SundayOct.Client.Shared @using Microsoft.AspNetCore.Components.WebAssembly.Services |
The App.razor file has an original content
1 2 3 4 5 6 7 8 9 10 11 | <Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> |
App.razor file adds lines of code using Lazy loading, becomes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | @inject LazyAssemblyLoader lazyAssemblyLoader @using System.Reflection <Router AppAssembly="@typeof(Program).Assembly" OnNavigateAsync="OnNavigateAsync" AdditionalAssemblies="lazyLoadedAssemblies"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> @code{ private List<Assembly> lazyLoadedAssemblies = new List<Assembly>(); private async Task OnNavigateAsync(NavigationContext args) { if (args.Path.EndsWith("counter")) { var assemblies = await lazyAssemblyLoader.LoadAssembliesAsync(new List<string> { "CounterAssembly.dll" }); lazyLoadedAssemblies.AddRange(assemblies); }; } } |
Find the file SundayOct.Client.csproj , the initial content is
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Project</span> <span class="token attr-name">Sdk</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Microsoft.NET.Sdk.BlazorWebAssembly <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PropertyGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> TargetFramework</span> <span class="token punctuation">></span></span> net5.0 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> TargetFramework</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ServiceWorkerAssetsManifest</span> <span class="token punctuation">></span></span> service-worker-assets.js <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ServiceWorkerAssetsManifest</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> PropertyGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PackageReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Microsoft.AspNetCore.Components.WebAssembly <span class="token punctuation">"</span></span> <span class="token attr-name">Version</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 5.0.0-rc.2.20475.17 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PackageReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Microsoft.AspNetCore.Components.WebAssembly.DevServer <span class="token punctuation">"</span></span> <span class="token attr-name">Version</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 5.0.0-rc.2.20475.17 <span class="token punctuation">"</span></span> <span class="token attr-name">PrivateAssets</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> all <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PackageReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> System.Net.Http.Json <span class="token punctuation">"</span></span> <span class="token attr-name">Version</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 5.0.0-rc.2.20475.5 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ProjectReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ..SharedSundayOct.Shared.csproj <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ServiceWorker</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wwwrootservice-worker.js <span class="token punctuation">"</span></span> <span class="token attr-name">PublishedContent</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wwwrootservice-worker.published.js <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Project</span> <span class="token punctuation">></span></span> |
Add more content
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> BlazorWebAssemblyLazyLoad</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> CounterAssembly <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> |
to become
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> Project</span> <span class="token attr-name">Sdk</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Microsoft.NET.Sdk.BlazorWebAssembly <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PropertyGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> TargetFramework</span> <span class="token punctuation">></span></span> net5.0 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> TargetFramework</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ServiceWorkerAssetsManifest</span> <span class="token punctuation">></span></span> service-worker-assets.js <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ServiceWorkerAssetsManifest</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> PropertyGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PackageReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Microsoft.AspNetCore.Components.WebAssembly <span class="token punctuation">"</span></span> <span class="token attr-name">Version</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 5.0.0-rc.2.20475.17 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PackageReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Microsoft.AspNetCore.Components.WebAssembly.DevServer <span class="token punctuation">"</span></span> <span class="token attr-name">Version</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 5.0.0-rc.2.20475.17 <span class="token punctuation">"</span></span> <span class="token attr-name">PrivateAssets</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> all <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> PackageReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> System.Net.Http.Json <span class="token punctuation">"</span></span> <span class="token attr-name">Version</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 5.0.0-rc.2.20475.5 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> BlazorWebAssemblyLazyLoad</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> CounterAssembly <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ProjectReference</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ..SharedSundayOct.Shared.csproj <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> ServiceWorker</span> <span class="token attr-name">Include</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wwwrootservice-worker.js <span class="token punctuation">"</span></span> <span class="token attr-name">PublishedContent</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> wwwrootservice-worker.published.js <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> ItemGroup</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> Project</span> <span class="token punctuation">></span></span> |
Build all Solution, run debug again
Source code: https://github.com/donhuvy/blazor_webassembly_lazyload