我们的应用程序具有复杂而冗长的 View 。一个 View 有大约 50 个组件,它们具有自己的服务、订阅和行为。组件有自己的变量,包括 Arrays 和 FormGroups。
问题:从 View2(Component2) 导航回 View1(Component1) 后,我仍然在内存选项卡的 chrome devtool 中看到 View2(Component2) 的数据,并且每次它都会在快照中增加 25 MB 内存。
例如:
- View1 的第一次快照 --> 50 MB
- 导航到 View2。导航到 View1 --> 快照大小为 75 MB
- 导航到 View2。导航到 View1 --> 快照大小为 100 MB
每次,当我导航到 View2 时,加载时间都会增加 4-5 秒。 我正在清除 View2 的所有订阅,但在导航 View1 之后,它仍然向我显示所有数组和 FormGroups、View2 组件、带有数据的变量。
我希望 View1 在从 View2 导航后应该具有相同的大小。
我创建了一个小应用程序,结果是一样的,
[![在此处输入图片描述][1]][1]
这是预期的行为还是我需要采取一些措施?
我可以看到所有的 FormGroups,以前 View 的数组。
最佳答案
这些是 Angular 内存泄漏的原因。
取消订阅服务 (API) 调用 => 如果您从一个组件 View 导航到另一个组件 View 并且您没有使用
onDestroy
方法取消订阅第一个 View 服务,它将重新- 递归渲染并导致内存泄漏。延迟加载 => 现在延迟加载是防止内存泄漏或内存消耗的最重要的功能。检查lazy loading in angular链接
没有做代码优化 => 作为开发人员,代码优化是防止内存泄漏最重要的一点,以在不同的组件/服务中重复使用相同的代码或相同的服务。
不使用 Redux/Ngxs/Ngrx => Redux 是在项目中重用相同公共(public)数据的功能之一。
因此,请检查这些要点并将它们应用到您的代码结构中以防止内存泄漏,或者如果您需要任何其他帮助,请提供您的代码结构的额外详细信息。
关于angular - 如何防止 Angular 中的内存泄漏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70527515/