我在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 回答
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