如何在React模块联邦中为宿主与子模块实现缓存清除及缓存击穿？

嘿，太懂你这种头疼的感觉了！我前阵子在模块联邦项目里也踩过几乎一模一样的缓存坑——明明加了contenthash，部署新版本后用户还是得硬刷才能看到更新，简直头大。咱们来一步步拆解问题，把这个事儿解决掉。

首先，先看你给出的Webpack配置，问题其实已经露出马脚了：你的子模块（还有宿主模块）都没给chunkFilename加上contenthash！

你看，现在你只给filename（入口文件）加了哈希，但那些异步加载的chunk文件（比如路由懒加载的组件、动态导入的模块）用的还是固定的[name].chunk.js，这些文件的名字不会随内容变化，浏览器自然会一直缓存旧版本。

第一步：补全Webpack配置，给所有输出文件加上Content Hash #

先把宿主和子模块的Webpack output配置补全，确保chunkFilename也带上[contenthash]：

宿主模块修正后：

// Host module
output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js', // 补上contenthash！
  publicPath: '/',
  clean: true,
},

子模块修正后：

// child module
output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js', // 同样补上！
  publicPath: '/someChildName/',
  clean: true,
},

这一步是基础——所有静态资源的文件名都要和内容绑定，内容变则文件名变，浏览器才会主动请求新文件，而不是用缓存的旧文件。

第二步：搞定HTML文件的缓存策略（最容易忽略的点！） #

就算你给JS文件加了哈希，如果浏览器缓存了旧的HTML文件，那HTML里引用的还是旧的JS哈希路径，用户照样看不到新内容！

所以必须给入口HTML文件设置严格的缓存规则：

• 给HTML文件设置Cache-Control: no-cache, no-store, must-revalidate，或者max-age=0，强制浏览器每次请求HTML时都去服务器验证是否有更新，不能直接用本地缓存。
• 反过来，给所有带Content Hash的JS/CSS文件设置Cache-Control: public, max-age=31536000, immutable——因为文件名和内容绑定，只要内容不变，文件名就不会变，完全可以让浏览器永久缓存这些文件，既减轻服务器压力，又避免重复请求。

第三步：模块联邦专属的注意事项 #

因为用了模块联邦，还要确保跨模块的引用逻辑不会拖后腿：

• 不要在宿主的remotes配置里硬编码子模块的JS文件名（比如写死http://xxx/someChildName/main.abc123.js），要通过模块联邦的容器加载逻辑动态获取最新的文件——Webpack会自动帮你处理带哈希的文件引用，只要你用标准的remotes配置（比如childApp: "childApp@http://xxx/someChildName/remoteEntry.js"）。
• 子模块的remoteEntry.js文件也要注意缓存！这个文件是模块联邦的入口，同样需要给它加上Content Hash，或者设置和HTML一样的缓存策略，确保宿主能获取到最新的子模块入口。

最后：验证是否生效 #

部署新代码后，按这个流程检查：

1. 打开浏览器开发者工具，看「网络」面板，确认所有JS文件的文件名都带Content Hash。
2. 刷新页面（不用硬刷），看是否加载了新的哈希文件名的JS文件。
3. 检查HTML和JS文件的响应头，确认缓存策略配置正确。

这样一套操作下来，就能彻底解决浏览器缓存旧版本的问题，不用再让用户手动硬刷了！

备注：内容来源于stack exchange，提问作者YZ Po