Member-only story
Optimize Performance of React Application with Lazy Loading
Improving page load time in React with Suspense and Lazy and ensuring React Application Optimization
Technofunnel presents another article to improve your React Application performance using Lazy Loading of Components during the execution. We will understand the concept of Lazy and Suspense.
By default, all the components of React application are bundled into a single “.js” file and loaded on the browser. Since all application components are there inside the bundled file, therefore, the size of JavaScript created is comparatively higher. Since we have a larger JavaScript file to load, it might impact the application’s initial load time.
React Application Bundling Process
Bundling is the process of importing and merging multiple files into a single file so that the application doesn’t have to import a lot of external files. If every component resides in a separate file, we would require to load many “JavaScript” during Initial Page Load. Each request will go on the network and consume network bandwidth and the HTML parser will have to wait for a large number of files from the network.
