Feature modules with lazy loading
There are two ways resources are loaded: eagerly or lazily. When the browser loads up the index.html for your app, it starts processing it top to bottom. First the <head> element is processed, then the <body>. For example, the CSS resources we defined in the <head> of our app will be downloaded before our app is rendered, because our Angular app is defined as a <script> in the <body> of the HTML file.
When you use the command ng build, Angular leverages the webpack module bundler to combine all the JavaScript, HTML, and CSS into minified and optimized JavaScript bundles.
If you don't leverage lazy loading in Angular, the entire contents of your app will be eagerly loaded. The user won't see the first screen of your app until all screens are downloaded and loaded.
Lazy loading allows the Angular build process, working in tandem with webpack, to separate your web application into different JavaScript...
