Getting started with code splitting using react-loadable • matwrites

  • One of the most popular ways of making our React app load faster is code-splitting.
  • It has a huge impact on the performance by not letting the user download the whole app with vendors at once (we can easily achieve bundle size around ~2mb by adding most common tools and libraries).
  • One of the methods to split our code is to bundle vendors and the app separately.
  • That way our end-user doesn’t need to download the whole bundle and is being served with required chunks of the package when they’re really needed.
  • What if we split our bundle around the components that actually import specific bundle parts instead of splitting the code around routes at which they are required?

Developing and building our client-side apps has never been easier. NPM and it’s registry is giving us an access to thousands of thousands of packages. Installing them and attaching to the project is super easy today, but it has one major disadvantage: increasing bundle size.

Developing and building our client-side apps has never been easier. NPM and it’s registry is giving us an access to thousands of thousands of packages. Installing them and attaching to the project is super easy today, but it has one major disadvantage: increasing bundle size.

Why do we care about page speed?

Because we want to deliver the best possible experience to our end users. Doesn’t matter which device they’re using – a smartphone, smartwatch, tablet or desktop computer. The site has to work and has to load quicker than ever – nowadays web users have high expectations!

One of the most popular ways of making our React app load faster is code-splitting. It allows us to load needed parts of the page when they are actually required by the application, not on the initial request. It has a huge impact on the performance by not letting the user download the whole app with vendors at once (we can easily achieve bundle size around ~2mb by adding most common tools and libraries).

One of the methods to split our code is to bundle vendors and the app separately. There is a pattern easily achievable using Webpack – loading code chunks (fragments) for vendors and serve them accordingly to the visited route. That way our end-user doesn’t need to download the whole bundle and is being served with required chunks of the package when they’re really needed.

That’s one way of…

Getting started with code splitting using react-loadable • matwrites