我试图使用Webpack的联邦模块插件导入两个模块,设置如下:
new ModuleFederationPlugin({
name: "module-a",
filename: "remoteEntry.js",
library: { type: "var", name: "module_a" },
exposes: {
"./lib": "./bootstrap",
},
})
以及模块-b的几乎相同的设置。
但是,由于两个联邦模块在根模块上使用相同的文件名(例如bootstrap.ts
),所以都分配了相同的chunkId ("626",这只是使用numberHash函数的'./node_modules/ts-loader/index.js!./bootstrap.ts'
的散列)。
在正常的webpack构建中,每个块的文件路径都是唯一的,但是由于我有多个联邦模块公开一个./bootstrap.ts
,所以每个模块都获得相同的块id (本例中为656)。这会导致运行时中的id冲突,因为两个联邦模块都请求相同的块,因此存在一个争用条件,其中第一个要请求的id 626块由两个联邦模块使用。
我尝试设置outputs.chunkFilename: "module-a-[id].js"
(同样也设置了module-b
),但是这似乎并没有改变chunkId,而且在网络活动中,我可以看到两个块中只有一个被加载并被(错误地)导入到两个联邦模块中。例如,在“网络”选项卡中,我可以看到,module-a-656.js
或module-b-656.js
都会被加载--但永远不会同时加载,而且加载的任何文件的内容最终都会导入到两个模块中。
阅读代码后,它看起来像是由DeterministicChunkIdsPlugin设置的块id,它不公开一个hashSalt选项或使用options.hashSalt
(也就是说,为了用联邦模块的名称对id进行盐化),所以似乎没有办法改变散列函数以避免id冲突。
有什么方法可以防止这种与联邦模块的id冲突吗?(除了手动检查应用程序可能要导入的联邦模块没有一个公开相同的文件名外)
发布于 2022-02-15 18:56:39
我询问的争用条件是因为(在撰写本文时)的一个无文档特性,即Federated插件使用package.json
文件中的name字段来解析联邦模块中的资产。否则,来自不同联邦模块的具有公共路径(例如src/index.js
)的资产就会变得模糊,并创建一个取决于网络请求完成顺序的竞争条件。
在对这个插件的测试中,我将一个模块复制到另一个文件夹中,对副本做了一个小小的更改,并试图以联邦模块的身份导入两个副本--结果发现任何模块的remoteEntry.js
网络请求的内容都被注入页面上的两个模块中。
这是一个回购演示了使用联邦模块的特殊“理解”。
https://stackoverflow.com/questions/71084289
复制相似问题