1

Im doing code splitting with React Loadable in my Create React App

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

How does React Loadable use code that is used in multiple bundles?

Say I have 2 bundles, pageA and pageB and both use a Breadcrumbs component:

PageA.js:

import Breadcrumbs from '../Breadcrumbs.js'

PageB.js:

import Breadcrumbs from '../Breadcrumbs.js'

The Breadcrumbs component must be being added to both bundles. If I visit PageA first and then navigate to PageB, is the Breadcrumbs downloaded again? Or is React Loadable / Webpack smart enough to know it already has that component downloaded in the other bundle?

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • Actually the right question to ask is how webpack handles async imports, `react-loadeable` just uses it. – felixmosh May 05 '18 at 08:07

1 Answers1

0

React-loadable is not the one that do the code splitting but your bundler (webpack and such).

You can configure webpack (not ver 4) to use common-chunk-split to achieve your requirement.

With Webpack ver 4, there is an alternative to common-chunk-split, called splitChunks, you can read about it here: webpack 4: Code Splitting, chunk graph and the splitChunks optimization

felixmosh
  • 32,615
  • 9
  • 69
  • 88