Įvykiai
11-19 23 - 11-21 23
Prisijunkite prie internetinių seansų naudodami "Microsoft Ignite", sukurtą siekiant išplėsti įgūdžius ir padėti išspręsti sudėtingas šiandienos problemas.
Registruotis dabarŠi naršyklė nebepalaikoma.
Atnaujinkite į „Microsoft Edge“, kad pasinaudotumėte naujausiomis funkcijomis, saugos naujinimais ir techniniu palaikymu.
Pastaba
This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.
Įspėjimas
This version of ASP.NET Core is no longer supported. For more information, see .NET and .NET Core Support Policy. For the current release, see the .NET 8 version of this article.
Svarbu
This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
For the current release, see the .NET 9 version of this article.
Blazor WebAssembly app startup performance can be improved by waiting to load developer-created app assemblies until the assemblies are required, which is called lazy loading.
This article's initial sections cover the app configuration. For a working demonstration, see the Complete example section at the end of this article.
This article only applies to Blazor WebAssembly apps. Assembly lazy loading doesn't benefit server-side apps because server-rendered apps don't download assemblies to the client.
Lazy loading shouldn't be used for core runtime assemblies, which might be trimmed on publish and unavailable on the client when the app loads.
Assembly files use the Webcil packaging format for .NET assemblies with a .wasm
file extension.
Throughout the article, the {FILE EXTENSION}
placeholder represents "wasm
".
Assembly files are based on Dynamic-Link Libraries (DLLs) with a .dll
file extension.
Throughout the article, the {FILE EXTENSION}
placeholder represents "dll
".
Mark assemblies for lazy loading in the app's project file (.csproj
) using the BlazorWebAssemblyLazyLoad
item. Use the assembly name with file extension. The Blazor framework prevents the assembly from loading at app launch.
<ItemGroup>
<BlazorWebAssemblyLazyLoad Include="{ASSEMBLY NAME}.{FILE EXTENSION}" />
</ItemGroup>
The {ASSEMBLY NAME}
placeholder is the name of the assembly, and the {FILE EXTENSION}
placeholder is the file extension. The file extension is required.
Include one BlazorWebAssemblyLazyLoad
item for each assembly. If an assembly has dependencies, include a BlazorWebAssemblyLazyLoad
entry for each dependency.
The Blazor framework automatically registers a singleton service for lazy loading assemblies in client-side Blazor WebAssembly apps, LazyAssemblyLoader. The LazyAssemblyLoader.LoadAssembliesAsync method:
Pastaba
Guidance for hosted Blazor WebAssembly solutions is covered in the Lazy load assemblies in a hosted Blazor WebAssembly solution section.
Blazor's Router component designates the assemblies that Blazor searches for routable components and is also responsible for rendering the component for the route where the user navigates. The Router component's OnNavigateAsync
method is used in conjunction with lazy loading to load the correct assemblies for endpoints that a user requests.
Logic is implemented inside OnNavigateAsync to determine the assemblies to load with LazyAssemblyLoader. Options for how to structure the logic include:
@code
block.In the following example:
AssemblyLoader
).{PATH}
placeholder is the path where the list of assemblies should load. The example uses a conditional check for a single path that loads a single set of assemblies.{LIST OF ASSEMBLIES}
placeholder is the comma-separated list of assembly file name strings, including their file extensions (for example, "Assembly1.{FILE EXTENSION}", "Assembly2.{FILE EXTENSION}"
).App.razor
:
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger
<Router AppAssembly="typeof(App).Assembly"
OnNavigateAsync="OnNavigateAsync">
...
</Router>
@code {
private async Task OnNavigateAsync(NavigationContext args)
{
try
{
if (args.Path == "{PATH}")
{
var assemblies = await AssemblyLoader.LoadAssembliesAsync(
new[] { {LIST OF ASSEMBLIES} });
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
}
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject LazyAssemblyLoader AssemblyLoader
@inject ILogger<App> Logger
<Router AppAssembly="typeof(Program).Assembly"
OnNavigateAsync="OnNavigateAsync">
...
</Router>
@code {
private async Task OnNavigateAsync(NavigationContext args)
{
try
{
if (args.Path == "{PATH}")
{
var assemblies = await AssemblyLoader.LoadAssembliesAsync(
new[] { {LIST OF ASSEMBLIES} });
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
}
Pastaba
The preceding example doesn't show the contents of the Router component's Razor markup (...
). For a demonstration with complete code, see the Complete example section of this article.
Pastaba
With the release of ASP.NET Core 5.0.1 and for any additional 5.x releases, the Router
component includes the PreferExactMatches
parameter set to @true
. For more information, see Migrate from ASP.NET Core 3.1 to 5.0.
When the list of assemblies includes routable components, the assembly list for a given path is passed to the Router component's AdditionalAssemblies collection.
In the following example:
lazyLoadedAssemblies
passes the assembly list to AdditionalAssemblies. The framework searches the assemblies for routes and updates the route collection if new routes are found. To access the Assembly type, the namespace for System.Reflection is included at the top of the App.razor
file.{PATH}
placeholder is the path where the list of assemblies should load. The example uses a conditional check for a single path that loads a single set of assemblies.{LIST OF ASSEMBLIES}
placeholder is the comma-separated list of assembly file name strings, including their file extensions (for example, "Assembly1.{FILE EXTENSION}", "Assembly2.{FILE EXTENSION}"
).App.razor
:
@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader
<Router AppAssembly="typeof(App).Assembly"
AdditionalAssemblies="lazyLoadedAssemblies"
OnNavigateAsync="OnNavigateAsync">
...
</Router>
@code {
private List<Assembly> lazyLoadedAssemblies = new();
private async Task OnNavigateAsync(NavigationContext args)
{
try
{
if (args.Path == "{PATH}")
{
var assemblies = await AssemblyLoader.LoadAssembliesAsync(
new[] { {LIST OF ASSEMBLIES} });
lazyLoadedAssemblies.AddRange(assemblies);
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
}
@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader
<Router AppAssembly="typeof(Program).Assembly"
AdditionalAssemblies="lazyLoadedAssemblies"
OnNavigateAsync="OnNavigateAsync">
...
</Router>
@code {
private List<Assembly> lazyLoadedAssemblies = new List<Assembly>();
private async Task OnNavigateAsync(NavigationContext args)
{
try
{
if (args.Path == "{PATH}")
{
var assemblies = await AssemblyLoader.LoadAssembliesAsync(
new[] { {LIST OF ASSEMBLIES} });
lazyLoadedAssemblies.AddRange(assemblies);
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
}
Pastaba
The preceding example doesn't show the contents of the Router component's Razor markup (...
). For a demonstration with complete code, see the Complete example section of this article.
Pastaba
With the release of ASP.NET Core 5.0.1 and for any additional 5.x releases, the Router
component includes the PreferExactMatches
parameter set to @true
. For more information, see Migrate from ASP.NET Core 3.1 to 5.0.
For more information, see ASP.NET Core Blazor routing and navigation.
While loading assemblies, which can take several seconds, the Router component can indicate to the user that a page transition is occurring with the router's Navigating property.
For more information, see ASP.NET Core Blazor routing and navigation.
The NavigationContext object passed to the OnNavigateAsync callback contains a CancellationToken that's set when a new navigation event occurs. The OnNavigateAsync callback must throw when the cancellation token is set to avoid continuing to run the OnNavigateAsync callback on an outdated navigation.
For more information, see ASP.NET Core Blazor routing and navigation.
The resource loader relies on the assembly names that are defined in the blazor.boot.json
file. If assemblies are renamed, the assembly names used in an OnNavigateAsync callback and the assembly names in the blazor.boot.json
file are out of sync.
To rectify this:
Production
environment when determining which assembly names to use.The framework's lazy loading implementation supports lazy loading with prerendering in a hosted Blazor WebAssembly solution. During prerendering, all assemblies, including those marked for lazy loading, are assumed to be loaded. Manually register the LazyAssemblyLoader service in the Server project.
At the top of the Program.cs
file of the Server project, add the namespace for Microsoft.AspNetCore.Components.WebAssembly.Services:
using Microsoft.AspNetCore.Components.WebAssembly.Services;
In Program.cs
of the Server project, register the service:
builder.Services.AddScoped<LazyAssemblyLoader>();
At the top of the Startup.cs
file of the Server project, add the namespace for Microsoft.AspNetCore.Components.WebAssembly.Services:
using Microsoft.AspNetCore.Components.WebAssembly.Services;
In Startup.ConfigureServices
(Startup.cs
) of the Server project, register the service:
services.AddScoped<LazyAssemblyLoader>();
The demonstration in this section:
GrantImaharaRobotControls.{FILE EXTENSION}
) as a Razor class library (RCL) that includes a Robot
component (Robot.razor
with a route template of /robot
).Robot
component when the /robot
URL is requested by the user.Create a standalone Blazor WebAssembly app to demonstrate lazy loading of a Razor class library's assembly. Name the project LazyLoadTest
.
Add an ASP.NET Core class library project to the solution:
GrantImaharaRobotControls
. Do not select the Support pages and view checkbox.dotnet new razorclasslib -o GrantImaharaRobotControls
from a command prompt. The -o|--output
option creates a folder and names the project GrantImaharaRobotControls
.The example component presented later in this section uses a Blazor form. In the RCL project, add the Microsoft.AspNetCore.Components.Forms
package to the project.
Pastaba
For guidance on adding packages to .NET apps, see the articles under Install and manage packages at Package consumption workflow (NuGet documentation). Confirm correct package versions at NuGet.org.
Create a HandGesture
class in the RCL with a ThumbUp
method that hypothetically makes a robot perform a thumbs-up gesture. The method accepts an argument for the axis, Left
or Right
, as an enum
. The method returns true
on success.
HandGesture.cs
:
using Microsoft.Extensions.Logging;
namespace GrantImaharaRobotControls;
public static class HandGesture
{
public static bool ThumbUp(Axis axis, ILogger logger)
{
logger.LogInformation("Thumb up gesture. Axis: {Axis}", axis);
// Code to make robot perform gesture
return true;
}
}
public enum Axis { Left, Right }
using Microsoft.Extensions.Logging;
namespace GrantImaharaRobotControls
{
public static class HandGesture
{
public static bool ThumbUp(Axis axis, ILogger logger)
{
logger.LogInformation("Thumb up gesture. Axis: {Axis}", axis);
// Code to make robot perform gesture
return true;
}
}
public enum Axis { Left, Right }
}
Add the following component to the root of the RCL project. The component permits the user to submit a left or right hand thumb-up gesture request.
Robot.razor
:
@page "/robot"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject ILogger<Robot> Logger
<h1>Robot</h1>
<EditForm FormName="RobotForm" Model="robotModel" OnValidSubmit="HandleValidSubmit">
<InputRadioGroup @bind-Value="robotModel.AxisSelection">
@foreach (var entry in Enum.GetValues<Axis>())
{
<InputRadio Value="entry" />
<text> </text>@entry<br>
}
</InputRadioGroup>
<button type="submit">Submit</button>
</EditForm>
<p>
@message
</p>
@code {
private RobotModel robotModel = new() { AxisSelection = Axis.Left };
private string? message;
private void HandleValidSubmit()
{
Logger.LogInformation("HandleValidSubmit called");
var result = HandGesture.ThumbUp(robotModel.AxisSelection, Logger);
message = $"ThumbUp returned {result} at {DateTime.Now}.";
}
public class RobotModel
{
public Axis AxisSelection { get; set; }
}
}
@page "/robot"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject ILogger<Robot> Logger
<h1>Robot</h1>
<EditForm Model="robotModel" OnValidSubmit="HandleValidSubmit">
<InputRadioGroup @bind-Value="robotModel.AxisSelection">
@foreach (var entry in Enum.GetValues<Axis>())
{
<InputRadio Value="entry" />
<text> </text>@entry<br>
}
</InputRadioGroup>
<button type="submit">Submit</button>
</EditForm>
<p>
@message
</p>
@code {
private RobotModel robotModel = new() { AxisSelection = Axis.Left };
private string? message;
private void HandleValidSubmit()
{
Logger.LogInformation("HandleValidSubmit called");
var result = HandGesture.ThumbUp(robotModel.AxisSelection, Logger);
message = $"ThumbUp returned {result} at {DateTime.Now}.";
}
public class RobotModel
{
public Axis AxisSelection { get; set; }
}
}
@page "/robot"
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject ILogger<Robot> Logger
<h1>Robot</h1>
<EditForm Model="robotModel" OnValidSubmit="HandleValidSubmit">
<InputRadioGroup @bind-Value="robotModel.AxisSelection">
@foreach (var entry in (Axis[])Enum
.GetValues(typeof(Axis)))
{
<InputRadio Value="entry" />
<text> </text>@entry<br>
}
</InputRadioGroup>
<button type="submit">Submit</button>
</EditForm>
<p>
@message
</p>
@code {
private RobotModel robotModel = new RobotModel() { AxisSelection = Axis.Left };
private string message;
private void HandleValidSubmit()
{
Logger.LogInformation("HandleValidSubmit called");
var result = HandGesture.ThumbUp(robotModel.AxisSelection, Logger);
message = $"ThumbUp returned {result} at {DateTime.Now}.";
}
public class RobotModel
{
public Axis AxisSelection { get; set; }
}
}
In the LazyLoadTest
project, create a project reference for the GrantImaharaRobotControls
RCL:
LazyLoadTest
project and select Add > Project Reference to add a project reference for the GrantImaharaRobotControls
RCL.dotnet add reference {PATH}
in a command shell from the project's folder. The {PATH}
placeholder is the path to the RCL project.Specify the RCL's assembly for lazy loading in the LazyLoadTest
app's project file (.csproj
):
<ItemGroup>
<BlazorWebAssemblyLazyLoad Include="GrantImaharaRobotControls.{FILE EXTENSION}" />
</ItemGroup>
The following Router component demonstrates loading the GrantImaharaRobotControls.{FILE EXTENSION}
assembly when the user navigates to /robot
. Replace the app's default App
component with the following App
component.
During page transitions, a styled message is displayed to the user with the <Navigating>
element. For more information, see the User interaction with <Navigating>
content section.
The assembly is assigned to AdditionalAssemblies, which results in the router searching the assembly for routable components, where it finds the Robot
component. The Robot
component's route is added to the app's route collection. For more information, see the ASP.NET Core Blazor routing and navigation article and the Assemblies that include routable components section of this article.
App.razor
:
@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader
<Router AppAssembly="typeof(App).Assembly"
AdditionalAssemblies="lazyLoadedAssemblies"
OnNavigateAsync="OnNavigateAsync">
<Navigating>
<div style="padding:20px;background-color:blue;color:white">
<p>Loading the requested page…</p>
</div>
</Navigating>
<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();
private async Task OnNavigateAsync(NavigationContext args)
{
try
{
if (args.Path == "robot")
{
var assemblies = await AssemblyLoader.LoadAssembliesAsync(
new[] { "GrantImaharaRobotControls.{FILE EXTENSION}" });
lazyLoadedAssemblies.AddRange(assemblies);
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
}
@using System.Reflection
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.WebAssembly.Services
@using Microsoft.Extensions.Logging
@inject ILogger<App> Logger
@inject LazyAssemblyLoader AssemblyLoader
<Router AppAssembly="typeof(Program).Assembly"
AdditionalAssemblies="lazyLoadedAssemblies"
OnNavigateAsync="OnNavigateAsync">
<Navigating>
<div style="padding:20px;background-color:blue;color:white">
<p>Loading the requested page…</p>
</div>
</Navigating>
<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)
{
try
{
if (args.Path == "robot")
{
var assemblies = await AssemblyLoader.LoadAssembliesAsync(
new[] { "GrantImaharaRobotControls.{FILE EXTENSION}" });
lazyLoadedAssemblies.AddRange(assemblies);
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
}
Build and run the app.
When the Robot
component from the RCL is requested at /robot
, the GrantImaharaRobotControls.{FILE EXTENSION}
assembly is loaded and the Robot
component is rendered. You can inspect the assembly loading in the Network tab of the browser's developer tools.
Pastaba
A known issue exists for loading types from a lazily-loaded assembly. For more information, see Blazor WebAssembly lazy loading assemblies not working when using @ref attribute in the component (dotnet/aspnetcore #29342).
ASP.NET Core atsiliepimas
ASP.NET Core yra atvirojo kodo projektas. Pasirinkite saitą, kad pateiktumėte atsiliepimą:
Įvykiai
11-19 23 - 11-21 23
Prisijunkite prie internetinių seansų naudodami "Microsoft Ignite", sukurtą siekiant išplėsti įgūdžius ir padėti išspręsti sudėtingas šiandienos problemas.
Registruotis dabar