Ionic3新特性--頁面懶加載2加載其餘組件

在第一節中，咱們介紹了頁面的懶加載方式，並進行了初步的分析，這裏，咱們將進一步介紹如何配合頁面懶加載進行其餘組件Component、Pipe、Directive等的模塊化，和加載使用。
首先說明一點，除了頁面外的這些其餘組件，本質上是沒有實現懶加載的，只是經過將其進行模塊化，在合適的頁面加載時，進行加載，從而基於頁面的懶加載機制間接實現了懶加載。

1. 實現模塊化

1.1. 示例上下文描述：

一、咱們集成了md2、ngx-datatable、ng2-tree三套控件庫；
二、咱們本身寫了一些簡單的Component:

三、在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在編譯的時候，就會自動判斷，若是在父級模塊中有了，子級模塊就不會再冗餘編譯進去了，是否是很智能：

哈哈，因此這裏又引入了一個問題，模塊的合理劃分，將是一個很重要的問題。

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