Next.js应用next-router-worker进程内存泄漏排查求助

我的Next.js生产环境应用服务器内存占用过高且持续增长，疑似next-router-worker进程存在内存泄漏，服务器htop命令输出显示异常。应用已按官方文档构建，Node.js版本为18.18.2，更换Next.js版本（当前使用13.5）无效，当前package.json内容如下：

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tanstack/react-query": "^4.32.6",
    "axios": "^1.4.0",
    "axios-extensions": "^3.1.6",
    "dayjs": "^1.11.7",
    "jotai": "^2.1.0",
    "next": "13.5",
    "react": "18.2.0",
    "react-currency-input-field": "^3.6.11",
    "react-dom": "18.2.0",
    "react-google-recaptcha": "^3.1.0",
    "react-input-mask": "^2.0.4",
    "react-slick": "^0.29.0",
    "react-transition-group": "^4.4.5",
    "sass": "^1.62.1",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "@testing-library/react": "^14.0.0",
    "@types/node": "20.2.5",
    "@types/react": "18.2.7",
    "@types/react-dom": "18.2.4",
    "@types/react-google-recaptcha": "^2.1.5",
    "@types/react-input-mask": "^3.0.2",
    "@types/react-slick": "^0.23.10",
    "@types/react-transition-group": "^4.4.6",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.4",
    "replace-in-file": "^7.0.1",
    "typescript": "5.0.4"
  }
}

请问可能的问题是什么？除更换版本外还可以尝试哪些解决办法？

• next-router-worker是Next.js 13+用于路由处理的后台进程，内存泄漏可能源于路由系统的异常逻辑，比如重复注册路由监听、未正确清理路由相关的订阅/事件监听
• 第三方依赖内存泄漏：react-slick、react-transition-group这类DOM操作频繁的库，可能在路由切换时未正确销毁实例或事件监听；@tanstack/react-query若未配置合理缓存策略，会导致大量缓存堆积占用内存
• 自定义路由逻辑缺陷：项目中若有自定义路由拦截、导航守卫，可能存在未释放的闭包引用，导致内存无法被垃圾回收
• Node.js版本兼容性细节：Node.js 18.18.2与Next.js 13.5的内存回收机制在特定场景下交互异常，虽更换Next.js版本无效，但进程级的内存管理逻辑可能存在冲突

排查内存泄漏根源 #

• 生成内存快照：用node --inspect启动生产服务器，通过Chrome DevTools的Memory面板捕获next-router-worker进程的多次内存快照，对比找出持续增长的对象，定位泄漏点
• 启用路由调试日志：启动时添加NEXT_DEBUG=router环境变量，查看路由处理过程中的异常日志，比如重复初始化、未完成的导航任务

针对性优化措施 #

• 优化第三方依赖：
  • 检查react-slick使用：确保组件卸载时调用slick实例的destroy方法，避免DOM元素残留；升级至最新稳定版修复已知泄漏问题
  • 配置@tanstack/react-query缓存：设置合理的staleTime、cacheTime，开启gcTime自动清理过期缓存，防止无限制缓存数据
  • 升级老旧依赖：react-input-mask 2.x版本可能存在未清理的事件监听，尝试升级到兼容React 18的新版本
• 修复路由相关逻辑：
  • 检查自定义路由钩子/导航逻辑，在组件卸载的useEffect清理函数中取消所有路由事件监听（如移除router.events.on的回调）
  • 确保路由操作仅在客户端组件中执行，避免服务端组件触发客户端路由逻辑
• 调整Node.js启动参数：
  • 添加--max-old-space-size限制进程内存上限，例如next start --max-old-space-size=4096，促使Node.js更早触发垃圾回收
  • 启用--expose-gc参数，结合定时脚本手动触发垃圾回收（仅应急使用，不推荐长期依赖）
• 禁用路由Worker优化：
  • 在next.config.js中添加配置experimental: { routerWorker: false }，关闭next-router-worker进程，回退到传统路由处理方式，验证是否由该进程导致泄漏

内容的提问来源于stack exchange，提问作者Alexander