React优化

背景

React开发的项目首页加载慢是常见问题，网上有很多优化手段，但是具体情况还要具体分析，最近用React撸了一个网站，周末无事，正好优化一下。

优化目标：https://www.shufadict.com - 书法字典。

分析

先看优化前的效果，可以看到主要是js下载太耗时。两个js加起来要3s的时间，体验相当差。

 

看了一下http请求，已经使用了http2（上图Protocol一列），如果你使用的是nginx，但没有开启http 2.0 可以用如下方式开启，在nginx配置文件中加入下面一行。

listen 443 ssl http2 default_server;

再看看是否开启了gzip压缩，可以看到已经开启了，如下图：

 

 开始优化

先打开main.dd9bb747.chunk.js看看这个文件里面都加载了什么，打开以后发现，这个js里面有大段大段的图片文件数据，如下。

 

因为我的首页采用的是九宫格模式，类似手机桌面的图标，上面一个图片，下面一段文字。而这些图片多作为静态资源放到了static目录下，所以webpack打包的时候把这些图片也打包到js里面了，导致js体积过大。

这是因为webpack打包的时候把体积小的图片直接打包到js里面了，解决办法可以参考这里：https://stackoverflow.com/questions/57117878/create-react-app-reduce-build-size-main-hash-chunk-js-is-3mb-with-mostly-ima

 

 解决办法

方法一：阻止webpack将静态图片打包成base64，由于我的项目是用CRA（Create React App创建的，所以webpack的实现被隐藏了，可以使用react-app-rewired这个包来重写webpack的配置，步骤如下：

1. 安装react-app-rewired， “yarn install react-app-rewired”。

2. 在项目根目录下创建一个config-overrides.js文件用来重写webpack的配置。

3. 在config-overrides.js添加如下内容：

/* config-overrides.js */
module.exports = function override(config, env) {
  config.module.rules.push(
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 1,
          name: 'static/media/[name].[hash:8].[ext]',
        },
      }
  );
  return config;
};

方法二：

在.env.development和.prod.development文件中添加如下一行。

IMAGE_INLINE_SIZE_LIMIT=0

方法三：把图片从静态资源中分离出来，做成动态加载的形式(比如放到阿里云OSS上)。

自定义webpack设置

由于create-react-app封装了webpack，所以使用CRA创建的工程是没有webpack配置文件的，那么webpack的配置文件在哪里呢？且看下图：

Webpack 打包优化

使用splitChunks插件进行优化，https://webpack.js.org/plugins/split-chunks-plugin/

 

==