Blazor WASM 提升首次加载速度的方法

Blazor WASM 首次加载慢的主因是需一次性下载约2MB的.NET运行时、程序集及依赖项；优化聚焦减体积、提资源获取速、促首屏快显，含Brotli压缩、IL裁剪、预加载关键资源、延迟加载非首屏程序集、启动画面与PWA缓存。

Blazor WASM 首次加载慢，核心原因是浏览器得一次性下载 .NET 运行时（约 2MB）、所有程序集和依赖项。优化目标很明确：减小下载体积、加快关键资源获取、让首屏更快可见。

压缩与裁剪发布包

这是见效最快的基础操作：

• 启用 Brotli 压缩：比 Gzip 压缩率高 15–20%，现代浏览器都支持；Nginx 或 IIS 都要配好，比如 Nginx 中设 gzip on 和 gzip_comp_level 8
• 开启 IL 裁剪（Linking）：在项目文件（.csproj）中加 true，自动移除未调用的代码
• 启用发布时压缩：添加 true，生成时自动压缩 .dll 和 .wasm 文件

预加载关键运行时资源

别等启动时再慢慢拉，提前告诉浏览器哪些文件最急：

• 在 index.html 的 里加预加载标签：
  
  
• 确保 blazor.webassembly.js 和 dotnet.wasm 是首批加载项，能明显缩短白屏时间

延迟加载非首屏程序集

把“用不到”的功能拆出去，用户点到哪再下哪：

• 在 .csproj 中标记待懒加载的程序集：
  
• 配合 Router 的 OnNavigateAsync 方法，在跳转前动态加载对应程序集
• 注意：不能懒加载核心运行时程序集（如 Microsoft.AspNetCore.Components.WebAssembly.dll），否则会报错

启动画面 + 渐进式加载提示

用户感知速度，不只看真实耗时，更看“有没有在动”：

• 自定义启动页（wwwroot/index.html），加一个带进度条或动画的欢迎界面
• 用 JavaScript 监听 blazorStart 事件，或读取 blazor.boot.json 中的资源列表做预加载统计
• 结合 PWA 缓存策略，让二次访问直接走本地缓存，首屏几乎秒开

基本上就这些。不复杂但容易忽略——压缩没开、预加载漏写、懒加载配置错位置，都会让优化效果打折扣。