React Code-Splitting

Code-Splitting – React

Bundling

• the process of following imported files and merging them into a single file ⇒ This bundle can be included on the webpage to load an entire app at once
• Create React App, Next.js, Gatsby, or a similar tool having a bundle tool setup already

Code Splitting

• App grows, bundle grows too ⇒ "splitting" bundle
• Code splitting is a feature supported by a bundler which create multiple bundles that can be loaded dynamically at runtime
• "lazy-load": just things needed currently
• Good for performance: reduce the amount of code needed during the initial load

import()

• When Webpack comes across this syntax, it automatically code-split your app if you are suing Create React App, also Next.js

React.lazy

• lets you render a dynamic import as a regular component
• Load the bundle when the lazy component is first rendered
• The lazy component should be rendered in a Suspense component ⇒ fallback content while loading lazy component

Error boundaries

• use it anywhere above your lazy components

Route-based code splitting

• A good place to start is with routes