如何避免在微前端（Single-spa）应用程序中对 importmap.js 进行缓存

Question

通过 AWS Cloudfront 分发部署在 S3 存储桶中的 2 个微前端和根应用程序。

在我的 s3 存储桶中文件已存储在以下结构中

• app1_281（反应微前端）
• app2_13（反应微前端）
• my-org-name-root-config.js
• 我的组织名称-root-congig.js.map
• 导入map.json
• index.html

导入map.json

{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
    "@my-org-name/root-config": "https://abcd.cloudfront.net/my-org-name-root-config.js",
    "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js",
    "app1": "https://abcd.cloudfront.net/app1_281/app1.js",
    "app2": "https://abcd.cloudfront.net/app2_13/app2.js"
  }
}

我使用 jenkins 进行 CI-CD，假设我构建了 app1，那么新的构建号将附加到 app1 的文件夹路径，如下所示，在 importmap.json 中。

"app1": "https://abcd.cloudfront.net/app1_282/app1.js",

在浏览器中检查导入映射时会出现挑战。它始终显示旧版本（281 而不是 282），并且需要硬刷新才能查看更新的导入映射。

当使用 single-spa-router 从 app1 路由到 app2 时，这个问题也会出现问题，导致白屏。

谢谢

Answer 1

这并不是真正的

single-spa

问题，而是浏览器缓存问题，可以使用常用技术解决。选择您喜欢的一种并将其实施到您的 CI/CD 中。就个人而言，我将微前端部署在 Kubernetes Nginx Pod 中，配置为包含设置为

Cache-Control

的

no-cache

标头。默认情况下，Nginx 会计算所有文件的 ETag，这样就完成了解决方案。