Code splitting: Does this improve performance of React apps?
Tags: webdev, react, performance
Published: 2021-09-29 07:15:39

There are several ways to improve the performance of React applications. One of them is to make it *look* faster to users. This is different from compressing asset files or making animations and transitions smoother.

This article is about one such technique to improve the **perceived performance** of a React application. Although there are other ways to improve performance, this article will focus on implementing code splitting in React with the Parcel bundler.

## What does code splitting mean?
As per MDN,

> Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.
 
This means when a page initially loads, a smaller bundle will be retrieved from the server. Any additional code will be lazy loaded as needed. While the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced.

## Where should I use it? And why?
By separating code into smaller bundles, load time is reduced, thus increasing performance. Even if you didn't change the code logic you wrote, the application certainly will seem faster. There is a link to an MDN page on perceived performance at the end of this article. 

That said, it does not mean you should split every component into bundles. Fetching a lot of small bundles is not that different from fetching a single large bundle. Whether it's reducing the number of requests or reducing time for initial load, both have their pros and cons.

Your application might have components or files. The ones that might cause a page to load slowly are candidates for code splitting. For example, if there is a page with multiple images, split it. The page with images can load in the background while the other pages load before it and become interactive.

React has some good features to help implement code splitting.

## Code splitting React components
There is no need for a configuration file to use code splitting with Parcel. Using the dynamic import syntax, `React.lazy`, and `Suspense`, we can code split a React component.

First, you need a React project. I wrote an [article](https://niharraoteblog.netlify.app/how-to-create-a-minimal-react-and-parcel-app-in-5-steps) on creating a minimal React project with Parcel.

There is another package you need to install in addition to the dependencies of that project. It is a Babel plugin for parsing any dynamic imports. Install this in your project as well.

![Installing additional Babel plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eecmz3xla5le97ctiv8l.png)

And add it to the Babel config file.

![Updated Babel configuration file after installing plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t71zt34hvvsb4wxtu2y.png)

Create another component `Message.js` in the `/src` folder. A simple component will be enough to showcase how code splitting works in React.

![Message component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a1xsd4ko1pe43gotdmt.png)

Now import it with the dynamic import syntax along with `React.lazy` and `Suspense`.

![Importing packages along with Message component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zk63b1d1jarn4poktod.png)

The official React documentation offers an excellent explanation on the usage of `React.lazy` and `Suspense` for code splitting. A link to that page is also available at the end of this article.

Everything is ready. Now let's run the project and compare the results

![Running project scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q203dsebno05jc8jr8ow.png)

## How do I know it works?
After you run the project, it should open at `http://localhost:1234`. Open the developer console and switch to the network tab.

![Screenshot of network tab showing running app with lazy loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi2bbdniosioxww9psyz.png)

Yours might look a bit different, but you should see a separate bundle for the `Message` component.

It will be interesting to see how it might look without code splitting the `Message` component.

If you comment out the code splitting parts, import and use the `Message` component normally:

![Commenting out lazy loading and Suspense code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk0tt3ksr5sfj3g5e93h.png)

And look at the network tab of the developer console again, you will not see that message bundle.

![Screenshot of network tab showing running app after commenting out lazy loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy2kuu74jd7f1u6qgk83.jpg)

## Resources
This is how you would implement code splitting in React with Parcel. Here are links to additional resources that might help.

- [Definition of code splitting by MDN](https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting) 
- [Read about Perceived Performance on MDN](https://developer.mozilla.org/en-US/docs/Learn/Performance/Perceived_performance)
- [Webpack documentation on implementing code splitting](https://webpack.js.org/guides/code-splitting/ )
- [Parcel documentation on code splitting](https://v2.parceljs.org/features/code-splitting/)
- [Official React documentation about code splitting](https://reactjs.org/docs/code-splitting.html)
- [A more in-depth article by Smashing Magazine on improving performance in React apps](https://www.smashingmagazine.com/2020/07/methods-performance-react-apps/)