Welcome to the world of code-splitting where you can lazy-load (dynamically) your JavaScript bundle dynamically, only when the user requested it. By Amandeep Singh.
All modern JavaScript bundlers, like Webpack. Rollup, and parcel, supports code-splitting feature out of the box. These bundlers can create multiple bundles that can be dynamically loaded at run time, thus improving the web performance for your users.
The article explains:
- Route-based splitting
- Component-based splitting
- Lazy-loading via React.lazy
- Lazy-loading in NextJS
This article helps you think about why do we need to implement the code-splitting in the first place. Remember that your beautiful app is of no good use if it takes minutes to load. Good read!
[Read More]