未捕获的 ChunkLoadError：正在加载块 | 加载 CDN 模块时的模块联合 webpack 5

Question

为主机和远程应用程序实现了模块联合。对于远程应用程序，联合模块上传到 CDN 上。在本地主机上访问联合模块时，主机应用程序工作正常，但在使用 CDN 链接访问模块时出现错误。联合模块延迟加载期间存在错误：

未捕获的 ChunkLoadError：加载块 531 失败。

以下是我在 webpack（主机应用程序）中的模块联合配置：

**new ModuleFederationPlugin({
            name: 'common',
            filename: 'common',
            remotes: {
sampleAppModule: sampleApp@http://CDN-link/remoteEntry.js
// sampleAppModule: sampleApp@http://localhost:8000/remoteEntry.js (this works fine)
            },
            shared: [sharedDependencies],
        })**

直接访问CDN链接即可看到联邦模块。另外，在获取remoteEntry.js 文件时成功获得200 状态，但在延迟加载远程模块时出现错误。

Answer 1

当远程模块的公共路径配置错误时，可能会出现此异常，因此即使应用程序可以访问remoteEntry，它也无法找到其他块，因为它尝试从错误的位置获取它们。使用代码分割，您需要在遥控器上设置动态公共路径。当设置Automatic publicPath时，Webpack 可以自动确定公共路径。如果是这种情况，您只需像这样更新遥控器的 webpack 配置即可。

webpack.config.js

module.exports = {
  ...
  output: {
    ...
    publicPath: 'auto',
  },
};

如果错误间歇性出现，则导致此异常的另一个原因是 CDN 缓存配置错误。通常使用输出文件名来配置 Webpack，具体取决于内容哈希并结合 CDN 上缓存内容的长过期时间。此配置可以优化性能，因为用户浏览器将在本地缓存静态资源并将这些文件用于后续请求。

当使用 Webpack Module Federation 时，remoteEntry.js代表远程模块的稳定入口点。因此，即使其内容发生变化，其名称也不会在后续版本中更改。它在每次构建时都会更新，因为它包含其他文件的“映射”，这些文件的名称是使用内容哈希动态生成的。因此，永远不应该缓存该文件，从而允许浏览器在部署时下载新文件。

您可以通过在服务器上remoteEntry.js设置Cache-Control标头来避免缓存。Cache-Control: max-age=0仅在文件上设置此标头remoteEntry.js而不是将其设置为服务器默认值非常重要，否则每个文件都不会被缓存。

或者，如果您可以使该文件的 CDN 缓存失效，则可以在每次部署Cache-Control: max-age=0, s-maxage=<time>时设置 CDN 缓存并使之失效remoteEntry.js。此标头仅允许在共享缓存（例如 CDN）上进行缓存。这样，您的 CDN 就可以为远程条目的请求提供服务，从而避免向服务器发出请求。