React Loadable 如何处理多个 bundle 中使用的代码？

Question

我在我的 Create React 应用程序中使用 React Loadable 进行代码拆分

https://github.com/jamiebuilds/react-loadable https://github.com/facebook/create-react-app

React Loadable 如何使用在多个 bundle 中使用的代码？

假设我有 2 个包，pageA 和 pageB，并且都使用 Breadcrumbs 组件：

PageA.js:

import Breadcrumbs from '../Breadcrumbs.js'

PageB.js:

import Breadcrumbs from '../Breadcrumbs.js'

面包屑组件必须添加到两个包中。如果我先访问 PageA 然后导航到 PageB，是否会再次下载面包屑？或者 React Loadable / Webpack 是否足够聪明，知道它已经在另一个包中下载了该组件？

Answer 1

React-loadable 不是进行代码拆分的那个，而是您的捆绑器（webpack 等）。

您可以配置 webpack（不是版本 4）以使用 common-chunk-split 来实现您的要求。

在 Webpack ver 4 中，有一个替代 common-chunk-split 的方法，称为 splitChunks，您可以在这里阅读：webpack 4: Code Splitting, chunk graph and the splitChunks optimization