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

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

调整后:
释放正常,无访问时,内存恢复 正常,平静。
image

第一次写总结,写的不好,整体原因分享出来,具体遇到问题的伙伴可以一起沟通。记住遇到到问题要请求帮助,自己的思路有限,集大家的解决问题的思路会更快找出问题所在。
其次,感谢过程中对自己帮助过的阿里的工程师和其他小伙伴!

-------

相关文章
|
6月前
|
JavaScript UED SEO
在 Vue 中,如何使用SSR框架进行 SEO优化?
在 Vue 中,如何使用SSR框架进行 SEO优化?
150 3
|
6月前
|
JavaScript
在 Vue 中,如何使用SSR框架?
在 Vue 中,如何使用SSR框架?
83 2
|
6月前
|
JavaScript 搜索推荐 前端开发
Vue的SSR 是什么,优缺点分析
Vue的服务器端渲染(SSR)是一种将Vue组件在服务器上执行,并生成完整的HTML页面的技术,这个HTML页面随后被发送至客户端的浏览器进行展示。
|
6月前
|
JavaScript 搜索推荐 UED
描述 Vue 的服务器端渲染(SSR)。
描述 Vue 的服务器端渲染(SSR)。
57 3
|
JavaScript
Nuxt.js(Vue SSR)项目配置以及开发细节
Nuxt.js(Vue SSR)项目配置以及开发细节
237 0
|
6天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
24 9
|
6天前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
20 2
|
6月前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
47 2
|
6月前
|
缓存 JavaScript 前端开发
Vue的服务端渲染:Vue的服务器端渲染(SSR)技术详解
【4月更文挑战第24天】Vue的服务器端渲染(SSR)能解决SPA的首屏加载和SEO问题。SSR预渲染HTML,提升首屏速度,改善SEO,提供更好的用户体验。Nuxt.js是Vue的SSR框架,简化开发流程。但SSR增加服务器压力,开发成本高,且需处理缓存问题。选择SSR需权衡优劣。本文旨在帮助理解Vue SSR原理、优势及实践方法。
|
6月前
|
JavaScript
vue ssr 报错 ReferenceError: MouseEvent is not defined / window is not defined 等等
vue ssr 报错 ReferenceError: MouseEvent is not defined / window is not defined 等等
163 0