ionic懒加载

简介

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

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

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

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

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

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

新增一个组件

使用命令 ionic generate page settings

新增之后的目录

settingsetting.htmlsetting.module.tssetting.scsssetting.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

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

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

点击设置之后的模块