在第一节中，我们介绍了页面的懒加载方式，并进行了初步的分析，这里，我们将进一步介绍如何配合页面懒加载进行其他组件Component、Pipe、Directive等的模块化，和加载使用。
首先说明一点，除了页面外的这些其他组件，本质上是没有实现懒加载的，只是通过将其进行模块化，在合适的页面加载时，进行加载，从而基于页面的懒加载机制间接实现了懒加载。
1. 实现模块化
1.1. 示例上下文描述：
1、我们集成了md2、ngx-datatable、ng2-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 }，并在@NgModule的imports部分进行声明，其他的Directive和Pipe不需要；
2)、因为是独立的模块，所以该模块需要依赖的第三方模块必须引入，并在@NgModule的imports部分进行声明，比如ngx-datatable、md2、ng2-tree相关的Module；
3)、一个Component、Directive和Pipe，不能同时在有依赖关系的多个模块中进行declarations和exports，这本身就是一种重复引入，会造成冲突。所以这样在最顶级的模块app.module.ts中就要删掉对这些组件的declarations和exports。
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)、因为是独立的模块，所以如果想直接使用第三方的组件，比如这里想使用md2的datepicker组件，依然需要使用如下两种方式中的一种进行引入：
- 直接引入：就如同上面的实例代码中所示，直接
import { Md2Module } from 'md2';，并且在@NgModule中的imports中声明。 - 间接引入：在引入的其他模块中，例如
MyCompModule中，exports涉及到md2相关的模块，代码示例如下：
将1.2.1节中的mycomp.module.ts改造如下：
...
@NgModule({
...
exports: [
...
Md2Module
]
})
export class MyCompModule {}
好了，这样就实现了其他组件的模块化，并可以通过页面的懒加载机制，实现组件的懒加载。
2. 多页面使用模块重复加载问题
但是是否使用模块化，在对应的懒加载页面，间接实现组件的懒加载，还需要根据情况确定。
例如，如果我们将md2、ngx-datatable、ng2-tree三套控件库通过模块引入的方式，独立引入懒加载页面home.ts和list.ts，但是没有在最顶级的模块app.module.ts中，引入该模块，则会在每个页面编译的结果中，都独立加载以上三套控件库对应代码，造成每个页面都很大，如下图所示：
虽然这样main.js小了一点，但是home.ts对应的0.main.js和list.ts对应的1.main.js都变为了1M多，这样也严重影响了页面的加载速度，如何解决呢？很简单，只需要在最顶级的模块app.module.ts中，引入跨多个页面使用的模块，Ionic在编译的时候，就会自动判断，如果在父级模块中有了，子级模块就不会再冗余编译进去了，是不是很智能：
哈哈，所以这里又引入了一个问题，模块的合理划分，将是一个很重要的问题。