Project scenario:
Recently, I am writing a front-end React project. The project uses Ali Feibing's icestark micro-front-end solution, which is a micro-front-end solution for large-scale systems. Each module of the front-end is split into micro-modules. After compilation, it is integrated into the main application.
Problem Description
Because a single micro-module is quite large, if you change it casually during hot update, you will often report the memory stack overflow problem of the V8 engine of NodeJS.
<--- 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]
Cause Analysis:
Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
The JavaScript heap has insufficient memory. Node is based on the V8 engine. In general back-end development languages, there is no limit on the basic memory usage. However, when using memory through JavaScript in Node, only part of the memory can be used (approx. 1.4 GB, about 0.7 GB under 32-bit system), this is why there is a memory leak when compiling the project, because if the front-end project is very large, webpack will take up a lot of system resources when compiling. Node's default memory limit size will report this error.
solution:
Due to the micro-frontend architecture used, the build tool also uses the build-scripts module of Ali Feibing , so the memory overflow configuration of the vue project found on the Internet is also invalid, for example, this is also wrong
【build-scripts -max_old_space_size=8000 start】
It is only valid if changed to the following way.
node --max_old_space_size=8000 node_modules/.bin/build-scripts start
node --max_old_space_size=8000 node_modules/.bin/build-scripts start
Finally, attach the complete package.json file
{
"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/[email protected]/build/index.html"
}
references
2. icestark-a micro-frontend solution for large systems | icestark