Optimize App Loading by Implement Lazy Loading in Ionic 3 Existing/ New App

An Ionic framework application makes development very easy and fast for multiple platforms, but sometimes due to performance issues like fluctuation in animations, jerk movements during user interactions calls for some tricky solutions to manage code with better optimizations.

One such issue is startup time of Ionic applications, with more views an application startup time increases many folds due to a number of components loading at once during app initialization. We can improve this situation by Lazy Loading component in the application.

What is Lazy Loading?

Lazy Loading is a process of loading only those components which are required for the current view. Applications using Lazy Load do not load all components at once so at initialization only one component of root page will be loaded, this really improves the loading time of ionic applications.

How to Implement Lazy Loading in Existing App?

To demonstrate the implementation of Lazy loading first we will create a new blank Ionic application. After that will implement Lazy Loading on Home Component which is created by default in new Ionic 3 Project. After that, we will implement Lazy loading by doing some changes.

So let’s begin

Create New Ionic 3 Application

$ ionic start Ionic3LazyLoading blank
$ cd Ionic3LazyLoading

If you are using Visual Studio Code editor then type $ code . to open files directly from cmd.

Now we have a normal file structure with the blank template not having Lazy Load functionality.

Let’s follow following steps to convert out Ionic 3 project with Lazy Loaded Components

Step 1) Changes in App Module File

Open the app.module.ts file, then remove component imports from declarations and entryComponents except MyApp

So after these changes, app.module.ts file will look like this

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

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

@NgModule({
  declarations: [
    MyApp//,
    //HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp//,
    //HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Step 2) Create a Module file for each page/ Component

In the home, page folder create home.module.ts file with the following code in it

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

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

If you have more pages/ views, then you need to create module.ts in each page’s folder.

Note: If you generate a new page using the command $ ionic generate page HomePage then it will automatically create the module.ts file.

Step 3) Add @IonicPage() decorator in Page Component

In HomePage component, we will add @IonicPage(), decorator, before @Component() decorator.

This will make this component Lazy Loaded. After adding home.ts file will look like as follows

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


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

  constructor(public navCtrl: NavController) {

  }

}

Step 4) Convert Page components into String components.

This is an important step, you need to convert Components into the string like HomePage to ‘HomePage’

the app.component.ts file will look like this

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

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

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

You also need to define modules for Home Page in home.module.ts instead of app.module.ts

That’s all guys!!! now you will see a considerable change in app start speed on real devices. After creating production release your app size will decrease and will further improve initialization speed.

Also See: How to Create Production Release/ Signed Version of APK in Ionic 3 CMD

Category: Ionic Framework