The BUNDLE size matters!
In simple words, Bundle is javascript file that we send to the user’s browser to execute the logical or UI part of frontend application. And splitting the code of bundle in smaller chunks is basically code splitting.
I am assuming that you have seen or worked on code splitting before! or have used React.lazy() function! And thats why you are here.. ! But, the main question question comes is when to do it and why to do it?
As a frontend developer, I usually, see people talk about code splitting and loading javascript bundle dynamically in performant way.
Every organisation has that one most used feature, and clients or customers want everything on that same page. As a developer, I can understand the problem here. As Requirement, we have to add all things on the same page, which affects the performance of the page and the user experience. There might be some features that are only needed for a particular user or client, and most of the users do not need or require those features. However, As a developer, I know that I am messing up with the codebase by adding that code, which will be included in the JavaScript bundle.
Now you can think, where code splitting plays its role!
When most of the features of your web app are on one page or you have only one-page MVP, what you can do is split the features depending on the condition and then load the bundle as per requirement. This is because not all users need the same feature. Depending on what the user is going to do with that feature, we can lazy load the bundle. The reason we should do this is that the bundle size affects the memory of browser. As the size of the code increases, the network requires that amount of the user’s bandwidth to download the bundle to their browser. But if the user has no relation with that particular feature, we as developers can avoid unnecessarily sending those lines of code to the user’s browser.
Another way we can split the code, is by feature based. Most of the time, variable route have variable features. So, dynamically loading routed page will help to improve the user experience. Rather than, loading all pages javascript code on single load, we can separate out the bundle of code by each route.
Access based splitting code, might be another solution. For example, you have customer portal and admin portal, so code of admin portal should not be the part of customer portal, as admin side code is not required on customer portal.
Sometimes, it is not possible to split the code if each module has dependencies on one another. In such cases, keeping things simple is the solution. Code splitting does not mean lazy loading every component. Creating small bundles for each code block is not a good solution as it increases the network requests for the user. It can also lead to increased repetition of dependencies, resulting in unnecessary overload in each network request.
Therefore, it is important to ensure that the bundle size is neither too small nor too large, but rather optimal. Different browsers and browser engines work differently, and not all user systems perform equally well. Additionally, user preferences and capabilities may vary.
Hence, the BUNDLE size does matter!
If you like the blog, feel free to connect with me on Twitter and LinkedIn.
