Delay on application startup

Question

I created a cross-platform application using Ionic 2 + Angular 2 according to the Get Started of ionic documentation. The basic command to create a project with side menu is this way below:

$ionic start myApp sidemenu

There is something that is bothering us a lot: the application’s startup, on the Android platform, which today is taking around 14 (mega, master, hyper, ultra) seconds (the Rubens Barrichello would do 5 laps in the Circuit of Monaco).

I did some research and found something saying that happens when the app is in mode debug, but I managed a version of release and is still slow on startup. I tested on IOS and the loading speed is very fast, which would normally happen. Has anyone ever come across this? Is there any setting that needs to be performed to resolve the problem?

Answer 1

To improve the performance of your app you can use a ancient secret technique calling for LazyLoading (Lazy cargo). No Ionic the application of this model consists of loading the necessary modules for each page at the time of loading, avoiding loading all modules, providers, etc at the beginning of the app.

Let’s assume you have one component/page calling for home, i would have the following file structure:

home.ts
home.scss
home.html

To implement Lazy you need to create another file, which is the file that will import what you need.

home.module.ts

To use the lazy it is also necessary to make some adjustments, in your file home.ts you need to use the Developer @IonicPage(). Example:

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

Already in your home.module.ts file:

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

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

When you call your page Home, consecutively the HomeModule will be called and the same will load your components.

An important thing, you no longer need to use the imported Component to do the routing, you just need to pass the string with the same name, example: this.nav.push('Home');

Note, you can import your providers tbm in home.module.ts, just add the attribute providers: [] in the structure of NgModule