Lazy Loading in Angular
Building software is not a single and simple task, developers have to work on lots of extra stuff even after your login page shows a login button.
Writing a code to do a task is always the first thing, but there are many more thing which is in the picture if you want to build good software. Maintaining, logging, scaling, and documenting are a few steps that make software better.
In this blog, we will talk about the scaling of the angular project and in scaling we will be talking about a very specific topic, lazy loading. On the frontend side, loading a website is the most important thing as its performance and developer have to pay most attention to it but in some cases developer also can't avoid the big bundles of frontend build when code base grows.
One of the best examples which come to my mind is E-commerce. Ecommerce projects are the ones that grow eventually and you can't avoid that because first you have to develop everything related to users and then you have to develop everything related to admin as well because admin panel is unavoidable and you have to build it but that makes your application a lot bigger than what you plan for. When you make a build for this application the build is so big that it takes forever to load in the web browser. Here you can notice one thing, even if your application is used by a normal user then also the admin part Kodi is also loaded in the web browser and that makes it too slow to load. And same goes for the admin part whenever the admin is using the application the code for the user part is also loaded in the browser and this is so irritating.
Now to avoid this situation comes lazy loading. So the basic definition of lazy loading can be you only load the part of the application which is relevant to the user who is using the app at that time. This will avoid unnecessary loading and that will increase the loading time for the browser. You can also do some lazy loading even in the same module let's say users have 2 different pages so you load only the landing page first and then lazy load the other pages and that will help you to load the website quickly.
An angular framework has the inbuilt functionality of lazy loading the whole module so you can divide the whole project into different modules and then you can load the modules according to the need. This helps you to load your application faster and increase the performance of your application. And it is pretty simple to do that in an angular framework. In one of my videos of my angular 13 tutorials, I have explained how you can exactly do the lazy loading in the angular application so if you want to really know how exactly lazy loading works in angular you can check out the video I will share the link in the blog.
Link for Video Tutorial on how to lazy load modules in Angular 13.
Happy Koding Everyone!!!!!
