npm run build 内存溢出解决方案

[whizbz11]

最近在构建前端项目时经常会内存溢出的问题

> cross-env NODE_ENV=production MDF_LANG=true BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.js --colors --progress && echo '前端程序：编译完成'

10% building 0/0 modules 0 active(node:38293) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
11% building 9/93 modules 84 active ...map-loader/index.js!/Users/wanghao/code/yonyou/caiwu/FC_OMC_WEB/src/business/IA/IA_ia_outadjust_VM.Extend.js[BABEL] Note: The code generator has deoptimised the styling of /Users/wanghao/code/yonyou/caiwu/FC_OMC_WEB/node_modules/@mdf/theme-default/dist/newfont/iconfont.js as it exceeds the max of 500KB.
93% after chunk asset optimization SourceMapDevToolPlugin public/javascripts/index.min.js generate SourceMap
<--- Last few GCs --->

[38293:0x103000000]   184098 ms: Mark-sweep 1398.3 (1479.6) -> 1398.3 (1479.6) MB, 854.6 / 0.0 ms  allocation failure GC in old space requested
[38293:0x103000000]   185027 ms: Mark-sweep 1398.3 (1479.6) -> 1398.3 (1448.6) MB, 928.7 / 0.0 ms  last resort GC in old space requested
[38293:0x103000000]   185841 ms: Mark-sweep 1398.3 (1448.6) -> 1398.3 (1448.6) MB, 813.6 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x258189125ee1 <JSObject>
    1: push(this=0x2581e0e74f91 <JSArray[386408]>)
    2: /* anonymous */(aka /* anonymous */) [/Users/wanghao/code/yonyou/caiwu/FC_OMC_WEB/node_modules/webpack-sources/lib/applySourceMap.js:~58] [pc=0x1f90eab5702d](this=0x25819c182311 <undefined>,chunk=0x258105b47da9 <String[1]: {>,middleMapping=0x2581069597f1 <Object map = 0x25812c627981>)
    3: walk(aka SourceNode_walk) [/Users/wanghao/code/...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
 4: v8::internal::Factory::NewUninitializedFixedArray(int) [/usr/local/bin/node]
 5: v8::internal::(anonymous namespace)::ElementsAccessorBase<v8::internal::(anonymous namespace)::FastPackedObjectElementsAccessor, v8::internal::(anonymous namespace)::ElementsKindTraits<(v8::internal::ElementsKind)2> >::ConvertElementsWithCapacity(v8::internal::Handle<v8::internal::JSObject>, v8::internal::Handle<v8::internal::FixedArrayBase>, v8::internal::ElementsKind, unsigned int, unsigned int, unsigned int, int) [/usr/local/bin/node]
 6: v8::internal::(anonymous namespace)::ElementsAccessorBase<v8::internal::(anonymous namespace)::FastPackedObjectElementsAccessor, v8::internal::(anonymous namespace)::ElementsKindTraits<(v8::internal::ElementsKind)2> >::GrowCapacityAndConvertImpl(v8::internal::Handle<v8::internal::JSObject>, unsigned int) [/usr/local/bin/node]
 7: v8::internal::(anonymous namespace)::ElementsAccessorBase<v8::internal::(anonymous namespace)::FastPackedObjectElementsAccessor, v8::internal::(anonymous namespace)::ElementsKindTraits<(v8::internal::ElementsKind)2> >::Add(v8::internal::Handle<v8::internal::JSObject>, unsigned int, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyAttributes, unsigned int) [/usr/local/bin/node]
 8: v8::internal::JSObject::AddDataElement(v8::internal::Handle<v8::internal::JSObject>, unsigned int, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyAttributes, v8::internal::Object::ShouldThrow) [/usr/local/bin/node]
 9: v8::internal::Runtime_SetProperty(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
10: 0x1f90e9b0463d
11: 0x1f90e9b55d95

原因

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

解决方案

V8依然提供了选项让我们使用更多的内存。Node 在启动时可以传递 --max-old-space-size 或 --max-new-space-size 来调整内存大小的使用限制，示例如下

"build:client": "cross-env NODE_ENV=production MDF_LANG=true BABEL_ENV=production node --max-old-space-size=4096 ./node_modules/.bin/webpack --config webpack.config.js --colors --progress && echo '前端程序：编译完成'",

意思是将内存调整到4G，足够用了。后面跟的路径，意思是针对webpack模块中bin文件夹中的执行文件，使其扩容。

再次执行构建

Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--10-1!node_modules/postcss-loader/lib/index.js??postcss!node_modules/@mdf/metaui-web/lib/components/picturebook/PictureBook.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--10-1!node_modules/postcss-loader/lib/index.js??postcss!node_modules/@mdf/metaui-web/lib/components/print-design/print.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--10-1!node_modules/postcss-loader/lib/index.js??postcss!node_modules/@mdf/metaui-web/lib/components/user-define-archives/UserDefineArchives.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--10-1!node_modules/postcss-loader/lib/index.js??postcss!node_modules/ac-file-list/build/FileList.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--10-1!node_modules/postcss-loader/lib/index.js??postcss!node_modules/react-datepicker/dist/react-datepicker.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--9-1!node_modules/postcss-loader/lib/index.js??postcss!node_modules/less-loader/dist/cjs.js??ref--9-3!src/web/client/styles/index.less:
    Entrypoint mini-css-extract-plugin = *
    [2] ./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--9-3!./src/web/client/styles/index.less 1.27 MiB {0} [built]
        + 84 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--9-1!node_modules/postcss-loader/lib/index.js??postcss!node_modules/less-loader/dist/cjs.js??ref--9-3!src/web/common/extends/modal/yy-formulas/assets/index.less:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--9-3!./src/web/common/extends/modal/yy-formulas/assets/index.less 58.3 KiB {0} [built]
        + 1 hidden module
前端程序：编译完成

构建成功，可以妥妥的部署项目啦~