These days mobile applications can become quite big. A dashboard consisting of 10 components here, another page with 2-6 components there and of course some services providing data for all the separate components.
Each of those components also consists of an HTML page, a stylesheet and the actual logic in a TypeScript file. All of this code is automatically bundled by Webpack, which makes deploying a lot easier. But it also has a downside, the browser needs to download these files when loading the page and it can only start loading your web application when the entire bundle has been downloaded.
Angular and Webpack already offer some nifty out-of-the-box features that help you minimize the size of your bundles, such as code minification,
(which is automatically activated in dev mode when running Angular 9 or above, to improve the developer experience).
But there are still a few more steps you can take to manually improve the performance of your application. One of these features is offered by the Angular Router, called “Lazy loading.”