查找未销毁的Vue组件

Question

如果我加载应用程序并立即拍摄Chrome内存堆快照，则会得到以下结果。

如果单击我的Web应用程序，然后返回到加载的原始页面，并拍摄另一个内存堆快照，则会得到以下结果。

由此可见，现在VueComponents的数量约为10倍，Vue实例的数量也在增加。

这对应用程序的内存使用量有很大的影响。

有哪些工具/方法可用来追踪未被破坏的罪魁祸首？

Answer 1

追踪孤立的 Vue 组件

正如问题所暗示的，我非常确定这些内存问题是由未清理的孤立 Vue 组件引起的。可以查看源代码中的循环引用等...并手动修复。

我正在寻找一种方法来查找特定的 Vue 组件，以便我可以缩小代码中的搜索范围。

使用堆快照

我发现的最好的方法确实需要一些手动操作，但效果很好。

从 Chrome 开发工具堆快照中我们可以搜索分离

注意：您必须为开发而非生产环境编译 Vue，否则这将不起作用

这将显示已从 DOM 分离的元素列表。

我们现在可以单击其中一项以突出显示它。

然后我们可以转到 Chrome 开发工具控制台并键入$0以获取元素。

从这里我可以看出，从我的登录页面输入的电子邮件是罪魁祸首，所以我应该调查为什么它没有被销毁。

结论

虽然这确实提供了一种追踪未被破坏的组件的好方法，但请注意，并非所有detached节点都是坏的，请应用应用程序的上下文来确定是否存在内存泄漏。