Steps to decrease your React app initial loading time using code splitting.
We build large-scale apps using React. When building these apps, the major issue we face is app performance. When the app grows larger and larger, the performance might deteriorate. Particularly the initial loading time of the app will be affected more. Initial app loading needs to be fast without showing a blank screen for few seconds to the user. As taking more time to load will create a bad impression for the user.
The major cause for this issue is adding too many components into a single bundle file, so the loading of that bundle file might take more time. To avoid this kind of issue, we need to structure our components in an optimized way. To solve this react itself has a native solution, which is code-splitting and lazy loading. Which allows splitting bundle files into a smaller size.
The best place to introduce code splitting is in routes. Route-based code splitting solve half of the issues. But most of the apps are utilizing only 50% of the advantages of code splitting.
Are we structuring the components properly when using code splitting? We can see why and how to fix it using some code samples. For that, we are going to use a sample React app with some UI components.
In the below screenshot, we can see a dashboard component, which has multiple tabs. Each tab has multiple components.
The Dashboard component uses route-based code splitting as the below code.
The Dashboard component contains some sub-components like Sales, Profit, Chart, Tiles and Trends like the below code
We have split the code into routes. so when the app is bundled, we get a separate build file for each route as below
From the above image, the file with a size 405.1 KB is the dashboard component and other files are for the Header, sidebar, other components and CSS.
I have hosted the app in Netlify to test the performance. As if we test the app locally we cannot find the difference. When I tested the hosted app with GTmetrix, the dashboard screen took 2.9 seconds to load, Check the below image for frame by frame loading.
The dashboard component is the initial page for this app, so when we hit the App URL 405.1KB file will be loaded along with the header and sidebar.
Initially, the User will view only the Sales tab, But our sample app dashboard component has multiple tabs. So the browser is downloading other tabs code also, it is delaying the first paint for the user. To decrease the initial load time, we need to make some changes to the dashboard component as below
Here I have imported each tab component with lazy loading and wrapped the component with suspense.
Here I have added multiple suspense for better understanding, but you can use single suspense for all the components.
I have not done any changes to route level code-splitting. When we build the app, some extra files are added as we have lazy-loaded each tab in the dashboard component. Check the below image for build file separation.
Now let's test the app with GTmetrix again with the above changes. See the App performance in the below image
As you can see, Now our dashboard component is loaded in 1 second, as Sales tab code only loaded now. We have reduced almost 2 seconds by making some changes. Let see the comparison of route-based and route, component-based code-splitting in the below images.
As you see, this is a huge improvement in the app initial load. Now we have reduced the React app initial load time by 70% with a few tweaks by using code splitting effectively in the dashboard component.
Reference
Conclusion
Structuring components in an optimized way and using React APIs effectively will increase the performance of large-scale apps.
Thank you for reading.
Get more updates on Twitter.
You can support me byย buying me a coffeeย โ
eBook
Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples
ReactJS Optimization Techniques and Development Resources
More Blogs
- Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
- Don't Optimize Your React App, Use Preact Instead
- Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
- No More ../../../ Import in React
- 10 React Packages with 1K UI Components
- Redux Toolkit - The Standard Way to Write Redux
- 5 Packages to Optimize and Speed Up Your React App During Development
- How To Use Axios in an Optimized and Scalable Way With React
- 15 Custom Hooks to Make your React Component Lightweight
- 10 Ways to Host Your React App For Free
- How to Secure JWT in a Single-Page Application
Top comments (16)
best way to optimize a react app is to not use react
use preact if you like the api
use any number of web components libraries if you only want components and templates - lit (oop), haunted (hooks), fast (hybrid), atomico (hooks), hybrids (hybrid)
Using React by itself will not result in a highly performant application. If youโre not careful, the application can pick up bloat easily. Itโs good practice to conduct audits periodically. best tantrik in Kalyan
Thank you for this! ๐ Extremely educational. Will implement suspense immediately. But it's still experimental right? Or not ready for production?
Suspense is ready for production.
Right on ๐
switch to preact,It is 3kb alternative to react. use preact/compact to achieve 100% compitability with react apps
Awesome ๐๐๐
Hey, sorry for writing here, but could you add RSS feed to your blog?!
Great explanation! My understanding of lazy loading was a bit hazy but the way you explained it made it much more clearer.
Recently iโve read about the code splitting and lazy loading and i was thinking ok but how and why, this post put me back on the right track thanks a lot for the effort
Thank You
Insightful content.
Thanks for sharing
Keep writing
Cheers...
This was super helpful, Thank you!
Some comments have been hidden by the post's author - find out more