基于React的微前端项目构建时Node V8内存溢出问题解决(Ineffective mark-compacts near heap limit Allocation failed)

项目场景：

最近在写前端的React项目，项目用的是阿里飞冰的icestark微前端解决方案，面向大型系统的微前端解决方案，前端的每个模块都拆分成了微模块。编译好后在集成到主应用中。

---

问题描述 

由于单个微模块也是挺大的，热更新时随便改动下就经常报NodeJS的V8引擎内存堆栈溢出问题。

<--- Last few GCs --->

[7210:0x7fe5fba00000]   325240 ms: Mark-sweep (reduce) 4036.4 (4117.0) -> 4036.1 (4108.8) MB, 1394.5 / 0.1 ms  (average mu = 0.111, current mu = 0.063) allocation failure scavenge might not succeed
[7210:0x7fe5fba00000]   325244 ms: Scavenge (reduce) 4037.1 (4108.8) -> 4037.2 (4109.8) MB, 1.9 / 0.0 ms  (average mu = 0.111, current mu = 0.063) allocation failure 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10d0282b5 node::Abort() [/usr/local/bin/node]
 2: 0x10d028438 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x10d19fbb7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x10d19fb53 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x10d33e1d5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 6: 0x10d3421fb v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
 7: 0x10d33eadc v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0x10d33bf8a v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x10d3492e0 v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x10d349361 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x10d3105dd v8::internal::FactoryBase<v8::internal::Factory>::NewRawOneByteString(int, v8::internal::AllocationType) [/usr/local/bin/node]
12: 0x10d710ec1 v8::internal::IncrementalStringBuilder::Extend() [/usr/local/bin/node]
13: 0x10d453244 v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [/usr/local/bin/node]
14: 0x10d455058 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
15: 0x10d458ca4 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
16: 0x10d456307 v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
17: 0x10d4502b3 v8::internal::JsonStringify(v8::internal::Isolate*, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
18: 0x10d226838 v8::internal::Builtin_JsonStringify(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
19: 0x10da64379 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_BuiltinExit [/usr/local/bin/node]
20: 0x1128f63f0 
21: 0x10da7728f Builtins_ArrayForEach [/usr/local/bin/node]

 

 

---

 

原因分析：

Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 

JavaScript堆内存不足，Node 是基于V8引擎，在一般的后端开发语言中，在基本的内存使用上没有什么限制，但是在 Node 中通过 JavaScript 使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB），这就是编译项目时为什么会出现内存泄露了，因为前端项目如果非常的庞大，webpack 编译时就会占用很多的系统资源，如果超出了V8对 Node 默认的内存限制大小就会报这个错误。
 

---

解决方案：

由于使用的微前端的架构，构建工具也是使用阿里飞冰的build-scripts模块，所以使用在网上查到的vue项目的内存溢出配置也是无效，比如这样也是错误的

【build-scripts -max_old_space_size=8000 start】

只有改成下面的方式才有效。

node --max_old_space_size=8000 node_modules/.bin/build-scripts start

node --max_old_space_size=8000 node_modules/.bin/build-scripts start

  

最后附完整的package.json文件

{
  "name": "@qc/qc-module",
  "version": "1.0.0",
  "description": "QC班长的微模块",
  "files": [
    "demo/",
    "es/",
    "lib/",
    "build/"
  ],
  "main": "lib/index.js",
  "module": "es/index.js",
  "stylePath": "style.js",
  "scripts": {
    "start": "node --max_old_space_size=8000 node_modules/.bin/build-scripts start",
    "build": "build-scripts build",
    "test": "build-scripts test",
    "prepublishOnly": "npm run build",
    "eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./",
    "eslint:fix": "npm run eslint -- --fix",
    "stylelint": "stylelint \"**/*.{css,scss,less}\"",
    "lint": "npm run eslint && npm run stylelint"
  },
  "keywords": [
    "demo",
    "react",
    "component"
  ],
  "dependencies": {
    "@antv/g2plot": "^2.4.28",
    "@ice/stark-module": "^1.5.0",
    "@react-spring/web": "~9.5.5",
    "ahooks": "^3.1.14",
    "prop-types": "^15.5.8",
    "react-to-print": "^2.14.12",
    "umi-request": "^1.4.0"
  },
  "devDependencies": {
    "@ant-design/icons": "^5.0.1",
    "@iceworks/spec": "^1.0.0",
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "build-plugin-component": "^1.0.0",
    "build-plugin-stark-module": "^2.0.0",
    "build-scripts": "^1.1.1",
    "copy-webpack-plugin": "^5.1.2",
    "enzyme": "^3.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "xlsx": "^0.18.5"
  },
  "peerDependencies": {
    "react": "^16 || ^17"
  },
  "componentConfig": {
    "name": "FormModuel",
    "title": "form-moduel",
    "category": "Form"
  },
  "publishConfig": {
    "access": "public"
  },
  "license": "MIT",
  "homepage": "https://unpkg.com/@yth/test-moduel@1.0.0/build/index.html"
}

---

 参考文献

1、GitHub - ice-lab/build-scripts: 基于 Webpack 的插件化工程构建工具，支持快速建设一套开箱即用的工程方案。

2、icestark-面向大型系统的微前端解决方案 | icestark