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

14 篇文章 0 订阅
4 篇文章 0 订阅
在使用阿里飞冰icestark构建大型微前端项目时,遇到因单个模块较大导致的NodeJSV8引擎内存堆栈溢出问题。文章详细描述了问题发生的原因,即JavaScript堆内存不足,并提供了解决方案,通过设置`node--max_old_space_size=8000node_modules/.bin/build-scriptsstart`来增加内存限制,从而避免编译时的内存溢出错误。
摘要由CSDN通过智能技术生成

项目场景:

最近在写前端的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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QC班长

班长有话说:要是有瓶水喝就好了

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值