React Loadable如何处理多个包中使用的代码?

时间:2018-05-04 09:38:14

标签: webpack react-loadable

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

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

React Loadable如何使用多个捆绑包中使用的代码?

假设我有2个捆绑包,pageA和pageB,并且都使用Breadcrumbs组件:

PageA.js:

import Breadcrumbs from '../Breadcrumbs.js'

PageB.js:

import Breadcrumbs from '../Breadcrumbs.js'

必须将Breadcrumbs组件添加到两个包中。如果我先访问PageA然后导航到PageB,那么Breadcrumbs会再次下载吗?或者React Loadable / Webpack足够聪明,知道它已经在另一个包中下载了该组件吗?

1 个答案:

答案 0 :(得分:0)

React-loadable不是代码拆分的,而是你的捆绑包(webpack等)。

您可以配置webpack(非ver 4)以使用common-chunk-split来满足您的要求。

使用Webpack ver 4,有common-chunk-split替代splitChunks,您可以在此处阅读:webpack 4: Code Splitting, chunk graph and the splitChunks optimization