ionic3懒加载改造

用过ionic3的都知道,当创建一个项目时,默认只有一个module.ts,那就是app.module.ts

此时如果我们有两个页面A,B,想要从A页面跳到B页面

• 首先新建对应的A,B页面的 html ts scss
• 然后在app.module.ts中导入,声明对应的两个ts
• 然后在a.ts中使用 import PageB from './b.ts'
• 再使用 this.navCtrl.push(PageB) 才能实现A->B的页面跳转

以上这种页面机制就不是懒加载

当不是懒加载时,app打包后,启动app时,会将所有导入app.module.ts的页面全都加载完毕才进入app,这样会导致一个问题,就是如果页面数量过多,代码量大,功能复杂,那么app的启动速度会很慢

懒加载的主要作用就是解决app启动速度过慢

如何改造懒加载?

• 去掉app.module.ts中声明的页面
• 每个页面都有一个对应的module.ts
• 对应的页面.ts使用IonicPage特性
• 页面跳转新写法

示例

第1步

app.module.ts 删除pageA.ts相关导入和声明

第2步

pageA.ts

import { IonicPage } from 'ionic-angular';

segment必须唯一,相当于路由

@IonicPage({ name: 'PageA', segment: 'app/pagea' })
@Component({
    selector: 'app-pagea',
    templateUrl: './pageA.html',
})
export class PageA {}

第3步

新建pageA.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PageA } from './pageA';

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

  exports: [
    PageA,
  ],
  providers: [

  ]

})

export class PageAModule { }

第4步

同理pageB也这样改造

第5步

使用这样的路由跳转就可以实现A->B的页面跳转
pageA.ts

this.navCtrl.push('PageB')

第6步

验证一下懒加载
打开谷歌浏览器f12里面的network,当我们从A页面跳转到B页面时
发现了类似0.js的数字开头的js文件加载了出来
这就是懒加载,用到哪个页面模块就去加载哪个模块的代码

注意事项

1 当我们页面有providers时如何适配懒加载机制(比如页面中使用了camera组件)

第1步

删除app.module.ts里面的camera导入和声明

第2步

在对应的页面module.ts里面增加camera导入和声明

import { Camera } from '@ionic-native/camera';
providers: [
    Camera,
]

2 当我们写了自定义组件,需要在多个页面中导入使用组件,该怎么适配懒加载机制

比如component目录下面有一个card.ts,A,B两个页面都需要使用该组件

第1步

card.ts不用写IonicPage特性

第2步

新建card.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { CardComponent } from './card';

@NgModule({
    declarations: [
        CardComponent
    ],
    imports: [IonicModule],
    exports: [
        CardComponent
    ]
})
export class CardComponentModule { }

第3步

在对应的页面的module.ts中导入CardComponentModule

pageA.module.ts

import { CardComponentModule } from '../../component/card.module';
imports: [
   CardComponentModule,
   IonicPageModule.forChild(PageA),
],

第4步

然后就可以在页面中使用card组件了

<com-card></com-card>

3 当我们使用了第三方插件怎么办

比如我们使用了一个图片裁剪组件 ngx-image-cropper

第1步

删除插件在app.module.ts中的导入和声明

第2步

在对应的页面module.ts中导入和声明

import { ImageCropperModule } from 'ngx-image-cropper';
imports: [
 ImageCropperModule,
 IonicPageModule.forChild(PageA),
],