如何避免微前端（Single-spa）应用中importmap.json的缓存问题

一、importmap.json缓存不更新问题 #

原因 #

CloudFront边缘节点和浏览器默认会缓存静态文件，importmap.json未配置针对性缓存策略，导致旧版本被长期缓存，无法自动获取更新后的内容。

解决方法 #

1. 调整CloudFront缓存策略
   • 针对importmap.json单独创建缓存行为，设置短TTL（比如1分钟），同时配置响应头Cache-Control: no-cache, must-revalidate，强制浏览器每次请求都验证资源有效性。
   • 在CloudFront控制台的「缓存策略」中新增自定义规则，指定路径匹配/importmap.json，设置低缓存时长，避免边缘节点留存旧缓存。
2. CI/CD补充缓存失效步骤
   • Jenkins构建完成后，调用CloudFront API发起缓存失效请求，指定路径/importmap.json，确保边缘节点的旧缓存被立即清除。
3. 可选：文件版本化增强
   • 将importmap.json改为带版本号的命名方式（如importmap.v282.json），同时更新index.html中引用该文件的路径。这样每次更新时，文件名变化会触发浏览器直接请求新文件，彻底避免缓存问题。注意同步调整index.html的缓存策略（设置为不缓存或短TTL）。

二、single-spa-router路由跳转白屏问题 #

排查与解决方向 #

1. 检查路由匹配规则
   • 确保root-config和子应用的路由前缀无重叠，root-config中activeWhen配置正确关联子应用：

     registerApplication({
       name: "@my-org/app1",
       app: () => System.import("app1"),
       activeWhen: ["/app1"],
     });
     registerApplication({
       name: "@my-org/app2",
       app: () => System.import("app2"),
       activeWhen: ["/app2"],
     });
     

2. 校验子应用生命周期函数
   • 检查React子应用的mount/unmount函数是否正确实现，确保挂载时渲染到指定容器，卸载时清理DOM和事件监听：

     export async function mount(props) {
       ReactDOM.render(<App {...props} />, props.domElement);
     }
     export async function unmount(props) {
       ReactDOM.unmountComponentAtNode(props.domElement);
     }
     

3. 排查资源加载状态
   • 打开浏览器开发者工具Network面板，查看跳转时app2的资源是否加载成功。若出现404，检查importmap中app2的路径是否正确，同时确认S3存储桶和CloudFront的权限配置，确保文件可被公开访问。
4. 检查single-spa-router配置
   • 确保root-config中正确使用SingleSpaRouter组件关联子应用路由：

     import { SingleSpaRouter, Route } from "single-spa-router";
     
     export function Root(props) {
       return (
         <SingleSpaRouter>
           <Route path="/app1" appName="@my-org/app1" />
           <Route path="/app2" appName="@my-org/app2" />
         </SingleSpaRouter>
       );
     }
     

5. 确认React版本一致性
   • 检查两个子应用和root-config使用的React版本是否统一（当前均为17.0.2），版本不一致可能引发渲染冲突导致白屏。

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