React17.0.2+Webpack5.28本地开发服务崩溃报JS堆内存溢出问题求解

这是中大型React项目使用Webpack5启动本地开发时极其常见的Node堆内存溢出（OOM）问题，大量开发者都踩过同类坑，完全不需要反复重启服务硬扛，按下面的顺序排查修复即可：

先修正基础环境不一致问题 #

• 你标注当前使用的是Node v15.11.0，但报错日志里的实际进程路径指向/Users/eloi/.nvm/versions/node/v14.16.0/bin/node，说明存在nvm版本未正确切换、shell启动脚本内嵌硬编码旧Node路径的问题，先修正这个版本不一致的问题，避免环境混乱。

第一步：快速应急解决（10分钟内即可稳住开发服务） #

• 调高Node的V8堆内存上限。从报错日志能看到，进程堆内存已经摸到了约4GB的默认阈值才触发中断，这个值在当前规模的项目里根本不够用。直接修改package.json的启动脚本，新增Node内存参数：

  "scripts": {
    "start": "NODE_OPTIONS=--max-old-space-size=8192 webpack serve --progress --profile --color"
  }
  

  这个参数会把Node可使用的堆内存上限提到8GB，足够支撑绝大多数项目的日常开发。如果是Windows命令行环境，需要搭配cross-env做跨平台兼容，避免环境变量不生效。
• 临时关闭高内存开销的SourceMap配置：很多项目默认配置了高开销的devtool模式，热更新时会生成大量常驻内存的sourcemap缓存。临时把配置改成devtool: 'eval'，能直接降低30%左右的内存占用。

第二步：根因排查（避免长期靠加内存硬扛） #

• 排查依赖版本的已知bug：
  • 你使用的Webpack 5.28.0是Webpack5正式发布后的早期版本，本身存在多个热更新场景下的内存泄漏问题——webpack-dev-server、webpack-dev-middleware会在多次编译后不释放历史编译的缓存对象，内存会随开发时长线性上涨直到溢出。建议把Webpack、webpack-dev-server、webpack-cli升级到同生态的稳定版本，不要卡在5.28这个有已知问题的早期版本。
  • Node v15是非LTS的奇数版本，本身V8引擎的内存回收策略存在堆回收不及时的问题，建议切换到Node 16/18的长期支持版本，不要使用非LTS版本做日常开发。
• 排查代码层面的内存泄漏：
  • 检查项目里的自定义Webpack插件、自定义loader，如果存在闭包持有Webpack Compilation对象的逻辑，热更新几次之后就会把所有历史编译的对象存在内存里，越用占用越高。
  • 排查项目内的大文件引入，比如未做Tree-shaking的超大JSON文件、全量引入的重型第三方库，这类内容会在编译时全量加载到内存，几次热更新就会把内存占满。

第三步：长期优化降低内存占用 #

• 开启Webpack5自带的文件系统持久化缓存，把编译缓存存在磁盘上，不要全量放在内存里，能直接把开发服务的内存占用降到原来的1/3。
• 开启Webpack的懒编译实验特性，不要启动时就把全量项目模块加载到内存，按需编译对应页面的模块。
• 日常开发时移除启动参数里的--profile，这个参数是用来做构建性能分析的，会全程记录所有模块的编译耗时数据，长时间运行会产生大量常驻内存，日常开发根本不需要开启。

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