排查 Nuxt.js服务器端内存泄漏问题(Nuxt 3同理

2,740 阅读2分钟

总结

1、做一个git bisect来查找泄露的提交。

2、以调试模式启动你的node服务器

// npm
node --inspect node_modules/.bin/nuxt start

// pnpm 
node --inspect node_modules/nuxt/bin/nuxt.mjs start 

3、使用Chrome devtools(按F12就知道了)获取服务器的第一个内存堆快照

4、模拟用户流量并拍摄第二张快照以了解是否存在泄漏

ps:精华都在底部的参考👇👇👇

步骤

步骤一:安装工具

siege:模拟用户流量、并发访问。(下载具体版本的点这里)

下载好了解压

执行以下步骤

cd siege-4.1.6/
./configure
make
sudo make install

验证一下siege -V

image.png

步骤二:构建并以检查模式启动(必须build一下

必须构建 Nuxt.js 项目并以检查模式启动它才能打开Node.js调试器。

image.png 注意环境变量啥的,没有可以忽略。

npm run build:test

构建完成再执行一下代码

npm run debug
// node --inspect node_modules/.bin/nuxt start

步骤三:获取快照

一般我们访问localhost:3000上检查我们的本地nuxt服务器时,我们不能直接拍摄快照,因为它会分析客户端

1、在Chrome上访问:chrome://inspect

本地服务器应显示在远程目标下方。如果没有,请检查终端上的调试器端口(默认情况下应为 9229),点击configure配置按钮并添加 localhost:9229

image.png

2、点击一下inspect会打开一个常规的检查器。

image.png

image.png

转到内存获取第一张队快照,方便对比。

3、发起并发访问

siege -c 100 -r 40   http://localhost:3000

-c: 并发数 -r: 重复次数

并发访问结束之后获取第二张堆快照

image.png

如果快照大小相似,则没有内存泄漏。

通过比较可以看出大小增加了

image.png

起初打算通过快照对比,找到泄露的原因。但实际上很难找到明确的点在哪里。

所以最好的办法是通过git bisect结合以上操作,直到找出问题为止。

附上一个Node.js内存泄露的DOME

index.js


const http = require('http');
const dummyjson = require('dummy-json');

const xxxx = [];

function leakyServer(req, res) {

  const response = dummyjson.parse(`
    {
      "id": {{int 1000 9999}},
      "name": "{{firstName}} {{lastName}}",
      "work": "{{company}}",
      "email": "{{email}}"
    }
  `);


  xxxx.push(JSON.parse(response));
  res.end(response);
}

const server = http.createServer(leakyServer)
  .listen(process.env.PORT || 3000);

package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node --inspect=8080 index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dummy-json": "^3.0.5"
  }
}

参考:

工具篇

排查篇