VUE SSR内存泄露解决过程和经验总结

简介： 一次vue项目内存泄露的排查经历。

 

先上JS内存泄露的几个常见原因

1.全局变量引起的内存泄漏。
2.闭包引起的内存泄漏.
3.dom清空或删除时，事件未清除导致的内存泄漏

node方面的内存泄露也基本差不多，

处理过程了解到的VUE方面的内存泄露的原因

1.计算属性无返回情况下，导致的异常 vue高版本已修复.
2.引用第三方组件，未在destroy函数进行释放。
3.事件监听，页面关闭后未解绑事件。

这次内存泄露的主要原因

vue.use() 全局插件安装使用导致的，初步分析是使用域导致的闭包，重复安装插件，未释放的原因

//组件页面A：
function install(Vue){
  Vue.directive("k-scroll", {
    bind (el, binding, vnode) {

    }
  });
}
export default {install};

//安装插件页面
import Vue from 'vue';
import A from "./A";
Vue.use(A);

后期修改成：

import Vue from 'vue';
let isinstallKeep = false;
function installKeep() {
    if(isinstallKeep) return;
    isinstallKeep = true;
    Vue.directive("k-scroll", {
        bind(el, binding, vnode) {

        }
    });
}
installKeep();

不用到vue.use()来安装,可解决，主要是在vueSSR的情况，用到vue.use()的地方都要进行排查，修改调整，调整后，服务器内存恢复正常。

node监控平台服务器内存检测图对比

调整前：
一点攀升，因访问量比较小，但内存随着时间一点点堆空间上升直到进程崩溃重启。

调整后：
释放正常，无访问时，内存恢复 正常，平静。
 

第一次写总结，写的不好，整体原因分享出来，具体遇到问题的伙伴可以一起沟通。记住遇到到问题要请求帮助，自己的思路有限，集大家的解决问题的思路会更快找出问题所在。

其次，感谢过程中对自己帮助过的阿里的工程师和其他小伙伴！

-------