LAZY LOADING IN ANGULAR

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 :)