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

时间:2022-11-27 23:02:15

因为我们使用命令创建的项目是基于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’;