Angular Performance: Preloading Lazy Routes

Note: this article and attached Egghead video lesson are based on the articles on web.dev/angular by Minko Gechev and Stephen Fluin. Full credit goes to them 👍

Angular Performance Series

1. Route Level Code Splitting
2. Preload Lazy Routes in Angular
3. Performance budgets with the Angular CLI
4. Optimize Angular’s Change Detection
5. Virtual Scrolling for large lists with the CDK
6. Precaching with the Angular Service Worker

Don’t miss the other videos by subscribing to my newsletter.

Preload All Modules

In the previous article we talked about lazy loading Angular routes with the Angular CLI. When you lazy load a module the user gets the benefit of faster loading of the application. However this comes at the cost of a delay when the module gets loaded at runtime. To mitigate this issue, we can apply some preloading strategy. Angular comes with a default one, that preloads all lazy modules. Let’s see how to implement that.

Custom Preloading Strategy

Preloading all modules is quite an extreme approach and might not always be desirable. For instance, you don’t want to preload lazy routes a user might not even have access to. Therefore, in this lesson we’re going to have a look at how to define a custom preloading strategy in Angular.

Preloading with ngx-quicklink

In a previous lesson we learned about implementing a custom preloading strategy. That gives you a lot of control over which route to preload and which not, whether it is based on the user’s permissions or some runtime app config. In this lesson we’re using ngx-quicklink, a library that drastically simplifies the custom preloading, by automatically loading all visible links on the page.

Original web.dev article

Wanna read the original web.dev article? Check it out here!.