Flutter弃用loadEntrypoint后，如何解决Web资源缓存问题？

方案1：基于构建ID的资源版本化（推荐） #

Flutter Web构建时会自动为静态资源（如main.dart.js、图片、字体）生成带哈希后缀的文件名（比如main.abc123.dart.js），同时在flutter_service_worker.js中生成唯一的serviceWorkerVersion，利用这两个特性即可解决缓存冲突：

• 无需手动创建buildVersion目录，直接依赖Flutter自动生成的哈希文件名，这类资源可设置长期缓存（比如365天），哈希变化时浏览器会自动加载新资源。
• 对index.html设置短缓存或强制回源（如Cache-Control: no-cache），确保新版本发布时用户能获取到最新的入口文件。
• 如果需要额外绑定自定义版本标识，可在构建后修改index.html中的加载配置：

_flutter.loader.load({
  serviceWorkerVersion: serviceWorkerVersion + "-{{buildVersion}}",
  // 其他默认配置
});

方案2：保留版本目录适配新API #

如果仍想沿用buildVersion目录的隔离方式，可通过onEntrypointLoaded回调手动指定入口文件路径：

1. 构建完成后，将所有产物移动到/a/{{buildVersion}}/目录下。
2. 修改index.html中的加载逻辑：

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    // 手动插入指定路径的入口脚本
    const script = document.createElement('script');
    script.src = "/a/{{buildVersion}}/main.dart.js";
    script.type = "application/javascript";
    document.body.appendChild(script);
    
    script.onload = async function() {
      const engine = await engineInitializer.initializeEngine();
      await engine.runApp();
    };
  },
  serviceWorker: {
    serviceWorkerVersion: serviceWorkerVersion,
    serviceWorkerUrl: "/a/{{buildVersion}}/flutter_service_worker.js?v=" + serviceWorkerVersion
  }
});

这个方法绕开默认入口加载逻辑，同时保留版本目录的缓存隔离效果。

方案3：纯基础设施层缓存规则优化 #

无需修改代码或构建脚本，仅通过Cloudflare和浏览器缓存头配置解决：

• Cloudflare配置：
  • 对index.html设置Cache-Control: no-cache, no-store, must-revalidate，强制每次请求回源获取最新版本。
  • 对所有带哈希后缀的静态资源设置Cache-Control: public, max-age=31536000, immutable，利用哈希确保缓存有效性。
• 浏览器侧：完全依赖上述缓存头自动处理缓存失效，无需额外配置。

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