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