Search code examples
webpackreact-loadable

How does React Loadable handle code used in multiple bundles?

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?

Solution

  • 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