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

Posted 2023-03-13

【中文标题】将离子应用程序转换为延迟加载

【英文标题】：Convert ionic app to lazy loading

【发布时间】：2018-05-10 23:24:52

【问题描述】：

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

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

谢谢！

【参考方案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

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

第二步：删除node_modules文件夹。

第 3 步： 运行 > npm i

【讨论】：

所以我需要在所有页面之间移动并添加此模块？

您需要在这里做一些冗长的工作。请阅读我在上面分享的 2 个文档，如果有任何问题，请在此提问。

谢谢，我会的，顺便说一句，我不明白如何更新 Angular/Ionic。刚刚将 CLI 更新到 3.19.0 但还有什么？

谢谢哥们，也尝试进行转换，但并不顺利..我会再试一次，让你知道！再次感谢您的帮助！

好吧.. NP :)