Software systems to innovate and grow

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

By Engineering Team May 20, 2019 10 mins read

With the goal of improving the performance of the resulting applications, each new version of the Angular framework continues to shift its focus. The latest focus is lazy loading, which makes it so that you can load modules on demand. It’s one of many practices that this great framework provides. Before we continue on, let’s dig a little deeper into what Lazy Loading is all about.

What is Lazy Loading?

Single Page Applications (SPA) perform the loading for all of its content at the initialization point of the app. This means when you first open the page, the download browser downloads a large amount of information and initialization components. Lazy loading steps in as a design pattern, delaying the loading or initialization of an object until the moment that it is used. By putting lazy loading into practice you’re taking control of the loading so that it can only load features on-demand. This is useful because if the app loads its features before the user is ready to use them, it will most likely result in bad performance. This is particularly important to keep in mind when you are working on frontend applications. Since the load is done on the user side, modularizing and deferring the load features helps the application to only focus on a specific part of the code.

Taking Advantage of Lazy Loading

By default, Angular CLI combined with Webpack will deliver your application code into one large bundle. Once your app starts growing in size, the next step is to split up the different features into modules. This adds less strain on loading them. Let’s go over an example together.

Let’s start by creating the main page and add a link to load the lazy module and its component.

app.component.html

In order to enable the lazy loading of a module you don’t need to import it. Here is where the app.module comes in.

app.module.ts

At this point, the lazy load is done in the routing module. Using the loadChildren property inside the definition of the routes creates the path of the module when combined with a ‘#’ and the name of the module.

app-routing.module.ts

Next you’ll define the lazy load module and route it.

lazy-load.module.ts

lazy-load-routing.module.ts

The following screenshots show the network tab of the browser (chrome in this case) where you can refer to all requests being made in real time. You can also see how when the user clicks on the link the module is loaded on demand.

Boosting Angular’s Performance with Lazy Loading - Part 1

When you click on the link to access the page, the lazy module is loaded successfully.

Boosting Angular’s Performance with Lazy Loading - Part 1

Combining Lazy Loading With Guards

Protecting resource routes is common when building big applications that are used by users with different roles and privileges. Angular routers provide navigation guards to accomplish this task. When put to use the canLoad guard prevents a user from accessing a resource that needs to load the entire code.

For this feature to work, you need to create an authentication guard service that implements the canLoad function. This is the function in charge of doing the validation and returning it depending on if the module associated with the URL can be loaded or not. For the purpose of this lesson, we’ve assumed our lazy-loading route is protected. Note, how the logic doesn’t have any users access associated and returns as true.

authentication-guard.service.ts

Now let’s add the new route to the app.routing with the canLoad property and the previously created AuthenticationGuardService.

app-routing.module.ts

Why You Should Care

Although your application probably looks awesome, if it takes too much time to load the final user will dislike, complain about and probably stop using it altogether. With the end users happiness as the key to the application’s success, you must consistently find a way to improve the performance of your application. Lazy loading in Angular generates a better user experience by shortening load times and only loading necessary info. This is one useful pattern to add to your wheelhouse and apply to future coding in order to boost your app’s performance and take it to the next level. Join us for Part 2 where we go into detail on how to control lazy loading with preloading strategies.