Giap Hiep

I'm Giap Hiep

I'm a web developer, a gymer. I enjoy share something i know that help people's work!
Giap Hiep

Blazor WebAssembl Lazy loading

Môi trường phát triển: .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) hoặc Micrsoft Edge Version 86.0.622.51 (Official build) (64-bit). Tạo project mới

Đặt tên project thư viện (Class libarary - .NET Standard) là CounterAssembly . Chọn phiên bản hỗ trợ là .NET 5

File CounterHelper.cs

using System;

namespace CounterAssembly
{
    public class CounterHelper
    {
        public static int Increment(int value) => value + 1;
    }
}

Build class libarary project. Sau đó thêm tham chiếu

Thêm dòng này vào _Import.razor

@using Microsoft.AspNetCore.Components.WebAssembly.Services

Nội dung toàn bộ file _Import.razor trở thành

@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

File App.razor có nôi dung ban đầu

<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>

File App.razor bổ sung thêm các dòng code sử dụng tính năng Lazy loading, trở thành

@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);
        };
    }
}

Tìm file SundayOct.Client.csproj , nội dung ban đầu là

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-rc.2.20475.17" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-rc.2.20475.17" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-rc.2.20475.5" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\Shared\SundayOct.Shared.csproj" />
  </ItemGroup>

  <ItemGroup>
    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
  </ItemGroup>

</Project>

Bổ sung thêm nội dung

<ItemGroup>
  <BlazorWebAssemblyLazyLoad Include="CounterAssembly"/>
</ItemGroup>

để trở thành

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-rc.2.20475.17" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-rc.2.20475.17" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-rc.2.20475.5" />
  </ItemGroup>

<ItemGroup>
  <BlazorWebAssemblyLazyLoad Include="CounterAssembly"/>
</ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\Shared\SundayOct.Shared.csproj" />
  </ItemGroup>

  <ItemGroup>
    <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
  </ItemGroup>

</Project>

Build toàn bộ Solution, chạy lại debug lần nữa

Source code: https://github.com/donhuvy/blazor_webassembly_lazyload