在 ReactJS 中构建纱线，分配失败 - JavaScript 堆内存不足

Posted 2023-02-21

【中文标题】在 ReactJS 中构建纱线，分配失败 - JavaScript 堆内存不足

【英文标题】：yarn build in ReactJS, Allocation failed - JavaScript heap out of memory

【发布时间】：2020-01-15 08:09:48

【问题描述】：

在本地环境中我没有问题，但是使用此脚本在 jenkins 上运行生产环境：

yarn install --production
yarn build

构建大约需要 5 分钟，最后，jenkins 退出并显示此控制台输出错误：

+ yarn install --production
yarn install v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > bootstrap@4.3.1" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.3.1" has unmet peer dependency "popper.js@^1.14.7".
warning " > google-maps-react@1.1.11" has incorrect peer dependency "react@~0.14.8 || ^15.0.0".
warning " > google-maps-react@1.1.11" has incorrect peer dependency "react-dom@~0.14.8 || ^15.0.0".
warning " > react-addons-css-transition-group@15.6.2" has incorrect peer dependency "react@^15.4.2".
warning " > react-bootstrap-table-next@3.1.5" has unmet peer dependency "prop-types@^15.0.0".
warning " > react-bootstrap-table2-paginator@2.0.7" has unmet peer dependency "prop-types@^15.0.0".
warning " > react-bootstrap-table2-toolkit@1.4.2" has unmet peer dependency "prop-types@^15.0.0".
warning " > react-intl@2.9.0" has unmet peer dependency "prop-types@^15.5.4".
warning " > react-simple-collapse@0.1.2" has incorrect peer dependency "react@^0.14.3".
warning " > react-simple-collapse@0.1.2" has incorrect peer dependency "react-dom@^0.14.3".
warning " > react-widgets-globalize@5.0.20" has incorrect peer dependency "react-widgets@^4.2.2".
warning " > react-widgets-moment@4.0.27" has incorrect peer dependency "react-widgets@^4.2.2".
warning " > eslint-plugin-react-hooks@1.6.1" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
warning "react-styleguidist > uglifyjs-webpack-plugin@1.2.7" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning "react-styleguidist > webpack-dev-server@2.11.5" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 28.04s.
+ yarn build
yarn run v1.9.4
$ react-scripts build
Creating an optimized production build...

<--- Last few GCs --->

[31498:0x2ab86d0]   229792 ms: Mark-sweep 1277.3 (1459.7) -> 1277.2 (1461.7) MB, 1801.1 / 0.0 ms  allocation failure GC in old space requested
[31498:0x2ab86d0]   231676 ms: Mark-sweep 1277.2 (1461.7) -> 1277.0 (1420.7) MB, 1884.4 / 0.0 ms  last resort GC in old space requested
[31498:0x2ab86d0]   233210 ms: Mark-sweep 1277.0 (1420.7) -> 1277.0 (1419.2) MB, 1533.2 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

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

