ionic3学习之懒加载

ionic懒加载

简介

使用懒加载能够减少程序启动时间，减少打包后的体积。并且懒加载是当点击，触发的时候才去加载，所以程序启动的时间比较快。

配置懒加载需要以下几个步骤：

1.给需要懒加载的页面配置module.ts；

2.在对应页面的.ts文件里增加@IonicPage()特性；

3.在app.module.ts移除页面引用；

4.使用懒加载（在调用这个界面的地方，不 import界面，使用 string，组件名称字符串就是懒加载，ionic会帮我们注册组件和找到该组件。）

新增一个组件

使用命令 ionic generate page settings

新增之后的目录

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

配置 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 {}

配置 setting.ts。需要加入 @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');
  }

}

修改 Tab.ts。 将使用 懒加载的模块使用 引号。

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);
  }
}

修改 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>

注

1. 在第二级的界面中，也是同样的方式。
2. 查看方式 浏览器中 Sources 中 Network ---> http://localhost:8100/ --> src

图片是我自己写的例子改过之后的，上面的文章是刚刚开始做的时候的笔记。 不过代码上面的逻辑是相同的。

进入界面之后，看到的模块

点击设置之后的模块