VUE SSR記憶體洩露解決過程和經驗總結
阿新 • • 發佈:2018-12-27
先上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監控平臺伺服器記憶體檢測圖對比
調整前:
一點攀升,因訪問量比較小,但記憶體隨著時間一點點堆空間上升直到程序崩潰重啟。
調整後:
釋放正常,無訪問時,記憶體恢復 正常,平靜。