WP5 模块联合：remoteEntry.js 缓存

Question

使用 Webpack 5 模块联合，如果远程入口被修改，你不需要重新部署主模块/应用程序，当浏览器请求时，将加载最新版本的模块。

我想知道：由于远程 URL 保持不变（例如http://localhost:8081/remoteEntry.js），浏览器可能会缓存文件和每次加载主模块时加载的缓存版本。另一方面，如果您为远程条目添加缓存破坏，您将没有缓存。

假设有一个使用 Webpack 5 Module federation 的具有微前端架构的应用程序。有一个远程微前端，其配置如下：

output: {
  publicPath: "http://localhost:8081/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "app1",
    filename: "remoteEntry.js",
    exposes: {
      "./Component1": "./src/Component1",
      "./someModule1": "./src/someModule1",
    },
  })
]

然后主模块配置：

output: {
  publicPath: "http://localhost:8080/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "mainApp",
    filename: "remoteEntry.js",
    remotes: {
      app1: "app1@http://localhost:8081/remoteEntry.js"
    }
  })
]

这两个模块都部署在生产环境中。

然后我改变Component1从app1和部署app1模块。

如何处理远程模块缓存？

更新：

在我的情况下，浏览器似乎使用启发式缓存（https://tools.ietf.org/html/rfc7234#section-4.2.2），remoteEntry.js因为服务器不提供明确的到期时间。

因此，当remoteEntry.js更新时，主应用程序仍会从缓存中加载该文件，该文件可以缓存数周。对于块，这不是问题，因为 webpack 可以配置为在文件名中包含哈希。

因为remoteEntry.js我看到 2 个选项：

• 缓存破坏
• 明确指定缓存控制

你认为这是一条路吗？

Answer 1

缓存清除意味着重新构建（或者至少是后处理）主应用程序包，这是模块联盟试图避免的问题之一。

因此，考虑到remoteEntry.js通常是一个小文件，最好的解决方案是为此文件应用特定的缓存控制，这样它就永远不会被缓存。

使用nginx，可以这样完成：

location ~ .*remoteEntry.js$ {
    expires -1;
    add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}