Blazor 怎么进行代码分割和懒加载

Blazor WebAssembly支持真正的程序集懒加载,Server仅支持路由级组件懒加载和服务器端优化;WebAssembly需配置autostart="false"、loadBootResource及AddLazyAssemblyLoading,Server则依赖OnInitializedAsync异步初始化和渲染控制。

Blazor 支持代码分割和懒加载,但方式取决于你用的是 Blazor WebAssembly 还是 Blazor Server。WebAssembly 支持真正的按需加载程序集(.dll),Server 模式则主要靠路由级组件懒加载 + 服务端资源优化,不涉及客户端 DLL 拆分。

Blazor WebAssembly:启用程序集懒加载

从 .NET 6 开始,WebAssembly 主机支持自动程序集懒加载(Lazy Assembly Loading)。关键在于配置 blazor.webassembly.js 加载行为,并在 index.html 中启用特性。

  • 确保项目 SDK 是 Microsoft.NET.Sdk.BlazorWebAssembly,且目标框架 ≥ .NET 6
  • wwwroot/index.html 标签中添加 autostart="false",并手动调用 Blazor.start(),传入配置对象启用懒加载:

同时,在 Program.cs 中注册懒加载服务(如需动态加载非启动时依赖的程序集):

  • 使用 builder.Services.AddLazyAssemblyLoading();(.NET 7+ 自动启用,.NET 6 需手动加)
  • 把非核心功能封装成独立类库(如 MyFeature.dll),发布时会自动进入 _content/ 目录
  • 在组件中通过 AssemblyLoadContext.Default.LoadFromStream() 或更推荐的方式 —— 使用 Lazy + Assembly.GetExecutingAssembly().GetReferencedAssemblies() 配合按需触发加载逻辑

路由级组件懒加载(WebAssembly & Server 通用)

这是最常用、最直接的懒加载方式:让某个 @page 路由对应的组件延迟初始化,直到用户导航到该路径。

  • 不用改组件本身,只需在 App.razorRouter 组件中配置 AdditionalAssembliesOnNavigateAsync(可选)
  • 更推荐做法:用 DynamicComponent + AssemblyLoadContext 手动加载特定程序集中的组件类型(适合插件化场景)
  • 简单场景下,直接在 NavMenu.razor 中用条件渲染 + await import('./feature-component.js')(JS Interop 方式)也能实现 UI 层懒加载,但绕过 Razor 编译流程

优化包体积:拆分第三方依赖

懒加载效果好不好,取决于你有没有真正把大依赖“切出去”。比如把 Charting、PDF 导出等重型功能放到独立类库中,并确保它不被主程序集直接引用(避免 IL Linker 保留)。

  • 在项目文件中为该类库添加 trueYourFeature.dll(防止被裁剪掉)
  • 检查生成的 web.configdist/_framework/ 目录,确认 YourFeature.dll 确实单独存在,且未被合并进 main.js
  • 用浏览器 DevTools 的 Network 面板验证:访问某页面时,是否只加载了对应 DLL,而不是所有程序集一次性拉取

Blazor Server 不支持程序集懒加载,但可以模拟

Server 模式下,所有 .NET 代码运行在服务端,客户端只收 HTML/SignalR 数据,所以“DLL 懒加载”无意义。但你可以做到逻辑上的懒初始化:

  • 把耗时操作(如大数据查询、复杂计算)放在 OnInitializedAsync 中异步执行,配合 @if (isLoading) { 加载中... }
  • RenderMode.ServerPrerendered 首屏静态渲染,再切换为交互式,提升感知性能
  • 对非首屏组件(如 Tab 页、折叠面板内容)使用 + StateHasChanged() 控制渲染时机,减少初始渲染压力

基本上就这些。WebAssembly 真正支持 DLL 级懒加载,Server 更侧重服务端资源调度和前端渲染节奏控制。选对方式,才能让首屏快、后续也轻。