Lazy loading of ionic3 learning

ionic lazy loading

Introduction

Using lazy loading can reduce program startup time and reduce package size. And lazy loading is only loaded when clicked and triggered, so the program starts faster.

Configuring lazy loading requires the following steps:

1. Configure module.ts for pages that need lazy loading;

2. Add the @IonicPage() feature to the .ts file of the corresponding page;

3. Remove the page reference in app.module.ts;

4. Use lazy loading (in the place where this interface is called, do not import the interface, use string, the component name string is lazy loading, ionic will help us register the component and find the component.)

add a component

Use the command ionic generate page settings

directory after adding

setting
    setting.html
    setting.module.ts
    setting.scss
    setting.ts

Configure setting.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingPage } from './setting';

@NgModule({
  declarations: [
    SettingPage,
  ],
  imports: [
    IonicPageModule.forChild(SettingPage),
  ],
})
export class SettingPageModule {}

Configure setting.ts. need to join@IonicPage()

import { Component } from '@angular/core';
import {IonicPage, ModalController, NavController, NavParams} from 'ionic-angular';
import {LoginPage} from "../login/login";
import {ModalPage} from "../modal/modal";

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

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

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

}

Modify Tab.ts. Will use quotes for lazy loaded modules.

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {NavParams, ViewController} from "ionic-angular";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = 'SettingPage';   // 使用懒加载

  constructor(public navParams: NavParams,
              public viewCtrl: ViewController) {
  }

  ionViewDidLoad() {
    console.log(modelData);
  }
}

Modify Tab.html.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="设置" tabIcon="settings"></ion-tab>
</ion-tabs>

Note

1. In the second level interface, it is the same way.
2. View Network in Sources in the browser —> http://localhost:8100/ –> src

The picture is after the example I wrote myself and modified, the above article is the note when I just started. But the logic above the code is the same.
After entering the interface, the module you see

Click on the module after setting