react app cpu 占用率巨高的处理

最新推荐文章于 2024-08-12 23:53:15 发布

K3v

最新推荐文章于 2024-08-12 23:53:15 发布

阅读量2.5k

点赞数 1

分类专栏： HtmlAndJavascript javascript

本文链接：https://blog.csdn.net/a5534789/article/details/103695076

版权

javascript 同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

HtmlAndJavascript

54 篇文章 0 订阅

订阅专栏

前景提要

系统： 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}`
    },
  }