1. 17
    Avoid delays for lazy modules by applying a preloading strategy with the Angular router
    2m 11s
⚠️ This lesson is retired and might contain outdated information.

Avoid delays for lazy modules by applying a preloading strategy with the Angular router

Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 8 months ago

Lazy loading your Angular modules has some substantial performance benefits at application startup. However, when the user then activates a lazy loaded route, there’s the cost of having to wait for that Angular module to be fetched and fully loaded. To mitigate this issue, the Angular router gives us the possibility to preload a lazy loaded route at runtime.

Instructor: [00:00] In this app routing module here, we have a couple of routes defined where the component's directly referenced. Then we have some that are lazy loaded. Especially here, the context and the people module.

[00:11] We can see it here as well in the browser. Down here, when we refresh the application, we just get the standard Angular files. When I now click the context, the context module file gets loaded. The same thing also for the people module.

[00:26] Now, when your application gets larger and grows, these couple of files here -- for instance, the context module, which here in this demo application, is just a couple of kilobytes -- may grow quite a lot. What happens is that when the file is not yet ready, and you reload your application, the user doesn't yet have those modules loaded.

[00:44] When he clicks the link, it might take a couple of seconds until the megabytes of files are being downloaded for that module. Now, when you implemented lazy loaded, all you want to have is to actually avoid downloading all those megabytes and megabytes of files when your application loads initially.

[01:00] The user does not yet interact with these kind of modules. You really want to optimize that time to interactive, such that your application starts as quick as possible. Then, behind the scenes, you can actually already download the remaining modules lazily, such that when the user then clicks on those modules, they are already downloaded and ready.

[01:19] He doesn't recognize this kind of delay. In Angular, this is actually quite simple. We can go directly to the app routing, where we have also defined here our lazy modules, and where we actually define the root level of our routings.

[01:33] There, the router takes a second configuration option, where we can specify the preloading strategy. Then we specify the preload all modules. The preload all modules gets imported directly from the Angular router.

[01:48] With that, let's save this. Now, let's go to the whole module here. Let's refresh again. As you can see now, the files get downloaded, but also already the context and the people module get downloaded behind the scenes.

[02:02] When I click here, the file's already ready, and Angular doesn't have to lazy load it at that moment. The delay of those lazy loaded modules will disappear completely.

egghead
egghead
~ 20 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today