Ionic Lazy Loading (一)
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. 意义
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/
上一篇: Throws与Throw
下一篇: Java 单例设计模式 常见4种