プロジェクトのシナリオ:
最近、フロントエンド React プロジェクトを書いています。このプロジェクトでは、大規模システム向けのマイクロ フロントエンド ソリューションである Ali Feibing の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]
原因分析:
ヒープ制限に近いマーク圧縮が効果的ではない 割り当てに失敗しました - JavaScript ヒープがメモリ不足です
JavaScript ヒープのメモリが不足しています。Node は V8 エンジンに基づいています。一般的なバックエンド開発言語では、基本的なメモリ使用量に制限はありません。ただし、Node の JavaScript を通じてメモリを使用する場合、メモリの一部しか使用できません。フロントエンド プロジェクトが非常に大きい場合、webpack が多くのシステム リソースを占有するため、プロジェクトのコンパイル時にメモリ リークが発生するのはこのためです (約 1.4 GB、32 ビット システムでは約 0.7 GB)。ノードのデフォルトのメモリ制限サイズにより、このエラーが報告されます。
解決：
使用されているマイクロフロントエンド アーキテクチャにより、ビルド ツールはAli Feibing のbuild-scriptsモジュールも使用するため、インターネット上で見つかった vue プロジェクトのメモリ オーバーフロー構成も無効です。たとえば、これも間違っています
【build-scripts -max_old_space_size=8000 start】
以下の方法に変更した場合のみ有効です。
ノード --max_old_space_size=8000 ノードモジュール/.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/[email protected]/build/index.html"
}
参考文献