nuxt.js之SSR服务端内存泄漏导致CPU过高的解决过程

问题

最近在公司维护nuxt项目时，线上遇到了一个问题——访问网站，网站会报502或者JS、css资源报502。

去运维那一查pm2，项目node服务器的CPU达到了100%，实际上这段时间并没有人访问，那是为什么CPU会100%从而导致node服务器无法正常运行？

分析

太多的分析就不说了，期间向几个方向都排查过：

nuxt社区有人说是nuxt框架问题，某些版本会出现node服务端内存泄漏。
第三方组件未在destroy时进行释放，或者事件监听，页面关闭后未解绑事件。
代码的书写问题，闭包引起的内存泄漏。
用谷歌浏览器工具分析网站内存使用情况，发现大量Vue.component组件未释放。
官网说SSR最好不要使用Vue.use()和 Vue.component()，这会导致内存泄漏（官网链接）。

我们可以得出大概率是node服务端内存泄漏，导致CPU缓慢升高，每请求一次网站页面都会造成重复的代码块积累在服务端，并且不会释放。

解决

我们找到项目中使用Vue.use()的地方，并打log查看。

import Vue from 'vue'
import Errors from '@/components/custom/Errors'export default () => {Vue.use(Errors)console.log(Vue, 'logVue');
}

多次刷新页面，我们可以看到在控制台看到node服务端的log情况。搜索Errors，有大量重复的Errors组件，实际上只需要一个Errors组件就够了。

找到了问题，接下来就好办了。在Vue.use() 注册时检查服务端是否注册过，如果注册过，就不再注册：

import Vue from 'vue'
import Errors from '@/components/custom/Errors'export default () => {if (Vue._use_components) {return}Vue._use_components = trueVue.use(Errors)console.log(Vue, 'logVue');
}

可以看到打印出来的log，多次刷新请求服务器，Errors组件也不会被多次注册了。

总结

1、用到第三方组件在页面生命周期结束前destroy释放，

2、事件监听，生命周期结束前解绑事件。

3、接下来只需要将用到 Vue.use()和Vue.component()地方的代码加上判断优化。

4、冗余保护：因为我们的CPU设置的是1024M，所以我们在pm2加上：

"max_memory_restart": "1000M"

如果CPU达到1000M内存阈值，则重新启动。

优化后项目CPU运行情况：

nuxt.js之SSR服务端内存泄漏导致CPU过高的解决过程相关推荐

Nuxt.js 开发SSR(服务端渲染)Web应用
1. 初识 Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架. 与 vuepress 的关系: Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计, ...
nuxt.js实战asyncdata服务端渲染
Nuxt扩展了Vue的生命周期: export default {middleware () {}, //服务端,中间件validate () {}, // 服务端asyncData () {}, / ...
SSR服务端渲染（nuxt重构项目）
SSR服务端渲染(nuxt重构项目) 目的:优化SEO,提高网站权重 ,页面静态化,强化搜索引擎,提高首屏渲染速度参考文档:https://zh.nuxtjs.org/guide/installat ...
Nuxt SSR 服务端渲染详解
Nuxt SSR 服务端渲染详解 1.Nuxt项目构建 2.Nuxt的生命周期 2.1 nuxtServerInit 钩子 2.2 middleware 中间件 2.3 validate 数据校验 ...
什么是SSR服务端渲染
SSR简介 SSR 是Server Side Render简称:就是在服务端进行渲染生成html文件,浏览器世界显示生成html文件, 补充:我们传统使用的属于CSR是Client Side Rend ...
SSR 服务端渲染与 CSR 客户端渲染
SSR 服务端渲染与 CSR 客户端渲染 SSR 服务端渲染 CSR 客户端渲染本文要点: 介绍 SSR 服务端渲染概念.优点.缺点.案例及常用框架. 介绍 CSR 服务端渲染概念.优点.缺点. S ...
nuxt.js的ssr渲染
nuxt.js的ssr渲染 1.为什么要用到nuxt?有什么优势? 1.1 为什么要用到nuxt? 首先要了解nuxt是什么?具体有什么作用? Nuxt.js:Vue.js的通用框架,集成了vue2. ...
Nuxt.js开启SSR渲染快速入门
Nuxt.js开启SSR渲染快速入门第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的, ...
nuxt.js实战之移动端rem
nuxt.js的项目由于是服务端渲染,通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷.由于设置字体的代码不能做服务端渲染,导致服务端返回的代码一开始没有相应的跟字体,直到与前端代码进行 ...

nuxt.js之SSR服务端内存泄漏导致CPU过高的解决过程

问题

分析

解决

总结

nuxt.js之SSR服务端内存泄漏导致CPU过高的解决过程相关推荐

最新文章

热门文章