【記一次】VUE SSR內(nèi)存泄露解決過程和經(jīng)驗(yàn)總結(jié)

一次vue項(xiàng)目內(nèi)存泄露的排查經(jīng)歷。

先上JS內(nèi)存泄露的幾個常見原因

1. 全局變量引起的內(nèi)存泄漏。
2. 閉包引起的內(nèi)存泄漏.
3. dom清空或刪除時，事件未清除導(dǎo)致的內(nèi)存泄漏

node方面的內(nèi)存泄露也基本差不多，

處理過程了解到的VUE方面的內(nèi)存泄露的原因

1. 計(jì)算屬性無返回情況下，導(dǎo)致的異常 vue高版本已修復(fù).
2. 引用第三方組件，未在destroy函數(shù)進(jìn)行釋放。
3. 事件監(jiān)聽，頁面關(guān)閉后未解綁事件。

這次內(nèi)存泄露的主要原因

vue.use() 全局插件安裝使用導(dǎo)致的，初步分析是使用域?qū)е碌拈]包，重復(fù)安裝插件，未釋放的原因

//組件頁面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()的地方都要進(jìn)行排查，修改調(diào)整，調(diào)整后，服務(wù)器內(nèi)存恢復(fù)正常。

node監(jiān)控平臺服務(wù)器內(nèi)存檢測圖對比

調(diào)整前：

一點(diǎn)攀升，因訪問量比較小，但內(nèi)存隨著時間一點(diǎn)點(diǎn)堆空間上升直到進(jìn)程崩潰重啟。

調(diào)整后：

釋放正常，無訪問時，內(nèi)存恢復(fù) 正常，平靜。

總結(jié)

整體原因分享出來，具體遇到問題的伙伴可以一起溝通。記住遇到到問題要請求幫助，自己的思路有限，集大家的解決問題的思路會更快找出問題所在。

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

1. 回復(fù)資料包領(lǐng)取我整理的進(jìn)階資料包
2. 回復(fù)加群，加入前端進(jìn)階群
3. console.log("點(diǎn)贊===再看===快樂")
4. Bug離我更遠(yuǎn)了，快樂離我更近了