我们有一个具有复杂且冗长视图的应用程序。一个视图大约有 50 个具有自己的服务、订阅和行为的组件。组件有自己的变量,包括数组和表单组。
问题:从 View2(Component2) 导航回 View1(Component1) 后,我仍然在 chrome devtool 的“内存”选项卡中看到 View2(Component2) 的数据,并且每次快照中都会增加 25 MB 内存。
Eg:
- View1 的第一次快照 --> 50 MB
- 导航至视图 2。导航到 View1 --> 快照大小为 75 MB
- 导航至视图 2。导航到 View1 --> 快照大小为 100 MB
每次,当我导航到 View2 时,加载时间都会增加 4-5 秒。
我正在清除 View2 的所有订阅,但在导航 View1 后,它仍然向我显示所有数组和 FormGroup、View2 组件、带有数据的变量。
我期望从 View2 导航后 View1 应该具有相同的大小。
我创建了小型应用程序,结果是相同的,
[![在此处输入图像描述][1]][1]
这是预期的行为还是我需要采取一些步骤?
In actual application, I see below snapshot after navigating back to View1.
我可以看到所有 FormGroup,以及先前视图的数组。
这些都是Angular中内存泄漏的原因。
-
取消订阅服务(API)调用 => 如果您从一个组件视图导航到另一个组件视图,并且您没有使用取消订阅第一个视图服务onDestroy
方法它将递归地重新渲染并导致内存泄漏。
-
延迟加载 => 如今,延迟加载是防止内存泄漏或内存消耗的最重要功能。查看角度延迟加载 https://angular.io/guide/lazy-loading-ngmodules link
-
没有做代码优化 => 作为一名开发人员,代码优化是最重要的一点,以防止内存泄漏在不同的组件/服务中重复使用相同的代码或相同的服务。
-
不使用 Redux/Ngxs/Ngrx => Redux 是在项目中重用相同公共数据的功能之一。
https://www.ngxs.io/getting-started/installation https://www.ngxs.io/getting-started/installation
因此,请检查这些要点并将其应用到您的代码结构中以防止内存泄漏,或者如果您需要任何其他帮助,请提供代码结构的额外详细信息。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)