如何在Blazor WebAssembly站点初始加载时显示正在下载的Assemblies/Dlls

前置修改 #

首先修改wwwroot/index.html文件中默认的Blazor加载脚本，关闭自动启动：

<!-- 原有引用添加autostart属性 -->
<script src="_framework/blazor.webassembly.js" autostart="false"></script>

然后在你的静态加载区域添加状态显示节点，比如：

<div id="app">
  <!-- 原有加载动画 -->
  <div class="loading-spinner"></div>
  <!-- 新增加载状态显示 -->
  <p id="loading-status">正在初始化应用...</p>
</div>

基础版：仅显示当前下载的程序集名称 #

在index.html中添加自定义启动脚本，利用Blazor暴露的loadBootResource钩子监听资源加载：

<script>
Blazor.start({
  loadBootResource: (type, name, defaultUri, integrity) => {
    // 仅处理程序集类型的资源，过滤运行时、样式等其他资源
    if (type === 'assembly') {
      document.querySelector('#loading-status').textContent = `正在下载依赖：${name}`;
    }
    // 保留默认加载逻辑和完整性校验
    return fetch(defaultUri, {
      cache: 'default',
      integrity: integrity
    });
  }
});
</script>

进阶版：显示总下载进度 #

如果需要展示整体加载百分比，可以提前拉取启动配置拿到总程序集数量，统计加载进度：

<script>
let totalAssemblies = 0;
let loadedAssemblies = 0;

// 预加载启动配置获取总程序集数量
fetch('_framework/blazor.boot.json')
  .then(res => res.json())
  .then(config => {
    totalAssemblies = Object.keys(config.resources.assemblies).length;
  });

Blazor.start({
  loadBootResource: (type, name, defaultUri, integrity) => {
    if (type === 'assembly') {
      loadedAssemblies++;
      const progress = Math.min(100, Math.round((loadedAssemblies / totalAssemblies) * 100));
      document.querySelector('#loading-status').textContent = `正在下载：${name} | 整体进度：${progress}%`;
    }
    return fetch(defaultUri, {
      cache: 'default',
      integrity: integrity
    });
  }
});
</script>

注意事项 #

• 不要删除fetch请求的integrity参数，避免加载被篡改的资源引发安全问题
• 如果启用了程序集裁剪、压缩或者CDN加速，只需要保证资源地址可正常访问即可，逻辑无需修改
• 懒加载的程序集不会走这个启动钩子，需要在对应懒加载的业务逻辑中单独加状态提示
• 首次加载后资源会被浏览器缓存，第二次访问时不会重复触发下载提示

内容的提问来源于stack exchange，提问作者GAC