Lazy loading allows the Angular build process, powered by webpack, to separate our web application into different JavaScript files called chunks. By separating out portions of the application into separate submodules, we allow these modules and their dependencies to be bundled into separate chunks, thus keeping the initial JavaScript bundle size to a minimum. As the application grows, the time to first meaningful paint remains a constant, instead of consistently increasing over time. Lazy loading is critical to achieving a scalable application architecture.
We will now go over how to set up a submodule with components and routes. We will also use Augury to observe the effects of our various router configurations.
