书法字典:https://www.shufadict.com

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/

 

== 

作者:zdd
出处:http://www.cnblogs.com/graphics/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.

posted on 2020-06-06 12:09  翰墨小生  阅读(493)  评论(0编辑  收藏  举报

导航

书法字典:https://www.shufadict.com