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 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.
And add it to the Babel config file.
Create another component Message.js in the /src folder. A simple component will be enough to showcase how code splitting works in React.
Now import it with the dynamic import syntax along with React.lazy and Suspense.
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
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.
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:
And look at the network tab of the developer console again, you will not see that message bundle.
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
- Read about Perceived Performance on MDN
- Webpack documentation on implementing code splitting
- Parcel documentation on code splitting
- Official React documentation about code splitting
- A more in-depth article by Smashing Magazine on improving performance in React apps
Top comments (0)