Vue项目Serve/Build触发Fatal JavaScript invalid size error排查求助

执行Vue项目开发服务启动或构建操作时，出现以下V8致命错误：

INFO  Starting development server...
[70%] sealing (finish module graph ESLintWebpackPlugin_1)


#
# Fatal error in , line 0
# Fatal JavaScript invalid size error 169220804
#
#
#
#FailureMessage Object: 00000075C11FC8E0
 1: 00007FF78CD49E7F node_api_throw_syntax_error+175967
 2: 00007FF78CC6036F v8::CTypeInfoBuilder<void>::Build+11999
 3: 00007FF78DACD182 V8_Fatal+162
 4: 00007FF78D60A265 v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArray+101
 5: 00007FF78D48F8E3 v8::internal::FeedbackNexus::ic_state+65795
 6: 00007FF78D4AE460 v8::Context::GetIsolate+15600
 7: 00007FF78D2FAA40 v8::internal::CompilationCache::IsEnabledScriptAndEval+25952
 8: 00007FF78D8078B1 v8::internal::SetupIsolateDelegate::SetupHeap+558193
 9: 00007FF70EB45D8E

已知该错误由无限循环/递归导致内存溢出，但现有方案仅针对单个JS文件，需解决两个核心问题：

1. 如何在.vue文件中识别此类循环/递归
2. 如何定位Webpack最后处理的文件

背景：此前错误曾偶然消失，但回退旧提交、重新克隆仓库并重装依赖均无法解决当前问题。

排查解决方法 #

1. 定位最后处理的文件 #

• 临时禁用ESLintWebpackPlugin：错误卡在finish module graph ESLintWebpackPlugin_1，先在vue.config.js或Webpack配置中注释掉ESLint插件，重新执行构建/启动，看是否能输出明确的文件路径，或排除ESLint扫描引发的问题。
• 启用Webpack详细日志：在启动命令中添加--verbose参数，比如vue-cli-service serve --verbose，Webpack会输出每个处理的文件细节，找到错误发生前最后打印的文件，重点排查该文件及其依赖。
• 逐步注释排查：如果项目文件规模不大，可批量注释src目录下的组件/页面，逐步缩小范围，定位触发错误的文件。

2. 在.vue文件中检测无限循环/递归 #

• 检查template部分：排查v-for循环是否存在自引用组件、组件循环依赖（如A引用B，B又引用A），或循环条件错误（如循环中无限修改遍历数据源）。
• 检查script部分：查找computed属性、methods中的递归调用（无终止条件的自调用），或watch监听属性在回调中被无限修改导致的死循环。
• 使用Node内存调试工具：执行命令时添加--inspect-brk参数，比如node --inspect-brk node_modules/@vue/cli-service/bin/vue-cli-service.js serve，打开Chrome浏览器chrome://inspect连接调试器，在内存面板查看堆内存增长情况，定位异常函数或组件。
• 排查循环依赖：执行webpack --display-modules查看模块依赖树，寻找组件间的循环引用关系。

3. 其他可能的解决方向 #

• 升级Node.js版本：部分V8旧版本存在内存管理bug，升级到LTS稳定版可能解决问题。
• 增加Node内存限制：执行命令时添加--max-old-space-size=4096（分配4GB内存），比如node --max-old-space-size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve，尝试绕过内存溢出以获取更明确的错误信息。

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