Vue3+Electron23打包遇JavaScript堆内存不足错误求助

使用Vue.js v3、Vuetify v3和Electron v23开发应用，开发环境运行正常，但执行electron:build命令时触发如下错误：

<--- Last few GCs --->

[6192:000001D48C5AA870]    75166 ms: Scavenge 1421.1 (1849.3) -> 1293.2 (1727.5) MB, 21.9 / 0.0 ms  (average mu = 0.984, current mu = 0.969) allocation failure;
[6192:000001D48C5AA870]    76109 ms: Mark-sweep 2278.6 (2712.3) -> 2219.4 (2426.3) MB, 104.5 / 0.0 ms  (average mu = 0.973, current mu = 0.950) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6BBA2027F node_api_throw_syntax_error+175631
 2: 00007FF6BB9A5B66 v8::internal::wasm::WasmCode::safepoint_table_offset+63110
 3: 00007FF6BB9A6F22 v8::internal::wasm::WasmCode::safepoint_table_offset+68162
 4: 00007FF6BC4414C4 v8::Isolate::ReportExternalAllocationLimitReached+116
 5: 00007FF6BC42C822 v8::Isolate::Exit+674
 6: 00007FF6BC2AE66C v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
 7: 00007FF6BC2AB88B v8::internal::Heap::CollectGarbage+3963
 8: 00007FF6BC2C1AC3 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
 9: 00007FF6BC2C236D v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
10: 00007FF6BC2CACBA v8::internal::Factory::AllocateRaw+810
11: 00007FF6BC2E15DA v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArrayWithFiller+90
12: 00007FF6BC2E1845 v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArrayWithHoles+69
13: 00007FF6BBF7A1A3 v8::internal::StringStream::ClearMentionedObjectCache+9011
14: 00007FF6BBFAE44C v8::internal::DeclarationScope::was_lazily_parsed+5132
15: 00007FF6BBFB2C70 v8::internal::DeclarationScope::was_lazily_parsed+23600
16: 00007FF6BC4DEB61 v8::internal::SetupIsolateDelegate::SetupHeap+558193
17: 00007FF6BC53DE86 v8::internal::SetupIsolateDelegate::SetupHeap+948118
18: 00007FF6BC4CF01B v8::internal::SetupIsolateDelegate::SetupHeap+493867
19: 00007FF6BC462574 v8::internal::SetupIsolateDelegate::SetupHeap+48772
20: 00007FF6BC462574 v8::internal::SetupIsolateDelegate::SetupHeap+48772
21: 00007FF6BC462574 v8::internal::SetupIsolateDelegate::SetupHeap+48772
22: 00007FF6BC4966A3 v8::internal::SetupIsolateDelegate::SetupHeap+262067
23: 00007FF6BC52F495 v8::internal::SetupIsolateDelegate::SetupHeap+888229
24: 00007FF6BC487DAC v8::internal::SetupIsolateDelegate::SetupHeap+202428
25: 00007FF6BC460A7B v8::internal::SetupIsolateDelegate::SetupHeap+41867
26: 00007FF6BC32AF3A v8::internal::Execution::CallWasm+1562
27: 00007FF6BC32B05B v8::internal::Execution::CallWasm+1851
28: 00007FF6BC32BE0A v8::internal::Execution::TryCallScript+346
29: 00007FF6BC30491A v8::internal::MicrotaskQueue::RunMicrotasks+410
30: 00007FF6BC3046BA v8::internal::MicrotaskQueue::PerformCheckpointInternal+74
31: 00007FF6BC463D92 v8::internal::SetupIsolateDelegate::SetupHeap+54946
32: 00007FF63CC22E48

项目依赖配置 #

主项目package.json #

{  
  "name": "ads_manager",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "start": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@mdi/font": "5.9.55",
    "core-js": "^3.8.3",
    "firebase": "^9.17.1",
    "googleapis": "^111.0.0",
    "material-design-icons-iconfont": "^6.7.0",
    "roboto-fontface": "*",
    "vue": "^3.2.0",
    "vuetify": "^3.0.0-beta.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "electron": "^23.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "webpack-plugin-vuetify": "^2.0.0-alpha.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ],
  "title": "Gerenciador de Anúncios"
}

src/backend子项目package.json #

{  
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "googleapis": "^111.0.0"
  }
}

已尝试的无效操作 #

在Git Bash和CMD中执行以下命令，但均未解决问题：

NODE_OPTIONS=--max-old-space-size=4096
npm run electron:build
npm run electron:build --max-old-space-size=4096

可行解决方案 #

1. 正确设置NODE_OPTIONS环境变量 #

• Windows CMD：使用set命令声明环境变量，确保命令在同一个会话中执行：

  set NODE_OPTIONS=--max-old-space-size=4096 && npm run electron:build
  

• Git Bash/PowerShell：使用export命令：

  export NODE_OPTIONS=--max-old-space-size=4096 && npm run electron:build
  

2. 修改package.json脚本，直接注入内存参数 #

将内存参数直接写入electron:build脚本，避免环境变量失效问题：

"scripts": {
  // ...其他脚本
  "electron:build": "NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service electron:build"
}

如果Windows下上述写法不生效，安装cross-env包统一处理跨平台环境变量：

npm install cross-env --save-dev

然后修改脚本：

"electron:build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service electron:build"

3. 优化打包流程减少内存占用 #

• 清理重复依赖：主项目和backend子项目都安装了googleapis，可以移除其中一处的依赖，避免打包时重复处理。
• 升级依赖版本：尝试将vue-cli-plugin-electron-builder、Electron升级到最新稳定版，修复可能存在的内存泄漏问题。
• 调整webpack配置：如果项目允许，暂时关闭代码压缩功能（不推荐长期使用），或者启用webpack的增量打包。

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