create-react-app: High CPU usage while running on OS X

After running npm start, the node process consumes ~40% CPU on my machine:

I found that setting a polling interval in the the WebpackDevServer helped:

new WebpackDevServer(compiler, {
    historyApiFallback: true,
    hot: true, // Note: only CSS is currently hot reloaded
    publicPath: config.output.publicPath,
    quiet: true,

    // added this:
    watchOptions: {
      poll: 1000
    }
  })

Here were the settings I tried, and the resulting CPU usage:

poll: 1000  =>  4-6% CPU
poll: 500   =>  8-10% CPU
poll: 250   =>  14-16% CPU

There’s a tradeoff between CPU usage and how snappy the dev experience feels. To me, 1000ms felt sluggish, but 500ms felt pretty good. I couldn’t discern much difference between 500ms and 250ms.

It seems like adding some kind of polling interval would be a good idea to reduce the CPU usage.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 10
Comments: 31 (15 by maintainers)

Commits related to this issue

Ignore watching node_modules in webpack-dev-server See https://github.com/facebook/create-react-app/issues/293 — committed to kaykayehnn/typescript-react-redux-boilerplate by kaykayehnn 5 years ago

Most upvoted comments

Closing then. If you’re having issues, try:

Removing node_modules
Updating react-scripts to the latest version in package.json (make sure you follow the migration instructions in changelog for every release you’re skipping)
Updating npm (npm i -g npm@latest) or Yarn (yarn self-update)
Running npm install (or yarn)

gaearon on Dec 5, 2016

Can confirm here.

I updated from node 6.8.1 to node 7.1.0 yesterday and now the node process consumes 100% CPU on my machine.

screen shot 2016-11-16 at 15 40 02

I didn’t find anything relative to CPU usage and node 7 in Webpack issues.

I’m on El Capitan + latest version of CRA.

@gaearon @dceddia Should we reopen the issue or create a new one?

Edit: For those who have the same problem, you can downgrade with brew switch node x.x.x and list all the versions installed with brew info node.

ggregoire on Nov 16, 2016

That’s a good question. As far as I can tell poll defaults to true, which apparently means “poll like crazy”. It also seems to watch everything in node_modules by default – adding this ignore line cuts CPU usage to near-zero, even while leaving poll at its default setting:

watchOptions: {
  ignore: /node_modules/
}

I’m not sure if this is a good idea, since I noticed that webpack.config.dev.js has a few loaders that seem to depend on paths.appNodeModules, which I assume is the node_modules directory?

As another data point, my wife also has a Mac and hers doesn’t exhibit the high CPU usage while running npm. Different version of OS X (10.9 instead of 10.10) but I’m not sure what else is different.

Update: I’m also sad to report that node has stopped showing high CPU usage on my machine now, too. Sad because… what changed?

dceddia on Jul 30, 2016

I’m running into this issue and I don’t see fsevents in my node_modules.

create-react-app 0.6.0 npm 4.0.2 node 7.2.0 macOS Sierra 10.12.2

CPU goes up to 140%, don’t even know how that is possible!

jlubeck on Dec 2, 2016

Seems to be a problem again with Node 7.0.0 and 7.1.0. macOS Sierra reporting CPU usage of 110% during “npm start” operation.

shauntrennery on Nov 9, 2016

I wonder if we should just do something like this: https://github.com/researchgate/webpack-watchman-plugin

gaearon on Jul 30, 2016