Lazy React makes code-splitting easy
React.lazy and Suspense make React developer life easy. React.lazy helps in code-splitting and Suspense backup React.lazy in loading state. Before, we go into details let’s start things simply. let’s be familiar with some background knowledge.
What is Bundling?
Bundling is the process of putting code in many files into one file. While bundling is essential in modern web applications for optimization, the size of the bundled file can grow as the application grows with many lines of code incorporating third-party libraries and modules. Having one such large bundle can increase the load time, especially on a slower network leading to poor user experience. It is also difficult to track and fix errors with such bundled files.
So, what is the solution?
One of the solutions is code-splitting
Code-splitting and Bundlers
Code-splitting is a technique to first load the minimum code needed and then the rest of the code as it is required. This prevents the loading of unnecessary code initially thereby decreasing load time.
If you can remember, a similar approach was used with libraries such as Jquery when the Jquery CDN scripts were placed at the end of the file rather than at the head.
