使用Ionic3 新特性Lazy Loading加速应用

因为我们使用命令创建的项目是基于ionic2，我们首先要使用ionic3的新特性Lazy Loading就必须对我们的项目进行更改。下面就以修改home页为例。

第一步：

移除app.module.ts中declarations, entryComponents的 HomePage，并移除import { HomePage } from '../pages/home/home'这一项;

第二步:

在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 { }

第三步：

在home.ts文件中添加@IonicPage装饰器，并导入import { IonicPage } from 'ionic-angular';
如下格式：

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

第四步：

移除tabs.ts文件中的
import { HomePage } from '../pages/home/home'这一项

第五步：

在构建过程中，将生成HomePage组件的深层链接，知道如何处理该字符串。
该字符串实际上是对’@ IonicPage’装饰器的name属性的引用，它默认为类名作为字符串。
如果我们将该名称属性更改为其他内容，我们还需要更新我们在其他地方使用的引用。
所以我们需要修改home.ts文件中的
@IonicPage()为@IonicPage({name:’home’})，
并修改tabs.ts文件中
tab1Root = ‘HomePage’为tab1Root = ‘home’;

秒客网