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.
  • When Webpack comes across this syntax, it automatically start code-splitting your app.
  • You want to make sure you choose places that will split bundles evenly, but not be terribly interuptive to the users of your app.
  • 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.

But if your app keeps growing, eventually you’ll end up with a large bundle. So it’s good to get ahead…

Code-Splitting