Ionic3懶加載實(shí)現(xiàn)

為什么使用懶加載？
在實(shí)際開發(fā)中，越復(fù)雜的功能就會(huì)占用越多資源，寫越多的代碼，那么打開App的時(shí)候就需要用更多的時(shí)間，因?yàn)槭峭瑫r(shí)加載了所有的資源，切換也會(huì)使用更多的時(shí)間。那么為什么我需要什么才加載什么呢？

未使用懶加載之前：

image.png

可以在上圖明顯的看到三個(gè)選項(xiàng)卡布局的App把所有的資源都進(jìn)行加載了，但是目前我只顯示了home這個(gè)頁面，另外兩個(gè)頁面我不需要立馬加載的呀。

好了，問題的拋到這里，下面就進(jìn)行怎么使用懶加載進(jìn)行簡(jiǎn)單的說一下吧。

1.需要知道的幾個(gè)概念，我不解釋，angular學(xué)習(xí)中有。

• 組件
• 裝飾器
• 模塊

2. @IonicPage()裝飾器。

3. 具體操作如下：
   a.為about,contact,home,tabs添加module,代碼如下

import {NgModule} from "@angular/core";
import {IonicPageModule} from "ionic-angular";
import {AboutPage} from "./about";

/**
 * Created by 雷洪飛 on 2017/9/25.
 * @function:
 */

@NgModule({
  imports: [
    IonicPageModule.forChild(AboutPage)
  ],
  declarations: [
    AboutPage
  ]
})

export class AboutModule {

}

b. 在tabs.ts中去掉對(duì)HomaPage,AboutPage,ContactPage的組件引用，更改為字符串,并且還需要在app.component.ts中，對(duì)rootPage:any = TabsPage也要設(shè)置為字符串.

import { Component } from '@angular/core';

import {IonicPage} from "ionic-angular";

@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // 去掉組件引用，改為字符串
  tab1Root = 'HomePage';
  tab2Root = 'AboutPage';
  tab3Root = 'ContactPage';

  constructor() {

  }
}

c. 添加@IonicPage()特性，在組件中添加(HomePage,ContactPage,AboutPage,TabsPage).

import { Component } from '@angular/core';
import {IonicPage, NavController} from 'ionic-angular';
//  添加IonicPage特性
@IonicPage()
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController) {

  }

}

需要注意的是：不能再app.component.ts中添加該裝飾器，否則啟動(dòng)報(bào)錯(cuò)。

image.png

d. 在app.module中去掉HomePage,AboutPage,ContactPage的declarations申明h和entryComponents中的引用。

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';


import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    // 去掉
    //AboutPage,
    //ContactPage,
    //HomePage,
    //TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // 去掉
    //AboutPage,
    //ContactPage,
    //HomePage,
    //TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

e. OK了，到此為止懶加載配置完成，啟動(dòng)項(xiàng)目試試吧。

image.png

f. 我的項(xiàng)目結(jié)構(gòu)圖如下：

最后

在使用了懶加載之后，每一個(gè)page頁面都需要一個(gè)module，并且使用到該組件的時(shí)候需要使用字符串，而不是組件類型。如上面提到的幾個(gè)選項(xiàng)卡配置，將組件修改為字符串類型。

git代碼地址：
https://github.com/leihfei/ionic3-plugin.git
該項(xiàng)目是下一節(jié)的內(nèi)容，但是我也是使用了懶加載了的。呵呵