When the code base grows, your web application tends to slow down. To defend good performance, React development can apply various optimization techniques. In this article, we’ll present a very successful one that can let you go beyond conventional restrictions.
What is code splitting?
Every day, week or month, your single page application is expanding, new features are added and it’s getting bigger and heavier. You want to provide great user experience, but downloading a lot of megabytes of the application’s code just to display a single screen doesn’t seem like a way to go. The problem is simple – a large amount of data required to download in order to just initialize your application.
A solution to this problem is code splitting with React (but it can as well be any other JavaScript library of your choosing). This method makes the application ready to be split into multiple independent chunks loaded on-demand. As a result, you don’t have to bundle the application’s code into one or a couple of files. You can decide which modules should be separated and quickly load them when they’re necessary.
When is it worth it to use code splitting in React?
To understand when you should use code splitting, it’s helpful to know the term Time-to-Interactive (TTI). It’s a value that specifies the time required to load all assets essential for the website to initialize and become interactive for the user. You can’t keep the users waiting because they will stop using the web app altogether (research says that users expect a page to load in less than 2 seconds, so go figure…). So to provide outstanding user experience, you need to make TTI as low as possible. And that’s exactly where code splitting enters the game.
It will be useful in large JavaScript applications, when you need the app to initialize quickly, without using too much processing power (especially in mobile devices), when the app has multiple permission groups or sections visible only to specific users.
Who uses code splitting anyway?
You’d be surprised – the biggest beneficiaries of that method are two powerhouses: Instagram and YouTube.
The entire Instagram production codebases has the size of a little over 2 megabytes. Thanks to code splitting, when a user enters the homepage only a quarter of that, necessary for the homepage to display, is loaded for a logged-in user.
As far as YouTube is concerned, its desktop app is a group of multiple connected applications. All the main views meant for browsing and playing videos comprise the main app. Homepage, playlists, video page, comments, user profile, and others pieces have over 1.2MB in total, but to play videos you need as low as half of that. Other chunks are loading on-demand.
Benefits of using code splitting in React development
The most important code splitting benefits include:
– Drastic reduction of data you need to download and parse to make the application interactive (therefore achieving much better TTI)
– Physical separation of different application parts and being able to decide when a browser should load them
– The ability to exclude administrative code for regular users to optimize file size and hide potentially sensitive data
– Client-side caching improvements achieved by updating only those parts of the application that have actually changed
However, code splitting it’s not only flowers and rainbows. You should keep in mind that code splitting requires downloading some data after the page initializes. When the internet connection is down, there’s no way to load additional modules (so make sure to write a nice pop-up with a message for the user).
A final thought – always remember to analyze which modules are necessary at all times and which you can load asynchronously when a user enters specific routes. It will help you understand the performance aspect of your application and optimize it to a greater extent.
As with every solution, there are various approaches, the experienced team at Rocket Lab work tirelessly to deliver extensible solutions designed to meet the needs of businesses now and into the future. They one of a few agencies who are well-versed in both iOS and Android platforms – check them out.
