NUXT内存泄漏引发问题

起因

项目中使用了nuxtjs框架进行开发，在开发测试过程中均无出现任何异常。部署上线到正式生产环境之后，运行了五六天之后node异常，服务停止响应，pm2管理平台无法恢复应用程序。需要进入生产环境进行重启项目。查阅运行日志之后发现生产服务器会缓慢堆积tcp链接。在到一定的程度之后，会引发node程序 cpu 100%占用，停止响应。最初阶段以为是_nuxt下的文件并未通过nginx访问，而是通过node进行读取的，造成文件打开过多，重新配置了nginx静态文件读取规则之后，问题依旧。在解决这个问题的过程中发现某个文章中提到，如果node内存泄漏会造成node进程跑满当前cpu,并且打开文件数飙增。

调试

调试工具

node-heapdump chrome调试工具

调试流程

安装node-heapdump。

npm install node-heapdump --save-dev

打开项目根目录的nuxt.config.js文件，进行heapdump配置。

// 内存快照代码
 var headpdump = require('heapdump')
//
 setInterval(function () {
   console.log('st headpdump')
   headpdump.writeSnapshot(function(err, filename) {
     console.log('dump written to', filename)
   })
 }, 15000)
 
 
module.exports = {...// nuxt配置}

我设定了每1.5秒,heapdump进行内存快照一次。并且在间隔过程中进行以下操作。

载入页面，等候一次快照 刷新一次页面，等候一次快照 等待快照完成之后，heapdump会将快照文件保存在项目根目录中。

接着，我们打开chrome开发者工具，切换到memory选项卡，点击load载入hepdump生成在根目录的文件。

分别载入第一次页面快照，跟刷新一次之后的快照。我们点击切换右侧下拉箭头的视图选项卡类型。点击切换视图到Comparison。

在等候Chrome比对两个文件之后，可以看到第二个文件的内存快照信息。查看右侧# Delta选项。

可以看到 刷新一次之后，增加了69个闭包未释放。展开闭包(closure)可以看到大量的request请求未释放。由此可见，问题出现在项目中服务端请求服务接口上。

解决问题

检查services文件中的请求方法代码。

import Urls from './url'
import Fetch from './fetch.js'
 
 
let fn = {}
Object.keys(Urls).forEach(key => {
  fn[key] =  (data, headers) => {
    return new Promise((resolve, reject) => {
      resolve(Fetch(Urls[key].url, {method: Urls[key].method, data, headers}))
    })
  }
})
 
 
export default fn

发现了问题，services 通过return请求，但是使用的数据都是通过箭头方法传递到下一层，变量被层层引用，这样会造成闭包无法完全释放。因为传入的数据一直都有引用无法gc，这样也造成了node打开的tcp链接无法关闭释放。

我们修改了services方法，经过修改的代码如下:

import Urls from './url'
import Fetch from './fetch.js'
 
 
let fn = {}
Object.keys(Urls).forEach(key => {
  fn[key] = function (data, headers) {
    return Fetch(Urls[key].url, {method: Urls[key].method, data, headers})
  }
})
 
 
export default fn

再次通过调试流程生成内存快照，发现request闭包都回收完毕。内存泄漏问题初步告一段落，项目更新之后已稳定运行。

结尾彩蛋

欢迎关注前端之阶公众号，获取更多前端知识，加入前端大群，与知名互联网大佬做朋友，开启共同学习新篇章！