Ionic Lazy Loading (二)

原创

程序员X小鹿 2024-04-22 11:08:55 博主文章分类：前端 ©著作权

文章标签 Ionic Lazy Loading 懒加载封装最小化 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者程序员X小鹿的原创作品，请联系作者获取转载授权，否则将追究法律责任

上一篇 Ionic Lazy Loading(一) 介绍了 Ionic 懒加载的原理及简单的代码实现，这一篇将介绍两种方式来组织 Component，Directives 和 Pipes，使 app 更好地支持懒加载。

1. 方式一：封装模块

这种方式是将每一个 Component，Directive 和 Pipe 封装成一个它自己独立的模块，在需要的 Page 中引入这些单独的模块。这样可以确保 chunks 中不包含不必要的代码，从而保证了在满足正常需求的情况下，chunks 的最小化。结构及模块代码：

Ionic Lazy Loading (二)_懒加载

// music-card module
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MusicCardComponent } from './music-card';
import { MsToMinsPipeModule } from '../../pipes/ms-to-mins/ms-to-mins.module'
@NgModule({
  declarations: [MusicCardComponent],
  imports: [IonicModule, MsToMinsPipeModule],
  exports: [MusicCardComponent]
})
export class MusicCardComponentModule { }

// music-item module
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MusicItemComponent } from './music-item';
import { MsToMinsPipeModule } from '../../pipes/ms-to-mins/ms-to-mins.module'
@NgModule({
  declarations: [MusicItemComponent],
  imports: [IonicModule, MsToMinsPipeModule],
  exports: [MusicItemComponent]
})
export class MusicItemComponentModule { }

// log-elm module
import { NgModule } from '@angular/core';
import { LogElmDirective  } from './log-elm';
@NgModule({
  declarations: [LogElmDirective],
  exports: [LogElmDirective]
})
export class LogElmDirectiveModule { }

// log-evnt module
import { NgModule } from '@angular/core';
import { LogEvntDirective  } from './log-evnt';
@NgModule({
  declarations: [LogEvntDirective],
  exports: [LogEvntDirective]
})
export class LogEvntDirectiveModule { }

// ms-to-mins module
import { NgModule } from '@angular/core';
import { MsToMinsPipe } from './ms-to-mins';
@NgModule({
  declarations: [MsToMinsPipe],
  exports: [MsToMinsPipe]
})
export class MsToMinsPipeModule { }

但是这种方式的缺点就是，你需要确保这些需要 Components，Directives 和 Pipes 的页面，是否引入了正确的模块。当页面和 Components / Derictives / Pipes 特别多的时候，情况可想而知。另一方面，每当添加一个新功能的时候，就要为它创建一个单独的模块，而这每个模块的代码，大约在 6 ~ 10 行之间，这未免会过于重复。

2. 方式二：共享的模块

这种方式是将多个 Components，Directives 和 Pipes 组成一个共享的模块，例如将 music-item 和 music-card 组成一个模块，将 log-elm 和 log-evnt 组成一个模块，而不是将每一个 Component，Directive 和 Pipe 封装成一个它自己独立的模块。结构及模块代码：

Ionic Lazy Loading (二)_最小化_02

// directives.module.ts

import { NgModule } from '@angular/core';
import { LogElmDirective } from './log-elm/log-elm'
import { LogEvntDirective } from './log-evnt/log-evnt'

@NgModule({
  declarations: [LogElmDirective, LogEvntDirective],
  exports: [LogElmDirective, LogEvntDirective]
})
export class DirectivesModule {}

这种方法虽然在一定程度上解决了方法一中的问题，但它同样有它的缺点。假设将 20 多个 Components 组成一个 Shared Module，在某个页面中引入这个模块，也许这个页面只需要其中 3 ~ 4 个组件，但其他一些不必要的组件也被加载进来了，这将增大 chunk 的大小。

3. 比较

	第一种方式	第二种方式
优点	分割和封装简单；不包含不必要的代码，实现 chunk 最小化；	多个 Components / Directives / Pipes 封装成一个共同的模块，避免一个个单独引入的繁琐；
缺点	引入模块过多时比较繁琐；需要为每个 Cmoponent / Directive / Pipe 创建单独的模块，过于重复；	可能会引入不必要的代码，增加 chunk 的大小；