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

Question

在开发 Ionic 3 应用程序的过程中，我开始注意到该应用程序有点小 "slow" 所以我听说了 "Lazy Loading" 我认为它在这里很有用.. 问题是我已经有大量的页面，所以我想知道，有什么方法可以将这些页面转换为延迟加载？

另一件事是更改页面时的动画，我制作了卡片，当我加载它时在页面中动画，但动画已损坏，因为应用程序很慢..有一种方法可以在开始时进行延迟页面加载以便更好地显示动画？

谢谢！

Answer 1

我强烈建议在您的应用中实施 lazy loading。它会给您的应用程序带来巨大的性能提升。我是用我自己的经历来讲述这些事情的。

之后，您需要将应用升级到 Angular 5 / Ionic 3.9.2。这也将为您的应用带来惊人的性能改进和非常小的包大小。

您可能需要的参考资料：

Ionic and Lazy Loading Pt 1

Ionic and Lazy Loading Pt 2

Angular 5 / Ionic 3.9.2 release notes

如何升级到Angular5 / 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"
}

步骤 2： 删除 node_modules 文件夹。

第 3 步： 运行 > npm i

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

Convert ionic app to lazy loading

typescript

hybrid-mobile-app

ionic3

angular