欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ionic Lazy Loading (一)

程序员文章站 2022-07-14 10:40:25
...

1. 什么是 Ionic Lazy Loading


Ionic Lazy Loading 是 Ionic 3 的一项新特性。NgModule 可以组织 App 的 Pages 并将它们分成一个个不同的 chunks,通过设置某些模块为延迟加载,只有用户在打开相关页面的时候,该页面所在模块的 js 文件才会去下载,这样会减小用户初次下载文件的大小,从而加快了 App 首次启动的时间。


2. 如何实现 Ionic Lazy Loading


创建 Ionic 工程:ionic start LazyLoadingDemo tabs

以修改 `Home` Tab 为例,来实现 Lazy Loading。


1.在 app.module.ts 中:

移除 declarations,entryComponents 中的 HomePage,并移除 import { HomePage } from '../pages/home/home'。


2. 新建 home.module.ts:

在 home 文件夹内新建文件 home.module.ts,并在该文件中加入以下代码:

import { NgModule } from '@angular/core';
import { HomePage } from './home';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
    declarations: [HomePage],
    imports: [IonicPageModule.forChild(HomePage)],
})
export class HomePageModule { }

IonicPageModule 是一个新的概念,它和 app.module.ts 中的 IonicModule 类似。它会告诉 Ionic为了这个 chunk 什么组件应该被下载或被提供。这里 export 属性可以先不写。


3. 在 home.ts 中:

添加 @IonicPage 装饰器,并导入 import { IonicPage } from 'ionic-angular'; 

@IonicPage({ name:'home'}) // 或 @IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  //省略代码
}

这里的 IonicPage 装饰器就是告诉 Ionic 如何在 App 构建的时候为 App 生成正确的 mappings 和 URLs 的。IonicPage 还可以传入一些其他参数,这里就不再解释,具体可以考 https://ionicframework.com/docs/api/navigation/IonicPage/。这里我们只需要知道,当我们需要导航到我们的 Component 或在代码里引用我们的 Component 的时候,只需要传入 ‘home' 这个字符串来代替以前的类的引用。这样就避免了在用到该 Page 的时候多次 import 这个类的写法,使代码更简洁。'home' 为 IonicPage 里 name 属性的引用。如果省略 IonicPage 的 name 属性,写成 @IoncPage() 这样的话,传入的字符串为类名的字符串,即 ’HomePage'。


4. 在 tabs.ts 中:

移除 import { HomePage } from '../pages/home/home' 并修改 tab1Root = HomePage 为 tab1Root = ‘home’。

到此,Ionic Lazy Loading 就实现完成了。


3. 意义


Ionic Lazy Loading (一)

Ionic Lazy Loading (一)

main.js 包含 root app component,angular,and initial dependencies,0.js 只包含 HomePage。当点击另外两个 Tab,`About` Tab 和 `Contact` Tab 的时候才会去请求加载这两个 Tab 的 js 文件(如第二幅图中新生成的 1.js 和 2.js)。   

        
使用 Lazy Loading 前的 main.js 大小: 17,541 字节(磁盘上的 20 KB)          
使用 Lazy Loading 后的 main.js 大小: 10,477 字节(磁盘上的 12 KB)          
在使用了 Lazy Loading 后,main chunk 更小了,从而实现了更快的加载。 


需要注意的是,Lazy Loading 并没有实现 app 最终的 bundle 变小了,而是只在需要的时候才去加载相应模块的 bundle 文件。随着 App 内容的增多,懒加载将会显得尤为重要。如果你的 App 有 几十个 Pages 和 UI Components,将所有这些一起加载,将会是一个相当耗时的操作。但如果将这些组件模块化,在需要的时候再去加载相应的模块,将会有更好的用户体验。


4. 参考网址


https://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/