Ionic 3 Lazy Loading

Starting the Ionic Project

> ionic start ionic3-lazy-load blank
> cd ionic3-lazy-load
> ionic serve

Without Lazy Loading

Let's start by looking at how we load a page without lazy loading. Inside of our main app.module.ts we add our Page to both the declarations and entryComponents array.

import { MyApp } from './app.component';
import { HomePage } from './../home/home.component';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  //Omitted
  entryComponents: [
    MyApp,
    HomePage
  ]
})

If we had a list of pages in our application, we'd have to declare all of them at runtime. This will impacts loading performance.

You can see that the entire main.js bundle is sent down when our application is initiated:

Lazy Loading

In order for the best experience, we should aim to get our application on screen as quick as possible. This can be achieved by only loading the necessary components whenever they're required.

We need to modify the application root module app.module.ts so that the HomePage component is no longer imported and no references to the HomePage component are left in the declarations and entryComponents sections:

import { MyApp } from './app.component';

@NgModule({
  declarations: [
    MyApp
  ],
  //Omitted
  entryComponents: [
    MyApp
  ]
})

Let's add a home.module.ts into src/pages/home:

import { NgModule } from '@angular/core';
import { HomePage } from './home';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
    imports: [
        IonicPageModule.forChild(HomePage)
    ],
    exports: [],
    declarations: [HomePage],
    providers: [],
})
export class HomeModule { }

Notice that I've also added the IonicPageModule.forChild(HomePage) here. This allows us to navigate to component(s) by routes, and thereby also gives us the ability to URL deep-link.

The next thing to do is add the @IonicPage() decorator to our HomePage. Our HomePage now looks like this:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }

}

We can also define custom URL deeplinks within the configuration of our @IonicPage:

@IonicPage({
  name: 'Home'
})

Because of our setup, we can now navigate to different pages within our application via a string rather than an imported component.

Currently, our root component is defined in app.component.ts like so:

import { HomePage } from './../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;
}

We can now change our rootPage to:

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'HomePage';
}

This will navigate the user to the HomePage like before, but we've not imported it inside of our component.

Notice the difference in this image, we're now looking at a main.js and a 0.js - two separate bundles. This means that each time we ask for a Page that we've declared as an @IonicPage(), we're getting a new bundle.

We're not limited to just loading the rootPage like this, the same works for our NavController. If we wanted to navigate a user to a new page, the syntax looks like this:

this.navCtrl.push('PageName');