Security context: 0xb1707c25879 <JSObject>
    0: builtin exit frame: stringify(this=0xb1707c090a9 <Object map = 0x123a95202ba1>,0x11b5562822d1 <undefined>,0x11b5562822d1 <undefined>,0x26b024683529 <Object map = 0x2449e8a328d1>)

    1: arguments adaptor frame: 1->3
    2: toString [0x11b5562822d1 <undefined>:9522] [bytecode=0xf76e19f6a69 offset=28](this=0xb3c89b82b29 <Object map = 0x306621cb3d19>)
    7: /* anonymous */(aka /* anonymous ...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - javascript heap out of memory
 1: node::Abort() [node]
 2: 0x8c21ec [node]
 3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
 5: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [node]
 6: v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [node]
 7: v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [node]
 8: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
 9: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
10: v8::internal::JsonStringifier::Stringify(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [node]
11: v8::internal::Builtin_JsonStringify(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x14795198697d
error Command failed with exit code 1.

开始产生此错误的唯一更改是添加了 2 个节点依赖项：

"react-accessible-accordion": "^3.0.0",
"react-simple-collapse": "^0.1.2",

完整的 package.json 是这样的：

  "name": "front-master",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@blueprintjs/core": "^2.3.1",
    "@blueprintjs/select": "^2.0.1",
    "@esri/arcgis-to-geojson-utils": "^1.3.0",
    "@kenshooui/react-multi-select": "^1.1.5",
    "antd": "^3.12.1",
    "async": "^2.6.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.2",
    "classnames": "^2.2.6",
    "esri-loader": "^2.4.0",
    "fetch-jsonp": "^1.1.3",
    "globalize": "^1.4.2",
    "google-maps-react": "^1.1.11",
    "highcharts": "^6.1.1",
    "moment": "^2.22.2",
    "npm": "^6.2.0",
    "react": "^16.4.1",
    "react-accessible-accordion": "^3.0.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-autosuggest": "^9.4.3",
    "react-beautiful-dnd": "^10.0.4",
    "react-bootstrap-table-next": "^3.1.2",
    "react-bootstrap-table2-paginator": "^2.0.6",
    "react-bootstrap-table2-toolkit": "^1.4.2",
    "react-color": "^2.14.1",
    "react-csv": "^1.0.15-RC2",
    "react-custom-scrollbars": "^4.2.1",
    "react-data-export": "^0.5.0",
    "react-datepicker": "^2.8.0",
    "react-dom": "^16.4.1",
    "react-export-excel": "^0.5.3",
    "react-intl": "^2.4.0",
    "react-lineto": "^3.1.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^1.1.4",
    "react-select": "^2.0.0",
    "react-simple-collapse": "^0.1.2",
    "react-sortable-hoc": "^0.8.3",
    "react-transition-group": "^2.4.0",
    "react-widgets": "^5.0.0-7",
    "react-widgets-globalize": "^5.0.20",
    "react-widgets-moment": "^4.0.27",
    "reactstrap": "^5.0.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.3.0",
    "terraformer-wkt-parser": "^1.2.0",
    "video-react": "^0.14.1",
    "x2js": "^3.2.1",
    "xlsx": "^0.14.1"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  ,
  "devDependencies": 
    "eslint-plugin-react-hooks": "^1.3.0",
    "react-docgen": "^2.21.0",
    "react-styleguidist": "^7.1.0"
  

编辑：另外，当我推送我的分支时，我从 github 收到了这个警告

所以我检查了yarn.lock，我可以看到那里的版本：

mem@^1.1.0:
  version "1.1.0"

但是如何升级未在 package.json 上定义的依赖项？

【问题讨论】：

对于那些使用 CRA v5、Webpack 5 和 CRA v5 来到这里的人的评论不再为 nodejs 模块添加后备，请参阅此链接以获取修复github.com/facebook/create-react-app/issues/11756

【参考方案1】：

最后，我用这个：

https://***.com/a/55378108/3541320

在我的package.json 构建脚本中：

"build": "react-scripts --max_old_space_size=4096 build"

【讨论】：

这就是解决方案

【参考方案2】：

如果您使用内存较少 (512MB) 的服务器，则需要设置尝试两件事：

1 - 在 react-scripts 上设置更少的内存

"build": "react-scripts --max_old_space_size=256 build"

2 - 您可以禁用源映射的生成，如 https://create-react-app.dev/docs/advanced-configuration 中所述，放入 .env 文件：

GENERATE_SOURCEMAP=false

【讨论】：

在生产和登台中禁用源映射生成为我们解决了这个问题！事实上，对于那些没有源地图的环境来说，这是一个理想的结果！由于我们在为构建提供服务的机器上进行本地构建，因此很少为带有 React 前端的小型 Node.js Web 应用分配超过 1 或 2 GB 的 RAM。

更新环境变量的第二步对我有用

对于 ubuntu 18.04 aws ec2 服务器，这是最新的唯一解决方案，“build”：“react-app-rewired --max_old_space_size=256 build”

【参考方案3】：

有时增加 node.js 的内存分配不是您需要的解决方案。最常见的罪魁祸首是由循环依赖引起的递归引起的。

Madge 是一个工具，可以帮助您检测 Nodejs/React 应用程序中何时存在循环依赖

添加到您的脚本

npm i -g madge

"madge": "madge  --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",

【参考方案4】：

也许您添加的 2 个依赖项使用了大量内存，它可以解释您从 jenkins 得到的错误。 您是否尝试按照here 的说明增加分配给 jenkins 的内存？

希望对你有帮助！

【讨论】：

我试图增加节点的内存，例如：node --max-old-space-size=8192 但我需要我正在构建的文件的名称。但是我不能在生成之前有名字，就像build.asdasdaq3d23nk2.js

是的，就我而言，aws npm 包是罪魁祸首

【参考方案5】：

执行 npm cache clean --force 为我解决问题

【讨论】：

如果您没有发布完全解释性的答案，请将诸如此类的建议发布为 cmets

【参考方案6】：

我可以像这样为我的一个项目修复它：

在新创建的 git 分支上运行：

npm run eject

这将创建许多文件并更新您的包 json（如果您没有更改它们，则为 start/test/build 命令）。

转到config/webpack.config.js 并更新 TerserPlugin 选项属性“compress”和“mangle”：

new TerserPlugin(
   terserOptions: 
      ...
      compress: false,
      mangle: true,
      ...

这大大减少了构建时间和内存使用量... 权衡是一个稍大的构建文件（我的项目从 2.3Mo 到 2.6Mo）。因此，在性能受限的情况下，您应该考虑它是否适合您的项目。

为什么会有这种变化？由于Terser documentation 中的以下信息，我尝试了此操作：

这并不为人所知，但对于大多数 JavaScript 而言，空格删除和符号修饰占缩小代码大小的 95% - 而不是复杂的代码转换。

如果你想“恢复”弹出命令：https://***.com/a/54248621/4739462

【参考方案7】：

我今天遇到了同样的问题。当我在本地机器上运行时，我的代码工作正常。但是当我将它部署到 netlify 时，它会显示您上面提到的错误。

我尝试在其他帖子上设置“max_old_space_size”变量和其他一些答案。 但它们都不适合我。

就我而言，我在本地机器中的节点版本与 netlify 站点版本不同。

于是我用本地机器节点版本编辑了环境变量，构建成功完成。