Blazor WebAssembly 응용 프로그램에서 Syncfusion Blazor 프로그램 세트 로드 지연
Blazor 지연 로드 프로그램 세트는 BlazorWebAssembly(WASM) 애플리케이션에서만 사용할 수 있습니다.Blazor 서버 측 애플리케이션에는 적합하지 않습니다.
이전 블로그에서 설명한 바와 같이 Syncfusion은 2020 Volume 4 (v18.4.0.30) release부터 지원을 제공합니다.따라서 이제 Blazor UI 구성 요소의 Blazor 프로그램 세트 로드 지연 시간을 활용할 수 있습니다.
이 기능의 실제 효과를 봅시다!
선결 조건
Blazor WebAssembly 애플리케이션 생성
이 섹션에서는 새 Blazor WebAssembly 응용 프로그램을 만들고 각 Syncfusion Blazor NuGet 패키지를 설치합니다.
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();
}
}
<!DOCTYPE html>
<html>
<head>
........
........
<link href="BlazorApp1.styles.css" rel="stylesheet" />
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>
........
........
</html>
@page "/button"
@using Syncfusion.Blazor.Buttons;
<h3>Syncfusion Blazor Button</h3>
<SfButton>Button</SfButton>
<SfButton IsPrimary="true">Primary Button</SfButton>
@page "/calendar"
@using Syncfusion.Blazor.Calendars;
<h3>Syncfusion Blazor Calendar</h3>
<SfCalendar TValue="DateTime"></SfCalendar>
(마지막으로 프로그램을 실행하면 웹 브라우저의 모든 프로그램 집합을 초기 불러오는 동안 불러옵니다. (지연 없이 불러옵니다.)
응용 프로그램에서 지연 로드 구성
이제 프로그램에서 프로그램 집합의 지연 불러오기를 설정합니다.절차는 다음과 같습니다.
<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>
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@inject LazyAssemblyLoader assemblyLoader
다음 코드를 참조하십시오.
@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)
{
}
}
아래의 코드 예시를 참고하시오.
@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)
{
}
@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>
@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)
{
}
}
}
위의 GIF 이미지에서 볼 수 있는 내용은 다음과 같습니다.
GitHub 참조
이 GitHub 저장소에서 완전한 작업 예시를 얻을 수 있습니다.
요약
이 블로그에서 우리는 각각의 Syncfusion Blazor NuGet 패키지를 사용하여 Blazor Web Assembly 응용 프로그램을 만드는 과정과 프로그램 집합의 불러오기 지연 과정을 소개했다.Syncfusion Blazor NuGet 패키지 및 프로그램 세트 이름에 대해서는 이 설명서documentation를 참조하십시오.이 기능은 2020 Volume 4 release에서 사용할 수 있습니다.
본 블로그에서 토론하는 절차를 시도하고 아래의 평론 부분에서 피드백을 공유합니다!
저희support forums, Direct-Trac 또는 feedback portal로 연락 주십시오.우리는 언제든지 기꺼이 당신을 돕겠습니다!
Reference
이 문제에 관하여(Blazor WebAssembly 응용 프로그램에서 Syncfusion Blazor 프로그램 세트 로드 지연), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/syncfusion/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application-444e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
