在第一節中，我們介紹了頁面的懶加載方式，並進行了初步的分析，這里，我們將進一步介紹如何配合頁面懶加載進行其他組件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在編譯的時候，就會自動判斷，如果在父級模塊中有了，子級模塊就不會再冗余編譯進去了，是不是很智能：
哈哈，所以這里又引入了一個問題，模塊的合理划分，將是一個很重要的問題。