Ionic3新特性--页面懒加载2加载其他组件

在第一节中,我们介绍了页面的懒加载方式,并进行了初步的分析,这里,我们将进一步介绍如何配合页面懒加载进行其他组件ComponentPipeDirective等的模块化,和加载使用。
首先说明一点,除了页面外的这些其他组件,本质上是没有实现懒加载的,只是通过将其进行模块化,在合适的页面加载时,进行加载,从而基于页面的懒加载机制间接实现了懒加载。

1. 实现模块化

1.1. 示例上下文描述:

1、我们集成了md2ngx-datatableng2-tree三套控件库;
2、我们自己写了一些简单的Component:

3、在home.ts这个page中需要使用到这些自己写的Component,而且home.ts这个page是基于Ionic的懒加载机制进行编写加载的。

1.2. 实现要点描述

1.2.1. 声明相关的Module

在自定义Component所在的demo文件夹下新建模块声明文件mycomp.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { TreeModule } from 'ng2-tree';
import { Md2Module }  from 'md2';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

import { MyTree } from './mytree';
import { Collapse } from './collapse';
import { Accordion } from './accordion';
import { MyDataTable } from './mydatatable';

@NgModule({
  declarations: [
    MyTree,
    Collapse,
    Accordion,
    MyDataTable
  ],
  imports: [
    IonicModule,
    TreeModule,
    Md2Module,
    NgxDatatableModule
  ],
  exports: [
    MyTree,
    Collapse,
    Accordion,
    MyDataTable
  ]
})
export class MyCompModule {}

关键点描述:
1)、对于Component来说,必须import { IonicModule },并在@NgModuleimports部分进行声明,其他的DirectivePipe不需要;
2)、因为是独立的模块,所以该模块需要依赖的第三方模块必须引入,并在@NgModuleimports部分进行声明,比如ngx-datatablemd2ng2-tree相关的Module;
3)、一个ComponentDirectivePipe,不能同时在有依赖关系的多个模块中进行declarationsexports,这本身就是一种重复引入,会造成冲突。所以这样在最顶级的模块app.module.ts中就要删掉对这些组件的declarationsexports

1.2.2. 在懒加载的Page中引入

先看代码:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { TestTreeComponentModule } from '../../../components/test-tree/test-tree.module'
import { MyCompModule } from  '../../../pages/demo/mycomp.module'
import { Md2Module }  from 'md2';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    TestTreeComponentModule,
    IonicPageModule.forChild(HomePage),
    MyCompModule,
    Md2Module.forRoot()
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

关键点描述:
1)、通过引入MyCompModule,引入了自定义的所有组件;
2)、因为是独立的模块,所以如果想直接使用第三方的组件,比如这里想使用md2datepicker组件,依然需要使用如下两种方式中的一种进行引入:

  • 直接引入:就如同上面的实例代码中所示,直接import { Md2Module } from 'md2';,并且在@NgModule中的imports中声明。
  • 间接引入:在引入的其他模块中,例如MyCompModule中,exports涉及到md2相关的模块,代码示例如下:
    将1.2.1节中的mycomp.module.ts改造如下:
...
@NgModule({
  ...
  exports: [
    ...
    Md2Module
  ]
})
export class MyCompModule {}

好了,这样就实现了其他组件的模块化,并可以通过页面的懒加载机制,实现组件的懒加载。

2. 多页面使用模块重复加载问题

但是是否使用模块化,在对应的懒加载页面,间接实现组件的懒加载,还需要根据情况确定。
例如,如果我们将md2ngx-datatableng2-tree三套控件库通过模块引入的方式,独立引入懒加载页面home.tslist.ts,但是没有在最顶级的模块app.module.ts中,引入该模块,则会在每个页面编译的结果中,都独立加载以上三套控件库对应代码,造成每个页面都很大,如下图所示:

虽然这样main.js小了一点,但是home.ts对应的0.main.jslist.ts对应的1.main.js都变为了1M多,这样也严重影响了页面的加载速度,如何解决呢?很简单,只需要在最顶级的模块app.module.ts中,引入跨多个页面使用的模块,Ionic在编译的时候,就会自动判断,如果在父级模块中有了,子级模块就不会再冗余编译进去了,是不是很智能:

哈哈,所以这里又引入了一个问题,模块的合理划分,将是一个很重要的问题。

参考
Ionic and Lazy Loading Pt 1
Ionic and Lazy Loading Pt 2

posted @ 2017-06-08 10:02  Gavin·Gong  阅读(4483)  评论(0编辑  收藏