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

2022-01-03 10:26:37 浏览数 (2)

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

目前主流框架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图片资源处理
  3. 图床，推荐使用图床（荐）如果有相应的服务 1. 可以使用webpack支持的一种，image-minimizer-webpack-plugin 如果数量过多&过大的情况下，webpack的构建时间会增加非常的大 2. 插件 3. pngquant 压缩性能不错，压缩比例也很明显
  4. 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，来缓解资源下载（网络较差或不稳定或移动端问题）

性能&LightHouse检测

1. 本地检测运行：

本地检测运行本地检测运行

2. 生产检测运行

3. 性能检测

性能检测性能检测

无痕浏览模式

无痕浏览模式下无痕浏览模式下

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

腾讯云前端性能优化大赛

0 人点赞