webpack: Webpack 4 irregularly spikes CPU at 93% "after chunk asset optimization" during hot reload rebuild, CPU loads ~1.25 cores, sometimes Node dies with out-of-memory error

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Webpack 4 irregularly spikes CPU at 93% “after chunk asset optimization” during hot reload rebuild, CPU loads ~1.25 cores, sometimes Node dies with out-of-memory error.

This happens after hot reload rebuild kicks in, during active development, so maybe there are some race conditions that kill it.

Usually this step completes in about 3 seconds or less:

[2018-03-21 12:45:58.473 AM PDT] [LOG]   [webpack/configDevServer] building... 🕚  93% after chunk asset optimization

[2018-03-21 12:46:11.969 AM PDT] [LOG]   [webpack/configDevServer] building... 🕚  93% asset optimization

[2018-03-21 12:46:17.145 AM PDT] [LOG]   [webpack/configDevClient] building... 🕚  93% after chunk asset optimization

[2018-03-21 12:46:30.240 AM PDT] [LOG]   [webpack/configDevClient] building... 🕚  93% asset optimization

Sometimes it spikes (10 seconds and more):

[2018-03-21 12:49:43.383 AM PDT] [LOG]   [webpack/configDevClient] building... 🕚  93% after chunk asset optimization

[2018-03-21 12:49:57.680 AM PDT] [LOG]   [webpack/configDevClient] building... 🕚  93% asset optimization

I managed to capture a couple node --inspect CPU profiler snapshots when it was in “after chunk asset optimization”.

cpu-20180321t000640_1 CPU-20180321T000640.cpuprofile.txt

cpu-20180321t000542_1 CPU-20180321T000542.cpuprofile.txt

If the current behavior is a bug, please provide the steps to reproduce.

The configuration is large and closed-source, sorry. It’s a React-based project of ~1200 ES2017 JS files transpiled with Babel 6, ~340 SCSS files, all bundled with Webpack 4 parallelized with HappyPack.

I can help with testing new versions on this configuration if you happen to find a bottleneck in the CPU profiler snapshots I provided.

What is the expected behavior?

The “after chunk asset optimization” completes at about the same time as during the initial build.

~~If this is a feature request, what is motivation or use case for changing the behavior?~~

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

webpack 4.1.1
babel-core 6.26.0
node-sass 4.5.3
node 8.7.0
npm 5.6.0
macOS 10.12: Darwin __CENSORED__ 16.0.0 Darwin Kernel Version 16.0.0: Mon Aug 29 17:56:20 PDT 2016; root:xnu-3789.1.32~3/RELEASE_X86_64 x86_64

