Ionic3懒加载实现

为什么使用懒加载？
在实际开发中，越复杂的功能就会占用越多资源，写越多的代码，那么打开App的时候就需要用更多的时间，因为是同时加载了所有的资源，切换也会使用更多的时间。那么为什么我需要什么才加载什么呢？

未使用懒加载之前：

image.png

可以在上图明显的看到三个选项卡布局的App把所有的资源都进行加载了，但是目前我只显示了home这个页面，另外两个页面我不需要立马加载的呀。

好了，问题的抛到这里，下面就进行怎么使用懒加载进行简单的说一下吧。

1.需要知道的几个概念，我不解释，angular学习中有。

• 组件
• 装饰器
• 模块

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中去掉对HomaPage,AboutPage,ContactPage的组件引用，更改为字符串,并且还需要在app.component.ts中，对rootPage:any = TabsPage也要设置为字符串.

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中添加该装饰器，否则启动报错。

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了，到此为止懒加载配置完成，启动项目试试吧。

image.png

f. 我的项目结构图如下：

最后

在使用了懒加载之后，每一个page页面都需要一个module，并且使用到该组件的时候需要使用字符串，而不是组件类型。如上面提到的几个选项卡配置，将组件修改为字符串类型。

git代码地址：
https://github.com/leihfei/ionic3-plugin.git
该项目是下一节的内容，但是我也是使用了懒加载了的。呵呵