Software systems to innovate and grow

Boosting Angular’s Performance With Lazy Loading (Part 2)

By Engineering Team May 28, 2019 10 mins read

What if you could improve your application a bit by preloading your modules? Luckily the Angular team has already thought of that. The framework has a feature implemented within to help with preloading strategies. In this article, we discuss the perks of lazy loading in Angular and how to implement them into your project. Let’s continue to explore these improvements as you take advantage of lazy loading in part 2 of 3 articles. For an introduction to what lazy loading is and some basic entry point tips, check out part 1.

Preloading Modules

One downside of lazy loading is that when the app needs to render a component contained inside a module, the module requires loading at that exact time. This results in a longer loading time when you are trying to access the component. Before the user is able to do anything in the application, they have to wait for it to load.

To minimize these loading times, Angular includes the ability to preload modules while the user is interacting with the application. In other words, all the feature modules assigned to lazy load are loaded asynchronously. This happens right after the eagerly loaded modules are done loading. As a result, when the user clicks on a link going to a lazy load module, the navigation is instant. Acting as an intermediate solution, where you’re no longer loading all modules upon entering a page, nor are you loading everything as it is needed, ultimately preventing longer load times.

Preloading Strategies

Right off the bat, Angular provides a preloading strategy. This is an abstract class and by default provides two strategies pre-implemented for you. You get an idea of what they do from the names themselves:

  • NoPreloading:  no modules are preloaded, this is the default behaviour
  • PreloadAllModules: all modules are preloaded as soon as possible

When you define the routes in the router module, you have a second option of where you can define the router options. This is the place where you specify a strategy, among other things. To use the above strategies, you must add the strategy as shown below.

app-routing.module.ts

Let’s see what happens when the app is updated.

Boosting Angular’s Performance with Lazy Loading - Part 2

The result is the LazyLoadModule is loaded directly after the initial bundle, containing the specific components needed to bootstrap your application. So, it is as fast as it can be. When the user accesses the lazy module components, there won’t be any wait time because the module has already been loaded.

Custom Preloading Strategy

In addition to the two strategies provided by Angular, you can also define your own strategy. For example, instead of preloading all modules, you can define which components should be preloaded in the router configuration. This option gives the developer a flexible approach to handle the load of a variety of modules within the application.

Let’s modify the project to include this feature. First, you’ll need to create a service which implements the PreloadingStrategy class and the preload method from that class. Here is where you’ll add the logic instructing the router to select which modules are going to be preloaded or not. This is done based on a preload boolean flag, added in the router module for every route. Basically, what happens is if the preload flag is defined and set to true, the module is preloaded.

custom-preloading-strategy.service.ts

The next step is to configure your app routes so they are working with the new preloading strategy. When configuring routes you will come across a property called data. Data allows you to add developer-defined data to the component. In the following example, I have defined a preload flag, it notifies the module what to preload and what not to preload.

app-routing.module.ts

Custom Preloading Strategy With Delay

But it’s not all about preloading. In the instance you want to delay the preloading time of a module, you can access this feature by adding another flag to the strategy.

Let’s define a flag called delay to some of the routes in our routing-module. First, let’s add the code used to delay the load of the module. For this, you’ll see the new loadRoute method, which works by returning a delayed function in the instance the delayTime property is defined and bigger than 0. This is done with the help of the RxJS timer feature.

custom-preloading-strategy.service.ts

Next, define the delay time. For this, add a property to the data object described in the previous section.

app-routing.module.ts

When you reload your app use the inspecting the network tab of the browser. Here you can see all the modules being loaded, including the ones you have defined a delay time for. This comes handy when you want to set a priority time for when a variety of modules are loading.

More Control With Preloading Strategies

Although using lazy loading in Angular is a great tool on its own, with the addition of preloading strategies you can now customize your preload modules. The initial load time is as minimal as you need it to be, and every subsequent navigation is usable in an instant, ultimately improving the user experience of your application.