在 Azure 上运行的 Vuejs 应用程序的页面无响应和内存泄漏问题

分享于2022年07月17日 asp.net-core-webapi azure memory-leaks vue.js 问答
【问题标题】:在 Azure 上运行的 Vuejs 应用程序的页面无响应和内存泄漏问题(Page Unresponsive & Memory Leak Issue with Vuejs Application Running on Azure)
【发布时间】:2022-02-02 13:12:37
【问题描述】:

我有一个使用 VueJS 和 .Net Core Web Api 开发的 Web 应用程序,它目前在 Azure 上运行。每当生产出现错误时,无论是前端还是后端,站点都会冻结并显示页面无响应提示。该错误还会导致内存泄漏,因为浏览器进程的内存和 CPU 使用率显着增加。错误后继续的唯一方法是关闭页面并重新加载。这在开发环境中不会发生。在我们的本地主机中,它显示错误消息并继续而不被冻结。任何想法将不胜感激。非常感谢!

  • Vue 应用程序中的内存泄漏通常不是来自 Vue 本身,而是在将其他库合并到应用程序时发生。

【解决方案1】:

在删除 select DOM 之前,我们需要使用一些方法进行一些清理并解决内存泄漏。我们将在 Vue 实例的数据对象中保留一个清理属性,我们将使用 Choices API’s destroy() 方法来执行清理。

例如:我在我的 .js 文件中使用了 clean 函数

Clean: function () {
    // use the reference to Choices to perform clean up here
    // prior to removing the elements from the DOM

    this.< mention Method you want to cleanup>.destroy()
}

如果你已经在你的项目中使用了destroy,请关注 this

参考 Avoiding Memory Leaks in Vue)