如何在宿主应用中缓存remoteEntry.js，仅内容变更时重新加载？

核心实现逻辑是给remoteEntry文件绑定内容哈希标识，配合分层缓存规则，只有内容变更时才触发重新加载，否则直接读取本地缓存。

1. 远程应用侧构建配置调整 #

首先需要让构建产物的remoteEntry文件名携带内容哈希，同时生成版本映射文件：

• 修改webpack配置的output和ModuleFederationPlugin规则：

// 远程应用 webpack.config.js
module.exports = {
  output: {
    // 其余配置保持不变
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
    clean: true // 构建前清空旧的输出目录
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      // 给remoteEntry文件名加上内容哈希
      filename: 'remoteEntry.[contenthash].js',
      exposes: {
        // 保持你原有暴露的模块配置不变
      },
      shared: {
        // 保持你原有共享依赖配置不变
      }
    })
  ]
}

• 新增构建产物清单生成配置，每次构建自动记录最新的remoteEntry文件名，推荐用webpack-assets-manifest插件实现：

// 远程应用 webpack.config.js 追加插件配置
const WebpackAssetsManifest = require('webpack-assets-manifest');

module.exports = {
  plugins: [
    // 放在ModuleFederationPlugin之后
    new WebpackAssetsManifest({
      output: 'remote-manifest.json',
      publicPath: true
    })
  ]
}

构建完成后会自动生成remote-manifest.json文件，内部包含"remoteEntry.js": "remoteEntry.xxxxxxx.js"的映射关系。

2. 宿主应用侧动态加载remoteEntry #

不要在webpack配置中写死remoteEntry的固定地址，改为运行时动态拉取最新地址再加载：

• 先修改宿主应用的ModuleFederationPlugin配置，移除固定remote地址：

// 宿主应用 webpack.config.js
new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    // 替换原有写死的远程地址配置
    remoteApp: 'remoteApp@[window.remoteAppEntryUrl]'
  },
  // 其余配置保持不变
})

• 改造宿主应用入口逻辑，先拉取清单再加载远程资源：

// 宿主应用入口文件 main.js
const loadRemoteEntry = async () => {
  // 请求远程应用的manifest文件，该文件配置协商缓存
  const manifestRes = await fetch('https://你的远程应用部署域名/remote-manifest.json');
  const manifest = await manifestRes.json();
  // 拼接当前最新的remoteEntry完整地址
  window.remoteAppEntryUrl = `https://你的远程应用部署域名/${manifest['remoteEntry.js']}`;
  // 动态插入remoteEntry脚本
  const script = document.createElement('script');
  script.src = window.remoteAppEntryUrl;
  script.onload = () => {
    // 远程资源加载完成后再初始化宿主应用
    import('./bootstrap');
  };
  document.head.appendChild(script);
};

loadRemoteEntry();

3. 服务器缓存规则配置 #

给两类文件配置不同的缓存策略：

• remote-manifest.json：配置协商缓存，响应头设置为Cache-Control: no-cache，每次请求都会去服务器校验文件是否变更，无变更返回304，有变更返回新内容，保证能拿到最新的remoteEntry地址
• 带哈希后缀的remoteEntry.xxx.js、业务chunk文件：配置强缓存，响应头设置为Cache-Control: public, max-age=31536000, immutable，哈希由文件内容生成，内容不变哈希就不会变，可直接缓存一年无需重复请求

注意事项 #

• 不要直接对无哈希的固定名称remoteEntry.js配置强缓存，否则远程应用发版后，宿主会一直读取旧缓存的远程资源，无法拿到更新
• 如果你不想引入manifest方案，也可以在CI/CD流程中自动给remoteEntry地址拼接查询参数哈希，比如remoteEntry.js?v=xxxxxx，实现效果一致。

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