【记一次】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监控平台服务器内存检测图对比

调整前：

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

调整后：

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

总结

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

原文 https://developer.aliyun.com/article/682846

1. 回复资料包领取我整理的进阶资料包
2. 回复加群，加入前端进阶群
3. console.log("点赞===再看===快乐")
4. Bug离我更远了，快乐离我更近了