DEV Community

Takuya Kikuchi
Takuya Kikuchi

Posted on

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

Discussion (0)