- 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.
Continue reading “Just landed my PR addings docs about code splitting to the @reactjs docs”