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

来源:这里教程网 时间:2026-02-21 17:35:55 作者:

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
<script></script>
标签中添加
autostart="false"
,并手动调用
Blazor.start()
,传入配置对象启用懒加载:
<script src="_framework/blazor.webassembly.js" autostart="false"></script><br><script><br>  Blazor.start({<br>    loadBootResource: function (type, name, defaultUri, integrity) {<br>      if (type === 'assembly' && name.endsWith('.dll')) {<br>        return fetch(`_content/${name}`, { cache: 'default' });<br>      }<br>      return fetch(defaultUri, { integrity: integrity, cache: 'default' });<br>    }<br>  });<br></script>

同时,在

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

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

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

这是最常用、最直接的懒加载方式:让某个

@page
路由对应的组件延迟初始化,直到用户导航到该路径。

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

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

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

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

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

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

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

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

相关推荐