ionic3新特性懒加载，lazyloading

ionic2结合angular开发成为了前端开发的一段神奇，组件化的开发分离了逻辑和UI的操作，降低了耦合度，极大的提高了开发程序的性能，但是有一个痛点就是，每一次的第一次启动程序的时候都需要花费较多的时间去加载所有的JS和依赖着导致整个APP第一次启动很慢。ionic3解决了这个痛点。采用了新的加载方式：懒加载

懒加载使用方法分三步：

以APP的开始home页为例：

一、在home组件里面添加一个home.module.ts，在这里需要注意导入IonicPageModule组件，同时引入该模组所在组件，也就是home.ts的类名，然后再这个模组里面声明并暴露这个类：

declarations: [HomePage],

 exports: [HomePage]

最后：用ionicpagemodule.forchild方法指定该页面的展示的组件名：

imports: [IonicPageModule.forChild(HomePage)],

这样之后在其他组件push或者调用到这个组件名的时候就会自定找到该组件并显示：

完整代码如下：

import { NgModule }        from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { HomePage }        from './home';@NgModule({  declarations: [HomePage],  imports: [IonicPageModule.forChild(HomePage)],  exports: [HomePage]})export class HomePageModule { }

二：修改home.ts文件：

引ionicpage组件，用来支持页面调用

import { IonicPage }     from 'ionic-angular';

再加入IonicPage装饰器装饰

import { IonicPage }     from 'ionic-angular';

import { Component }     from '@angular/core';import { NavController } from 'ionic-angular';import { IonicPage }     from 'ionic-angular';@IonicPage()@Component({  selector: 'page-home',  templateUrl: 'home.html'})export class HomePage {  constructor(public navCtrl: NavController) {  }}

三、修改appmoudle.ts删除所有home组件的依赖和导入声明等也就是这里面声明的还有import的有关于Home的都删掉。

@NgModule({  declarations: [    MyApp  ],  entryComponents: [    MyApp  ],})

四、修改app.componnet.ts：

在页面调用的地方调用类的名称，记住一定以字符串形式；这是最重要的，重要的事情说三遍：字符串形式字符串形式字符串形式“”“”引号不能少

rootPage:any = "TabsPage";

注意：特别强调一点，在根模组里面也就是app.component.ts里面一定不能加@IonicPage()这个装饰器，也不用在里面import {IonicPage},只需要直接调用字符串形式的类名去找该类名下的组件就可以了。

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

import { Platform }from 'ionic-angular';

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

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

@Component({

templateUrl: 'app.html'

})

export classMyApp {

rootPage:any ="TabsPage";

其次:在根模块的app.module.ts里面也不需要import {IonicPageModule}更不需要引入其他用到的类。只需要引入本身的component类就好了

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

],

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

],

bootstrap: [IonicApp],

entryComponents: [

MyApp

],

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler,useClass: IonicErrorHandler}

]

})

export classAppModule {}

一句话：根模组不用配置任何懒加载的参数装饰器，只需要在需要调用页面的地方用字符串的形式调用页面的类名即可。

参考文章：

http://blog.ionic.io/ionic-and-lazy-loading-pt-1/

http://blog.ionic.io/ionic-and-lazy-loading-pt-2/