Angular Performance: Preloading Lazy Routes
Optimize runtime performance by preloading lazy routes
2 min read
2 min read
Don’t miss the other videos by subscribing to my newsletter.
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.
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.
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.
Wanna read the original web.dev article? Check it out here!.