Nodejs：macos 下 npm 启动 react 项目 cpu 资源占用太高

Nodejs：macos 下 npm 启动 react 项目 cpu 资源占用太高

如题 我有一个 react 项目 通过 npm start 重动后会有一个 node 进程 这个进程占用 cpu 资源非常高 一直在 70 - 80 多之间 ，会导致 电脑温度变高, 有人知道这是什么原因导致的吗

https://i.loli.net/2019/12/18/ZjpVodzUuLiq4wc.png


11 回复

一般不是 webpack bundle 的时候资源占用太多了吗?


我启动项目 CPU 都 300%，你这啥都不是啊，但是过一会儿就会降到 10%以下了。

我这个是一直保持在 80 左右

我刚才启动了一个 react，风扇狂响，我是 2015 款的顶配，不知道为啥这么菜，是老了吗

我这 react 前端项目也有个问题，只要服务器上用 npm run build 就 CPU 爆表，大概率挂掉，后来改 yarn 好一点，但是 CPU 占用也很高，不知道什么原因，有人知道吗？

我这个基本在 98-100 左右

我用 yarn 启 ng 的项目就没这个问题，关建我也没时间去找这个问题, 所以想上来问问看

巧了，我也是改用 yarn 好了，虽然偶尔会到 100%但是马上会降到 50-60，我估计是 npm 包依赖问题？

这个问题我也找了好久解决办法，现在只能用 yarn 先顶着，但是以后不知道会不会继续爆表

如果 watch 出了问题会出现占很高的情况
可以尝试检查 fsevents 包有没有问题

在 webpack config 里添加
watchOptions: {
// 500 毫秒轮询一次
poll: 500
}

在 macOS 下使用 Node.js 和 npm 启动 React 项目时，如果发现 CPU 资源占用过高，可能有几个原因和相应的解决方案。以下是一些常见的方法，包括代码示例和配置调整：

  1. 优化 Webpack 配置： React 项目通常使用 Webpack 进行打包。你可以通过修改 webpack.config.js 文件来优化性能。例如，使用 thread-loader 来并行处理 loader：

    module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader'
        ],
        include: path.resolve('src')
      }
    ]
  }
};

  2. 使用 react-scripts 的优化选项： 如果你使用的是 Create React App，可以通过环境变量来启用生产模式的构建，以减少开发时的资源占用：

    REACT_APP_ENV=production npm start

    注意：REACT_APP_ENV 只是一个示例，Create React App 默认不支持直接设置环境变量来启用生产模式，但你可以通过 .env 文件来配置其他环境变量。

  3. 监控和调试： 使用工具如 top 或 Activity Monitor 来监控 CPU 使用情况，找出具体的进程或线程占用资源过高。

  4. 升级 Node.js 和 npm： 确保你使用的是最新版本的 Node.js 和 npm，因为新版本通常包含性能改进和 bug 修复。

通过以上方法，你应该能够降低在 macOS 下使用 Node.js 和 npm 启动 React 项目时的 CPU 资源占用。

回到顶部