webpack - 如何使用 CRA + 代码拆分避免块中的重复代码

Question

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

...
        
import Hello from './Hello'
        
class A extends Component {}

和

...
    
import Hello from './Hello'
    
class B extends Component {}

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

...
    
import Loadable from 'react-loadable'
    
const AsyncA = Loadable({
    loader: () => import(/* webpackChunkName: "A" */ "./A"),
    loading: () => <div>Generic Loading Message</div>
});

const AsyncB = Loadable({
    loader: () => import(/* webpackChunkName: "B" */ "./B"),
    loading: () => <div>Generic Loading Message</div>
});

“A”和“B”块都将包含“Hello”代码，将重复的代码传递给浏览器。

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

虽然这是一种选择，但它还有很多不足之处。本指南演示了如何配置 webpack 以创建一个“通用”模块，这看起来很理想，因为它不需要任何代码重组来达到预期的效果。

但是，webpack 配置不受 CRA 限制。

这里有更好的解决方案吗？