React Code-Splitting

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

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

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