Optimizing App Loading Time With Angular 2 Lazy Loading

  • We need to register our module loader in the root module (Note that you can have a different module loader for every NgModule!
  • We can provide a custom module loader or not use a module loader for lazy loading at all.
  • When developing NativeScript apps, we don’t have to set up SystemJS to create lazy loaded modules.
  • Extracting the loading logic allows us to check if the module exists and throw a meaningful error message if it doesn’t.
  • With lazy loading, we can split our application to feature modules and load them on demand.

Developing mobile apps with Angular 2 may result in a file that’s too large. With lazy loading, we can split our application to feature modules and load them on demand.

@xtools_at: Optimizing App Loading Time With Angular 2 Lazy Loading #angularjs #webdev

When you develop mobile applications, you should always be alert on the performance and always optimize. In this blog post, I will walk you through a very effective pattern that describes optimizing the loading time of an application when using Angular. Meet Angular lazy loading.

Developing mobile apps with Angular 2 may result in an application file that is too large and affects the startup time. Luckily, the Angular router provides a great feature called lazy loading to help us decrease the initial loading time.

What Is Lazy Loading?

With lazy loading, we can split our application to feature modules and load them on demand. The main benefit is that, initially, we can only load what the user expects to see on the start screen. The rest of the modules are only loaded when the user navigates to their routes.

Check out this blog post for more in-depth information about lazy loading.

The Angular 2 built-in module loader uses SystemJS. However, when developing NativeScript apps, we don’t have to set up SystemJS to create lazy loaded modules. We can provide a custom module loader or not use a module loader for lazy loading at all.

In the following sections, we will use the simple lazyNinjas app which has two modules: the HomeModule (not lazy loaded) and the NinjasModule (lazy loaded). It also has two branches: callback-loading and custom-module-loader. We’ll cover the two strategies in the next two sections. Take a minute to make yourself familiar with the ninjas; download the app from GitHub and run it.

Let’s take a look at our router configuration:

` property:

Here we pass a callback with a single return statement. Let’s see what happens step by step.

. Here’s how it looks like:

 property.

We can also omit the extension of the file, and write the above as:

You can find that version of the app in the callback-loading branch.

 property, we can extract the loading logic to a module loader. Then, we can use it instead of the built-in loader that uses SystemJS.

Let’s take a look at the NinjaModuleLoader used in our simple app:

 property. We’ll adopt the same syntax that the built-in module loader uses. As stated in the Angular documentation:

“Lazy loaded module location is a string, not a type… the string identifies both the module file and the module class, the latter separated from the former by a #.”

 properties in our router configuration. Luckily, we have only one:

 method of the NinjasModuleLoader is where we extract the module file location and the exported module name. Then we can simply require the module in the same way as in our callback function:

Extracting the loading logic allows us to check if the module exists and throw a meaningful error message if it doesn’t.

If the module was successfully required, we compile asynchronously it with the Angular compiler:

Finally, we need to register our module loader in the root module (Note that you can have a different module loader for every NgModule!).

You can find the final version of the app in the custom-module-loader branch.

For a real-life NativeScript app with lazy loaded modules, you can check out our SDK Examples. It has more than 100 different components, each with its own route, and ~15 feature modules. The following table presents the startup times with and without lazy loading.

For our 2.5 release, we are working to enable ahead of time compilation and Webpack 2 with treeshaking and obfuscation, which will also improve the loading time significantly. Expect an update on this in the following weeks.

Optimizing App Loading Time With Angular 2 Lazy Loading

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.