react app cpu 占用率巨高的处理

前景提要

系统： OSX 0.13.6 配置是i7 16g

最近做一个react技术栈的项目,同事搭的架子，使用的ts+react全家桶，但是每次启动项目 cpu占用高达150%。

一开始并没有注意，怎么发现的呢，启动项目之后，风扇狂转，那个声音让人有点抓狂，办公室本来挺安静的，只要一启动项目，咚咚咚咚-----那个声音太大了 ，我看monitor，cpu 占用150%。。。当前的项目页面不是很多，我启动了另外的react项目，也是同样技术栈，页面还多些，cpu占用才 30%多。

先说我是怎么解决的：

修改webpack.dev.conf文件的 devServer 的 watchOptions选项，最初的设置为{poll: true}：

webpack can watch files and recompile whenever they change.【webpack监听文件的变化，当文件变化就会重新编译】
问题就在这里，因为没有忽略 node_module文件。

	watchOptions: {
      poll: 1000,
      ignored: /node_modules/
	}

下面记录了一下解决问题的过程，虽然和最后结果没啥关系，🤣

---

第一步：

我在控制台看到，最后的bundle文件竟然高达22M，我死了。。会不会文件内容过大，读取到内存中太吃内存，然后我就去掉了dev配置下面的

devtool: "inline-source-map", 不让输出source-map文件，然后看到浏览器里面输出的文件为9.2M, 然而风扇还是狂转不止。

第二步：

项目没有做css抽取，都是用style-loader直接输出到html head里面，我在想是不是还是文件内容过大，我准备用extrac-text插件来做，因为现在项目用的是webpack 4+ 所以用的这个：
mini-css-extract-plugin,

配置长这样：

	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
	module: {
		rules: [
		        {
		          test: /\.(le|c)ss$/,
		          use: [
		            {
		              loader: MiniCssExtractPlugin.loader,
		              options: {
		                hmr: isDevMode,
		              },
		            },
		            'css-loader',
		            {
		              loader: "less-loader",
		              options: {
		                javascriptEnabled: true
		              }
		            }
		          ],
		        },  
		]
	}

然后css抽取出来了，查看bundle文件：7.9M, css文件: 1.2M, 然而：风扇还是狂转，啊啊啊啊啊，然后打算用chunk特性，webpack4 没有了以前的commonChunks插件，用的是spligChunks，我就把官网的给copy了一份过来

  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      // maxSize: 0,
      minChunks: 2,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    },    
    runtimeChunk: {
      name: entrypoint => `runtimechunk~${entrypoint.name}`
    },
  }

最后看打包出来的，runtimechunk~index.bundle.js 75k

后面就又想到 vendor，抽离react相关的文件到vendor里面…还是不成功。

于是乎，我不加载文件内容，只是加载一个导航栏，任然这样，然后我就怀疑是不是webpack dev配置的问题了，各种改没成功。

然后最后的最后。。

found answer here and here