Lazy Loading Modules
In this lesson, we'll learn how to improve the performance of the application by utilizing lazy loading.
We'll cover the following...
Up until now, our app has been using eager loading by default, but what is eager loading? Loading of an application with all the components registered in the app module is called eager loading.
In the diagram above, anytime we make a request, the server will always respond with all the modules. The homepage only requires the HomeModule. The other two modules aren’t necessary at the time of the request. Regardless, we’ll still receive those modules from the server because the CLI will bundle the modules together in a single file.
Ideally, it would be better if we could optimize the response by splitting the modules into separate files. Angular allows us to implement lazy loading. Lazy loading is when we load components only when they’re required to render a page.
In this example, only the HomeModule is sent over because we’re requesting the homepage. If we make subsequent requests to the about or contact pages, then the server will respond with the AboutModule and ContactModule files, respectively.
Lazy loading is much more optimal ...