сборка пряжи в ReactJS, сбой выделения - куча JavaScript из памяти
В локальной среде у меня нет проблем, но при запуске производственной среды на 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.
Единственное изменение, которое привело к возникновению этой ошибки, было добавлением двух зависимостей узлов:
"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
?
11 ответов
Наконец, я использую это:
В моем package.json
скрипт для сборки:
"build": "react-scripts --max_old_space_size=4096 build"
Если вы используете сервер с меньшим объемом памяти (512 МБ), вам необходимо установить две вещи:
1 - Установите меньше памяти для сценариев реакции
"build": "react-scripts --max_old_space_size=256 build"
2 - Вы можете отключить создание исходных карт, как описано в https://create-react-app.dev/docs/advanced-configuration, вставленном в файл.env:
GENERATE_SOURCEMAP=false
Иногда увеличение выделения памяти для node.js - не то решение, которое вам нужно. Наиболее распространенная причина этого - рекурсия, которая может возникнуть из-за циклических зависимостей.
Madge - это инструмент, который может помочь вам обнаружить циклическую зависимость в вашем приложении Nodejs/React.
Добавить в свой сценарий
npm i -g madge
"madge": "madge --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
В моем случае я делаю это, и это работает в Linux/macOS.
export NODE_OPTIONS=--max-old-space-size=8192
пожалуйста, нажмите на этот URL
Возможно, две добавленные вами зависимости используют много памяти, это объяснит ошибку, которую вы получаете от jenkins. Вы пытались увеличить объем памяти, выделенной для jenkins, как описано здесь?
Надеюсь, это поможет вам!
Кажется, мой случай смешной, но мне пришлось заменить 32-битный узел на 64-битный.
Я также столкнулся с той же проблемой: измените свою кучу и создайте память с помощью простых строк сценария изменения файла package.json:
"start": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
Я получил это решение от смелого отчета
Для тех, кто наткнулся на эту ошибку при использованииreact-i18next
с типами TypeScript:
Наличие файла перевода, содержащего только пустой объект, приводило к ошибке «недостаточно памяти».
Перерывы:
export const EN_GB = {}
Работает:
export const EN_GB = {
dummy: 'dummy'
}
Я мог бы исправить это для одного из моих проектов следующим образом:
В только что созданной ветке git запустите:
npm run eject
Это создаст много файлов и обновит ваш пакет json (команды start/test/build, если вы их не изменили).
Перейти к
new TerserPlugin({
terserOptions: {
...
compress: false,
mangle: true,
...
Это значительно сократило время сборки и использование памяти... Компромиссом является немного больший файл сборки (для моего проекта он увеличился с 2,3 до 2,6 млн). Поэтому вам следует подумать, подходит ли он для вашего проекта в случае ограничений производительности.
Почему это изменение? Я попробовал это из-за следующей информации в документации Terser :
Это малоизвестно, но удаление пробелов и изменение символов составляет 95% сокращения размера минимизированного кода для большинства JavaScript, а не сложных преобразований кода.
Если вы хотите «отменить» команду извлечения: /questions/40559294/otmenit-npm-run-eject-v-reaktsii/40559299#40559299
Сегодня я столкнулся с той же проблемой. Мой код отлично работает, когда я запускаю на локальной машине. Но когда я развертываю его для netlify, он показывает ошибку, о которой вы упоминали выше.
Я попытался установить переменную «max_old_space_size» и некоторые другие ответы на другие сообщения. Но ни один из них не работал для меня.
В моем случае версия моего узла на локальной машине отличается от версии сайта netlify.
Поэтому я отредактировал переменную среды с моей версией узла локальной машины, и сборка успешно завершена.