将离子应用程序转换为延迟加载

t0n*_*nty 3 typescript hybrid-mobile-app ionic3 angular

在一个Ionic 3应用程序的工作中,我开始注意到应用程序是一个"慢",所以我听说"懒惰加载"我认为这将是有用的..问题是我已经有一个大量的页面,所以我想知道,有什么方法可以将这些页面转换为Lazy加载?

另一件事是动画在更改页面时,我在加载时使卡片在页面中显示动画,但动画因为应用程序速度慢而损坏..有一种方法可以在页面加载开始时延迟,所以它会更好地展示动画吗?

谢谢!

Sam*_*ath 5

我强烈建议lazy loading在您的应用上实施.它将为您的应用带来巨大的性能提升.我用自己的经验告诉这些事情.

之后,您需要将应用升级到Angular 5 / Ionic 3.9.2.这也会给您的应用带来惊人的性能提升和非常小的捆绑尺寸.

您可能需要的参考资料:

离子和惰性加载Pt 1

离子和懒惰加载Pt 2

Angular 5/Ionic 3.9.2发行说明

如何升级到Angular 5/Ionic 3.9.2

第1步:更改您package.json的内容如下.

"dependencies" : {
  ...
  "@angular/common": "5.0.0",
  "@angular/compiler": "5.0.0",
  "@angular/compiler-cli": "5.0.0",
  "@angular/core": "5.0.0",
  "@angular/forms": "5.0.0",
  "@angular/http": "5.0.0",
  "@angular/platform-browser": "5.0.0",
  "@angular/platform-browser-dynamic": "5.0.0",
  "@ionic/storage": "2.1.3",
  "ionic-angular": "3.9.2",
  "rxjs": "5.5.2",
  "zone.js": "0.8.18"
  ...
},
"devDependencies: {
  "@ionic/app-scripts": "3.1.0"
  "typescript" : "2.4.2"
}
Run Code Online (Sandbox Code Playgroud)

第2步:删除node_modules文件夹.

第3步:运行>npm i