This post has originally been published on https://juristr.com/blog/2019/08/ngperf-preloading-lazy-routes. Go to juristr.com/blog for more content
This article is part of my "Angular Performance Week" series, where I publish a new video each day based on the performance articles on web.dev/angular. Today we're going to have a look at various ways to preload lazy routes in Angular: preloading all modules, custom preloading and with ngx-quicklink.
- Route Level Code Splitting
- Preload Lazy Routes in Angular
- Performance budgets with the Angular CLI
- Optimize Angular's Change Detection
- Virtual Scrolling for large lists with the CDK
- Precaching with the Angular Service Worker
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!.