Webpack Module Federation：如何避免缓存remoteEntry.js文件？

微前端场景下，remoteEntry.js缓存导致无法获取最新资源引用是常见问题，以下是几种可靠的解决办法：

1. 配置HTTP缓存控制头 #

通过服务器或CDN设置严格的缓存策略，强制浏览器每次请求都验证文件有效性，或直接禁止缓存：

• 针对remoteEntry.js设置响应头：Cache-Control: no-cache, no-store, must-revalidate
  • no-cache：浏览器可以缓存文件，但每次请求必须向服务器验证文件是否更新
  • no-store：完全禁止浏览器和中间缓存存储该文件
  • must-revalidate：文件过期后必须重新向服务器获取，不能使用过期缓存
• 额外添加Pragma: no-cache和Expires: 0兼容旧版浏览器

示例Nginx配置片段：

location /remoteEntry.js {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

2. 为文件名添加哈希/版本后缀 #

部署微前端应用时，将remoteEntry.js重命名为包含构建哈希或版本号的文件名（如remoteEntry.7f9d2.js或remoteEntry.v1.2.3.js），同时：

• 在主应用中通过动态方式获取最新文件名：比如从配置接口拉取当前MFE的版本对应的资源文件名，或在部署流程中自动更新主应用的加载配置
• 这种方式利用浏览器对不同文件名的资源会重新请求的特性，彻底避免缓存冲突，同时不影响其他资源的缓存效率

3. 动态加载时添加版本化查询参数 #

在加载remoteEntry.js的URL后添加带版本标识的查询参数（避免用随机数，否则会导致不必要的重复请求）：

// 从配置或接口获取当前MFE版本号
const mfeVersion = '1.2.3';
// 动态加载时拼接版本参数
import(`http://mfe-domain/remoteEntry.js?v=${mfeVersion}`)
  .then(() => {
    // 初始化微前端
  });

注意：部分CDN可能会忽略查询参数缓存文件，此时需要确保CDN配置为包含查询参数作为缓存键的一部分。

4. 利用Service Worker主动更新缓存 #

如果你的应用使用Service Worker，可以在MFE部署后，通过Service Worker检测remoteEntry.js的新版本：

• 在Service Worker中监听fetch事件，对比服务器上的remoteEntry.js哈希值
• 发现更新后，主动更新缓存，并通知主应用刷新或重新加载该资源
• 这种方式适合需要更精细化缓存控制的复杂场景，但实现成本相对较高

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