Juri StrumpflohnerLazy loading is hot recently and for a good reason. It's all about speed! The Chrome team at Google in specific (around Addy Osmani) tries to push out content (and new APIs) to optimize the heck out of web pages. Now there's one thing modern, JavaScript heavy websites often suffer: startup speed. Improving the startup time of these new modern apps is crucial for getting a high quality app, UX and even gaining better SEO. There are different strategies we can apply to help with that. Reducing the app's bundle size is one way to help with that and that's also where lazy loading comes into play. Right now the most popular way of lazy loading is for sure using Angular routes. In this article however we're going to explore some further options, also powered by Angular Elements.
What means lazy loading after all?
While single-page applications tend to be fast once they are loaded, their initial load time often suffers. This is because of the huge amount of JavaScript that needs to be downloaded, parsed and interpreted by the browser only for then delegating the whole rendering to the SPA JavaScript app. As you can see this differs quite a lot from classic server-side rendered apps, where the HTML is already ready to be rendered by the browser. As a result we need to optimize for that. One approach is to make the main JavaScript bundle - necessary for booting the app (for Angular apps usually main.js) - become as small as possible, so that our app can boot up really fast. This is when "lazy loading" comes into play. And with lazy loading we really mean to defer loading unused bits & just load them on demand.
What can be lazy loaded?
Great, so now we know what lazy loading is, but before we dive straight in, let's first define what can be lazy loaded in an Angular application. You might be tempted to say "I want to lazy load an Angular component", right? After all that's what you want to visualize at a given moment. However, that's not entirely possible.
The basic unit in Angular is a module. If you think about your Angular components, they have dependencies on other components, like Angular Material. But the component itself doesn't specify those dependencies. Rather components are all registered on modules which are then connected between them. As of now (Angular version 7), modules are necessary for Angular in order to "know" how your code works, which dependencies are needed, which components are used in the templates.
Therefore...
"The basic unit that can be lazy loaded are NgModules"
And with them - of course - come the bundled components which we're ultimately interested in.
Lazy loading all the things...
Learn how to lazy load
- via Angular Routing
- manually lazy load components
- lazy load Angular Components as Angular Elements
