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

时间：2024-09-20 09:34:38

在第一节中，我们介绍了页面的懒加载方式，并进行了初步的分析，这里，我们将进一步介绍如何配合页面懒加载进行其他组件Component、Pipe、Directive等的模块化，和加载使用。

首先说明一点，除了页面外的这些其他组件，本质上是没有实现懒加载的，只是通过将其进行模块化，在合适的页面加载时，进行加载，从而基于页面的懒加载机制间接实现了懒加载。

1. 实现模块化

1.1. 示例上下文描述：

1、我们集成了md2、ngx-datatable、ng2-tree三套控件库；

2、我们自己写了一些简单的Component:

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

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在编译的时候，就会自动判断，如果在父级模块中有了，子级模块就不会再冗余编译进去了，是不是很智能：

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

参考

Ionic and Lazy Loading Pt 1

Ionic and Lazy Loading Pt 2

相关文章