未登录ChunkLoadError:在加载CDN模块时加载块模块联邦webpack 5
主机和远程应用程序模块联合会的实现。对于远程应用程序，联邦模块被上传到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状态，但是在延迟加载远程模块时会出现错误。
回答 1
Stack Overflow用户
发布于 2022-02-24 09:49:35
当远程模块的公共路径配置错误时，可能会出现此异常，因此即使应用程序可以访问remoteEntry，也无法找到其他块，因为它试图从错误的位置获取它们。使用代码拆分，您需要在远程服务器上设置一个动态公共路径。Webpack可以在设置自动publicPath时自动确定公共路径。如果是这样的话，您只需要像这样更新遥控器的webpack配置。
webpack.config.js
module.exports = {
...
output: {
...
publicPath: 'auto',
},
};如果出现间歇性错误，则导致此异常的另一个原因是CDN缓存配置错误。通常使用输出文件名配置Webpack，这取决于内容散列，以及CDN上缓存内容的长过期时间。此配置优化性能，因为用户浏览器将在本地缓存静态资产，并将这些文件用于后续请求。
当使用Webpack模块联邦时，remoteEntry.js表示远程模块的稳定入口点。出于这个原因，即使其内容发生了更改，它的名称也不会在后续构建中更改。它在每次构建时都会被更新，因为它包含其他文件的“映射”，这些文件的名称是用内容哈希动态生成的。因此，这个文件永远不应该被缓存，允许浏览器在部署发生时下载新文件。
您可以通过在服务器上为remoteEntry.js设置一个高速缓存控制头(如Cache-Control: max-age=0 )来缓存它。非常重要的是，只在remoteEntry.js文件上设置此标头，而不是将其设置为服务器默认设置，否则每个文件都不会被缓存。
或者，如果可以使此文件的CDN缓存失效，则可以在每次部署时设置Cache-Control: max-age=0, s-maxage=<time>并使remoteEntry.js的CDN缓存失效。此标头只允许在共享缓存(如CDN )上缓存。这样，CDN就可以向远程入口提供请求，避免将请求请求到服务器。
https://stackoverflow.com/questions/69632866
复制相似问题
腾讯云开发者
