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

圖片是我本身寫的例子改過以後的，上面的文章是剛剛開始作的時候的筆記。 不過代碼上面的邏輯是相同的。

進入界面以後，看到的模塊

點擊設置以後的模塊