如何修改Blazor WASM中DLL缓存的CacheStorage键？

问题根源 #

你的Blazor WASM表单构建器运行在Web Forms上，Chrome中DLL的缓存键和当前URL绑定——因为你们用URL编码存储用户数据，不同用户（甚至同一用户不同操作）的URL存在差异，导致相同哈希的DLL被重复缓存，无法复用已加载的框架资源。正常情况下Blazor WASM的资源缓存键应该是blazor-resources~/~开头的统一格式，但你的缓存键却和当前URL强关联，这就是问题所在。

可行解决方案 #

1. 自定义资源加载路径（最直接） #

修改wwwroot/index.html里的Blazor启动脚本，通过loadBootResource强制所有框架资源从固定路径加载，让缓存键脱离当前URL的影响：

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: (type, name, defaultUri, integrity) => {
      // 固定资源基础路径，忽略当前URL的查询参数
      const basePath = new URL('_framework/', window.location.origin);
      const resourceUrl = new URL(name, basePath);
      return { uri: resourceUrl.href };
    }
  });
</script>

这个方法会让所有框架DLL的请求路径统一指向根目录下的_framework文件夹，缓存键自然会变成统一的blazor-resources~/~格式，不同URL下也能复用缓存。

2. 统一Blazor入口路由 #

如果Web Forms必须通过URL传递用户数据，可以把Blazor应用的入口统一到一个不带参数的固定页面（比如/FormBuilderEntry），再通过其他方式传递用户信息：

• 用sessionStorage存储URL中的用户编码数据，Blazor初始化时读取
• 在Web Forms页面通过JS把用户数据注入Blazor的全局参数中

这样所有用户访问Blazor时都走同一个入口URL，缓存键不会随用户参数变化，就能复用已有缓存。

3. 调整Service Worker缓存规则（若用PWA） #

如果你的应用是PWA，检查service-worker.js或service-worker.published.js的缓存逻辑，添加忽略URL查询参数的配置：

self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('_framework/')) {
    event.respondWith(
      caches.match(event.request, { ignoreSearch: true })
        .then(response => response || fetch(event.request))
    );
  }
});

ignoreSearch: true会让Service Worker忽略URL里的查询参数，用资源本身的路径和哈希来匹配缓存，避免因URL参数不同重复缓存。

验证步骤 #

修改后打开Chrome开发者工具的「Application」标签，查看「Cache Storage」中的Blazor缓存条目，确认所有框架DLL的缓存键已统一为blazor-resources~/~前缀，切换不同用户URL时，DLL会直接从缓存加载，不再创建新缓存。

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