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/