Code Splitting
Last updated
Was this helpful?
Last updated
Was this helpful?
Bundling is great, but as your app grows, your bundle will grow too. Especially if you are including large third-party libraries. You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load.
To avoid winding up with a large bundle, it’s good to get ahead of the problem and start “splitting” your bundle. is a feature supported by bundlers like Webpack and Browserify (via ) which can create multiple bundles that can be dynamically loaded at runtime.
React.lazy
and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we still recommend . It has a nice .
The React.lazy
function lets you render a dynamic import as a regular component.
This will automatically load the bundle containing the OtherComponent
when this component gets rendered.
React.lazy
takes a function that must call a dynamic import()
. This must return a Promise
which resolves to a module with a default
export containing a React component.
Reference:
For more details :