From the course: Angular Performance Optimization Techniques
Unlock this course with a free trial
Join today to access over 25,500 courses taught by industry experts.
How lazy-loading works - Angular Tutorial
From the course: Angular Performance Optimization Techniques
How lazy-loading works
- [Instructor] One of the key ways to improve performance of an Angular application is to use lazy loading, so let's take a look at how lazy loading works. The main idea is that when we compile an Angular application, we end up with a file called main.js that contains all of the JavaScripts of our application. This means that if your application is pretty big, like on the example here, where we have 20 megabytes of JavaScript, then your index.html, which is the file loaded in the browser, would have to start by downloading those 20 megabytes of code and then pass them and then run that code, which is going to take quite some time, so in order to make this a lot faster, we can use lazy loading and the idea of lazy loading is that instead of downloading the entire application at once, we are going to divide it in multiple different chunks. In the example here, we have one main chunk that's still 10 megabytes big because we decided to have another chunk for the cart feature, cart.js…