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”块中。

虽然这是一个选择，但仍有很多不足之处。 guide演示了如何配置webpack来创建“通用”模块，这似乎很理想，因为它不需要任何代码重组即可达到预期的效果。

但是，Webpack配置超出了CRA的限制。

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

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

0 个答案: