【腾讯云前端性能优化大赛】如何使用React 技术栈从 3000ms 到 400ms 过程

随着时间推移，前端发展越来越快，所遇到的瓶颈也越来越多，针对性能这块，有一些个人心得，描述不准确的地方，还望多多指教。

来源：腾讯云前端性能优化大赛

目前主流框架react、vue、argular等（还有很多），国内大多数在Vue/React中，argular也有，但似乎用的不多。Vue3.x针对性能，渲染机制等也是一个不错的选择，不过抉择根据你的实际情况来定，我此次选择的是react，原因有很多，就不一一赘述了。

技术栈

本次采用：react@17.x、react-dom@17.x、mobx@6.x、webpack@5.x、axios、echarts、antd@4.x、styled-components@5.x

优化思路

一、代码层面

1. 冗余代码整理，进行抽离封装（方法、组件、Style等调用≥2次以上）
   
2. 减少逻辑嵌套，如 if else for switch 等本身（这也是 Javascript编码 Airbnb推荐之一）
3. 减少HTML div等语义化标签深层次嵌套（Dom树），不利于绘制、渲染
4. 使用语义化标签绘制，同时也便于SEO检索
5. 使用异步动态加载组件，也可以使用预加载，按需加载（组件适用）
6. 使用Service Worker（出于安全考虑，Service workers只能由HTTPS承载，本地调试可使用localhost）
7. 使用Web Workers

二、从构建工具

因为我用的是webpack 构建，所以下面将用webpack进行处理。可以使用webpack对外提供的一些Api，如：externals、cache、mini-css-extract-plugin、copy-webpack-plugin、optimization等进行合理利用处理。

JS

1. externals

   防止将某些 import 的第三方资源打包到 bundle 中，如react react-dom等

2. optimization

   从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化，不过所有的优化还是可以手动配置和重写

Css

1. mini-css-extract-plugin
   可将Css单抽离到单独的文件中，可异步加载
   没有重复的编译(性能)

2. autoprefixer
   解决各大浏览器厂商CSS前缀问题的神器

3. stylelint-webpack-plugin
   stylelint 样式代码中避免错误并强制规范

图片资源

1. Svg图片资源处理
   

   1. iconfont-webpack-plugin
      将svg所有图标构建成 iconfont 字体库（自定义Svg图标）
   2. svgo
      SVG Optimizer 是一个基于 Node.js 的工具，用于优化 SVG 矢量图形文件
   3. 使用字体库
      可以使用阿里提供字体库来处理，具体使用步骤见链接：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
      
      

2. Png图片资源处理
   

   1. 图床，推荐使用图床（荐）
      如果有相应的服务

   2. 可以使用webpack支持的一种，如果数量过多&过大的情况下，webpack的构建时间会增加非常的大 image-minimizer-webpack-plugin

   3. 雪碧图

   4. 插件
      1. pngquant
      压缩性能不错，压缩比例也很明显
      2. tinify
      在线压缩工具

【辅助】

1. copy-webpack-plugin
   将已存在的单个文件或整个目录复制到构建目录

2. cache
   缓存生成的 webpack 模块和 chunk，来改善构建速度

3. compression-webpack-plugin
   提供带 Content-Encoding 编码的压缩版的资源

4. terser-webpack-plugin
   压缩 JavaScript

5. workbox-webpack-plugin
   渐进式网络应用

三、分析

使用分析辅助功能进行辅助开发，可视化视图便捷查看模块中有哪些依赖，首页不需要加载的依赖，可以滞后加载或按需加载

1. webpack-bundle-analyzer
   交互式可缩放树图可视化 webpack 输出文件的大小

2. lighthouse
   用于分析 Web 应用程序和网页，收集现代性能指标

四、网络

1. 启动 Gzip 加速
2. 使用 CDN 提升，
3. 使用 Http2 网络传输
4. 使用 Http 缓存协议

五、其他

1. 可开启 GPU 硬件加速，加速渲染（可根据项目渲染实际情况）
2. 使用预加载，预加载其他所需资源
3. 首屏增加Spin loading，来缓解资源下载（网络较差或不稳定或移动端问题）

接下来，介绍下优化细节，将资源拆分，增加文件下载速度…

其中，比较大的资源react、echarts、antd

1. react加载

说明：因`react`本身是`UMD`格式，可借助`webpack.externals`进行处理，不将`react` Build到`chunk`模块或公共模块中，我们可以使用其静态CDN，不占用自己服务器资源并加速`react`资源文件下载，这里推荐两个静态CDN（[cdnjs](https://cdnjs.com/libraries?q=react)、[jsdelivr](https://www.jsdelivr.com/?query=react)），如果有自己的那就更好了

webpack.js

externals: {
   react: 'React',
   'react-dom': 'ReactDOM',
   // echarts: 'echarts',
},

在这里可以明显的看到echarts 被我注释掉了，后面介绍

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-rc.0-next-3dc41d8a2-20211223/umd/react.production.min.js" integrity="sha512-tpSowyqM3LfkBSEn77l6jj2RVaMPfc6TLB2V766SxcwZAFN0phVovCAZsWPncHWHd14LzZBCZmJ4dWzNQ00VwQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

参考资源：webpack、airbnb、autoprefixer、tinify