This content originally appeared on DEV Community and was authored by Deepa Chaurasia
What is Lazy Loading??
Consider our application has 3 routes, Every routes has a module associated with it that contains their respective component,services and directives.
Here you can see we have 3 routes:
Root
Products
Admins
Now when user visit root route then we must be loading the respective modules, and then we load other modules when it is required.
But does it happen???
The answer is NO. What Angular does is it load all the modules whenever we visit any page.
Wouldn't it make sense if we load only respective modules.
Here our LAZY LOADING comes into play
In lazy loading the modules are loaded only if the user hit the route of that particular module.
THE ADVANTAGES OF LAZY LOADING MODULE ARE:
Initially we load a smaller bundle and the modules only for our root route.
We load more modules /bundles as we hit the route for the following(modules will load only when we need).
In this way our root route will load faster because it has a lot smaller bundle to load now .And our Routing Optimisation is achieved with Lazy Loading.
Here you can see first root route will load and all component ,services related to it in modules will load
After this when we direct to the other route ,only then the modules for respective route will loaded . And you will notice root have not took much time in loading. Because the other modules are loading now according to requirement.
IMPLEMENTING LAZY LOADING I WILL COVER IN NEXT POST
Thanks to @Maximilian. From his Udemy Course I took the reference
If you found it helpful do follow ,like and share :)
This content originally appeared on DEV Community and was authored by Deepa Chaurasia
Deepa Chaurasia | Sciencx (2022-03-21T18:18:38+00:00) LAZY LOADING IN ANGULAR. Retrieved from https://www.scien.cx/2022/03/21/lazy-loading-in-angular/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.