Webpack 如何使用CRA+避免重复代码；代码拆分

例如，假设我们有两个具有公共导入的组件：

。。。
从“./Hello”导入Hello
类扩展组件{}

及

。。。
从“./Hello”导入Hello
类B扩展组件{}

然后将这些组件异步加载到另一个组件中，如下所示：

。。。
从“react Loadable”导入可加载
const AsyncA=可加载({
加载程序：（）=>导入（/*WebPackageChunkName:“A”*/“/A”），
加载：（）=>一般加载消息
});
const AsyncB=可加载({
加载程序：（）=>导入（/*WebPackageChunkName:“B”*/“/B”），
加载：（）=>一般加载消息
});

“A”和“B”块都将包含“Hello”代码，从而向浏览器提供重复的代码

在我的研究中，我已经确定，如果在任何其他非异步加载的组件中导入“Hello”，则不会发生这种情况。在这种情况下，它被捆绑到“main”块中，而不是“A”和“B”块中

虽然这是一种选择，但仍有许多地方有待改进。这演示了如何配置webpack来创建一个“公共”模块，这似乎很理想，因为它不需要任何代码重组来实现所需的效果

但是，CRA禁止使用网页包配置

这里有更好的解决方案吗