如何防止 Angular 中的内存泄漏

Question

我们的应用程序具有复杂而冗长的视图。一个视图有大约 50 个组件，具有自己的服务、订阅和行为。组件有自己的变量，包括 Arrays 和 FormGroups。

问题：从 View2(Component2) 导航回 View1(Component1) 后，我仍然在 Memory 选项卡的 chrome devtool 中看到 View2(Component2) 的数据，并且每次在快照中增加 25 MB 内存。

例如：

• View1 的第一次快照 --> 50 MB
• 导航到 View2。导航到 View1 --> 快照大小为 75 MB
• 导航到 View2。导航到 View1 --> 快照大小为 100 MB

每次导航到 View2 时，加载时间都会增加 4-5 秒。 我正在清除 View2 的所有订阅，但在导航 View1 之后，它仍然向我显示所有 Arrays 和 FormGroups、View2 组件、带有数据的变量。

我希望 View1 在从 View2 导航后应该具有相同的大小。

我创建了一个小应用程序，结果是一样的，

[![在此处输入图片描述][1]][1]

这是预期的行为还是我需要采取一些措施？

在实际应用中，我在导航回 View1 后看到下面的快照。

我可以看到所有的 FormGroups，以前的 Views 的数组。

Answer 1

这些是 angular 内存泄漏的原因。

1. 取消订阅服务（API）调用 => 如果您从一个组件视图导航到另一个组件视图并且您没有使用 onDestroy 方法取消订阅第一个视图服务，它将递归地重新渲染并导致内存泄漏。

2. 延迟加载 => 如今，延迟加载是防止内存泄漏或内存消耗的最重要功能。查看lazy loading in angular链接

3. 没有做代码优化 => 作为开发人员，代码优化是防止内存泄漏以在不同组件/服务中重用相同代码或相同服务的最重要的一点。

4. 不使用 Redux/Ngxs/Ngrx => Redux 是在项目中重用相同公共数据的功能之一。

   https://www.ngxs.io/getting-started/installation

因此，请检查这些要点并将它们应用于您的代码结构以防止内存泄漏，或者如果您需要任何其他帮助，请提供您的代码结构的更多详细信息。