1. 程式人生 > >VUE SSR記憶體洩露解決過程和經驗總結

VUE SSR記憶體洩露解決過程和經驗總結

先上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監控平臺伺服器記憶體檢測圖對比

調整前:
一點攀升,因訪問量比較小,但記憶體隨著時間一點點堆空間上升直到程序崩潰重啟。
image

調整後:
釋放正常,無訪問時,記憶體恢復 正常,平靜。
image

第一次寫總結,寫的不好,整體原因分享出來,具體遇到問題的夥伴可以一起溝通。記住遇到到問題要請求幫助,自己的思路有限,集大家的解決問題的思路會更快找出問題所在。
其次,感謝過程中對自己幫助過的阿里的工程師和其他小夥伴!

-------