package.json dependencies

  "dependencies": {
    "archiver": "^2.1.1",
    "async": "^2.5.0",
    "autoprefixer": "^7.1.4",
    "babel-core": "^6.21.0",
    "babel-plugin-dynamic-import-node": "^1.0.1",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.20.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-1": "^6.16.0",
    "babel-register": "^6.18.0",
    "body-parser": "^1.14.1",
    "bootstrap-sass": "^3.3.5",
    "bugsnag": "^1.7.0",
    "chalk": "^2.3.1",
    "classnames": "^2.2.1",
    "codemirror": "^5.29.0",
    "color": "^2.0.1",
    "compression": "^1.6.0",
    "console-stamp": "^0.2.5",
    "contentful": "4.6.1",
    "cookie": "^0.3.1",
    "cookie-dough": "^0.1.0",
    "cookie-parser": "^1.4.0",
    "cross-env": "^5.1.3",
    "crypto": "^1.0.1",
    "csv-parse": "^1.2.0",
    "debug": "^3.1.0",
    "dotenv": "^4.0.0",
    "express": "^4.13.3",
    "font-awesome": "^4.7.0",
    "formidable": "^1.0.17",
    "froala-editor": "^2.6.5",
    "glob": "^7.1.1",
    "gm": "^1.23.0",
    "hellosign-sdk": "^1.1.14",
    "helmet": "^3.8.2",
    "history": "^3.3.0",
    "http-assert": "^1.2.0",
    "http-errors": "^1.5.0",
    "http-proxy": "^1.12.0",
    "isomorphic-style-loader": "^4.0.0",
    "jquery": "^3.2.1",
    "json2csv": "^3.11.2",
    "kickbox": "^2.0.0",
    "lodash": "^4.16.3",
    "mkdirp": "^0.5.1",
    "moment": "^2.13.0",
    "mongoose": "^4.13.0",
    "node-sass": "^4.5.0",
    "nodemailer": "^4.1.1",
    "nodemailer-mandrill-transport": "^1.2.0",
    "normalize.css": "^7.0.0",
    "npm-run-all": "^4.1.2",
    "nuka-carousel": "^3.0.0",
    "objectid": "^3.2.1",
    "pretty-error": "^2.1.0",
    "promise-throttle": "^0.3.1",
    "prop-types": "^15.5.8",
    "query-string": "^5.0.0",
    "raf": "^3.2.0",
    "react": "^16.0.0",
    "react-atellier": "^0.1.11",
    "react-contenteditable": "^2.0.2",
    "react-datepicker": "^1.0.4",
    "react-dom": "^16.0.0",
    "react-froala-wysiwyg": "^2.7.0",
    "react-height": "^3.0.0",
    "react-helmet": "^5.0.3",
    "react-input-range": "^1.1.2",
    "react-loadable": "^5.3.1",
    "react-measure": "^2.0.2",
    "react-motion": "^0.4.8",
    "react-places-autocomplete": "^5.0.0",
    "react-portal": "^3.0.0",
    "react-portal-tooltip": "^1.1.4",
    "react-pure-render": "^1.0.2",
    "react-redux": "^4.4.8",
    "react-router": "^3.0.5",
    "react-router-redux": "^2.1.0",
    "react-sortable-hoc": "^0.6.7",
    "react-stickynode": "^1.3.1",
    "redis": "^2.8.0",
    "redux": "^3.5.2",
    "redux-form": "^5.3.6",
    "redux-logger": "^2.3.2",
    "redux-saga": "^0.11.1",
    "rimraf": "^2.6.1",
    "s3": "^4.4.0",
    "sanitize-filename": "^1.6.1",
    "scss-to-json": "^1.1.0",
    "serialize-error": "^2.1.0",
    "serve-favicon": "^2.3.0",
    "stripe": "^4.9.0",
    "superagent": "^3.6.1",
    "svg-path-generator": "^1.1.0",
    "ua-parser-js": "^0.7.10",
    "url": "^0.11.0",
    "uuid": "^3.0.1",
    "verge": "^1.10.2",
    "when": "^3.7.7"
  },
  "devDependencies": {
    "ast-types": "^0.9.11",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-react-jsx-source": "^6.22.0",
    "bootstrap-sass-loader": "^1.0.10",
    "chai": "^4.1.0",
    "chai-xml": "^0.3.1",
    "css-loader": "^0.28.11",
    "escomplex": "^2.0.0-alpha",
    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-import-resolver-node": "^0.3.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0",
    "file-loader": "^1.1.11",
    "font-awesome-sass-loader": "^2.0.1",
    "happypack": "^5.0.0-beta.1",
    "husky": "^0.14.3",
    "leasot": "^4.10.1",
    "listr": "^0.12.0",
    "minimist": "^1.2.0",
    "mocha": "^4.0.1",
    "nodemon": "^1.11.0",
    "postcss-loader": "^2.1.2",
    "prettyjson": "^1.2.1",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.5.0",
    "redux-devtools": "^3.0.0-beta-3",
    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
    "redux-devtools-log-monitor": "^1.0.0-beta-3",
    "resolve-url-loader": "^2.3.0",
    "sass-lint": "^1.10.2",
    "sass-loader": "^6.0.7",
    "sasslint-webpack-plugin": "^1.0.4",
    "sinon": "^4.0.0",
    "style-loader": "^0.20.3",
    "supertest": "^3.0.0",
    "svg-inline-loader": "^0.8.0",
    "svg-url-loader": "^2.3.2",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "url-loader": "^1.0.1",
    "webpack": "^4.1.1",
    "webpack-bundle-analyzer": "^2.11.1",
    "webpack-dev-middleware": "^3.0.1",
    "webpack-hot-middleware": "^2.21.2",
    "webpack-node-externals": "^1.6.0"
  },

Relevant:

https://github.com/webpack/webpack/issues/1914 Process out of memory - Webpack
https://github.com/webpack/webpack/issues/4558 large webpack build almost hangs at 91% on an “additional asset processing” step
https://github.com/webpack/webpack/issues/537 Compile stuck at optimize chunk assets

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 18 (4 by maintainers)

Most upvoted comments

probably fixed by https://github.com/webpack/webpack-sources/pull/23

sokra on Mar 21, 2018

Guys please create minimum reproducible test repo if you want problem fastly. Pure usage webpack don’t have this issue. If you don’t have minimum reproducible test repo no need here write something, just add +1

alexander-akait on May 3, 2018