Just landed my PR addings docs about code splitting to the @reactjs docs

  • If you’re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.
  • 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.
  • While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.
  • For that you will need Loadable wraps dynamic imports in a nice, React-friendly API for introducing code splitting into your app at a given component.
  • Here’s an example of how to setup route-based code splitting into your app using libraries like React Router and React Loadable.

Most React apps will have their files “bundled” using tools like
Webpack or Browserify.
Bundling is the process of following imported files and merging them into a
single file: a “bundle”. This bundle can then be included on a webpage to load
an entire app at once.

Most React apps will have their files “bundled” using tools like Webpack or Browserify. Bundling is the process of following imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once.

App:

// app.js import { add } from ‘./math.js’ ; console. log ( add ( 16 , 26 ) ) ; // 42

// math.js export function add (a, b) { return a + b; }

Bundle:

function add (a, b) { return a + b; } console. log ( add ( 16 , 26 ) ) ; // 42

If you’re using Create React App, Next.js, Gatsby, or a similar tool, you will have a Webpack setup out of the box to bundle your app.

If you aren’t, you’ll need to setup bundling yourself. For example, see the Installation and Getting Started guides on the Webpack docs.

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…

Code-Splitting