Blazor WASM 首次加载慢,核心原因是浏览器得一次性下载 .NET 运行时(约 2MB)、所有程序集和依赖项。优化目标很明确:减小下载体积、加快关键资源获取、让首屏更快可见。
压缩与裁剪发布包
这是见效最快的基础操作:
启用 Brotli 压缩:比 Gzip 压缩率高 15–20%,现代浏览器都支持;Nginx 或 IIS 都要配好,比如 Nginx 中设 gzip on 和 gzip_comp_level 8 开启 IL 裁剪(Linking):在项目文件(.csproj)中加<blazorwebassemblyenablelinking>true</blazorwebassemblyenablelinking>,自动移除未调用的代码 启用发布时压缩:添加
<blazorwebassemblyenablecompression>true</blazorwebassemblyenablecompression>,生成时自动压缩 .dll 和 .wasm 文件
预加载关键运行时资源
别等启动时再慢慢拉,提前告诉浏览器哪些文件最急:
在index.html的 里加预加载标签:
<link rel="preload" href="_framework/wasm/dotnet.wasm" as="fetch" type="application/wasm" crossorigin>
<link rel="preload" href="_framework/blazor.webassembly.js" as="script">确保
blazor.webassembly.js和
dotnet.wasm是首批加载项,能明显缩短白屏时间
延迟加载非首屏程序集
把“用不到”的功能拆出去,用户点到哪再下哪:
在 .csproj 中标记待懒加载的程序集:<itemgroup><blazorwebassemblylazyload include="MyFeature.dll"></blazorwebassemblylazyload></itemgroup>配合
Router的
OnNavigateAsync方法,在跳转前动态加载对应程序集 注意:不能懒加载核心运行时程序集(如 Microsoft.AspNetCore.Components.WebAssembly.dll),否则会报错
启动画面 + 渐进式加载提示
用户感知速度,不只看真实耗时,更看“有没有在动”:
自定义启动页(wwwroot/index.html),加一个带进度条或动画的欢迎界面 用 JavaScript 监听
blazorStart事件,或读取
blazor.boot.json中的资源列表做预加载统计 结合 PWA 缓存策略,让二次访问直接走本地缓存,首屏几乎秒开
基本上就这些。不复杂但容易忽略——压缩没开、预加载漏写、懒加载配置错位置,都会让优化效果打折扣。
