Technology
Lazy Loading in Angular
January 2, 2021by Jeeten Parmar
Lazy loading is a concept in Angular which allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as and when required.
The most important concepts of application performance are Response Time, and Resources Consumption. A problem can occur at any time and from anywhere, but it is highly important to find and solve them before they happen.
The prospect of Lazy Loading in Angular helps reduce the risk of some of the web app performance problems to a minimal.
- Response Time: It is the amount of time that takes the web application to load and the UI interface to be responsive to users. The concept of Lazy loading optimizes response time by code splitting and loading the required bundle on demand.
- Resources Consumption: We humans are impatient creatures if a website takes more than 3-5 seconds to load, 70% of us will give up. We will close that website at that time. Web apps shouldn’t take this long time to load. So, to reduce the amount of resources loading, Lazy loading loads the code bundle necessary at a time.
Some of the Advantages of Lazy Loading:
- High performance on initial load of the web app.
- Angular Modules are grouped according to their functionalities.
- Smaller code bundles to download on initial load.
- Download a code module by navigating to a specific route.
