React Loadable 如何处理多个包中使用的代码？答案

【问题标题】：How does React Loadable handle code used in multiple bundles?React Loadable 如何处理多个包中使用的代码？
【发布时间】：2018-05-04 09:38:13
【问题描述】：

我在我的 Create React App 中使用 React Loadable 进行代码拆分

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

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

PageA.js：

import Breadcrumbs from '../Breadcrumbs.js'

PageB.js：

import Breadcrumbs from '../Breadcrumbs.js'

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

【问题讨论】：

【解决方案1】：

React-loadable 不是进行代码拆分的人，而是您的捆绑程序（webpack 等）。

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

使用 Webpack 版本 4，有一个替代 common-chunk-split，称为 splitChunks，您可以在此处阅读：webpack 4: Code Splitting, chunk graph and the splitChunks optimization

【讨论】：