React项目性能优化实战

项目详情:(React全家桶开发「新闻后台管理项目」实战(前端项目+源码) - 拼命十三郎 - 博客园 (cnblogs.com))

性能优化知识：前端性能优化知识树 - 拼命十三郎 - 博客园 (cnblogs.com)

性能测评工具lighthouse的使用
Lighthouse > 性能分数优化
图片加载优化：
https://blog.csdn.net/imagine_tion/article/details/114554358
http://codehtml.cn/2017/08/31/webyhimg/

一、Lighthouse分析报告

1. 获取：

直接使用Chrome浏览器开发者工具（F12）自带功能：

2. 报告总览

主要是性能（Performance）差。

• TTI(Time to Interactive):可交互时间
• SI(Speed Index)：首屏可见内容绘制速度
• TBT(Total Blocking Time)：总阻塞时间
• LCP(Largest Contentful Paint)：最大内容绘制
• CLS(Cumulative Layout Shift)：累计布局偏移

3. Performance优化

3.1 图片优化

问题

• Properly size images：7.33s
  描述：存在不合适大小的图像，需要优化。
• Serve images in next-gen formats:7.25s
  描述：推荐使用WebP和AVIF等图像格式代替目前的png

定位

直接搜索图像，发现是首页的头像和一张图。

优化手段

• 降低图片大小
• 响应式图片
• 图片懒加载
• 渐进式图片
• 图片预加载
• 使用Webp
• 雪碧图 CSS Sprites
• iconfont

操作

• 使用WebP格式图片:https://www.upyun.com/webp
• 修改成合适的尺寸：https://www.gaitubao.com/
• 给img元素设置宽度和高度

3.2 js优化

• Reduce unused JavaScript：6s
  描述：有未使用的JS脚本建议减少；推迟加载JS脚本直到需要
  React提示：如果你不是服务器端渲染，用'React.lazy（）'拆分你的JavaScript捆绑包。否则，使用第三方库（如可加载组件）进行代码拆分。
• Minify JavaScript: 4.8s
  描述：缩小 JavaScript 文件
  React提示：请确保您正在部署应用程序的生产构建.

定位

先上生产版本看看吧：

npm run build
npm install -g serve
serve -s build

主要存在问题的包：main,lodash,moment,echarts

优化手段

• 代码分割
• 懒加载
• 压缩包

操作

主要思路是拆包进行懒加载，然后按需加载lodash\moment、echarts等

• 使用lazy进行路由懒加载

// 路由懒加载
import Home from '../../views/sandbox/home/Home'
const NoPermission = lazy(()=> import('../../views/sandbox/nopermission/NoPermission'))
const RightList = lazy(()=> import('../../views/sandbox/right-manage/RightList'))
const RoleList = lazy(()=> import('../../views/sandbox/right-manage/RoleList'))
const UserList = lazy(()=> import('../../views/sandbox/user-manage/UserList'))
const NewsAdd = lazy(()=> import('../../views/sandbox/news-manage/NewsAdd'))
const NewsDraft = lazy(()=> import('../../views/sandbox/news-manage/NewsDraft'))
const NewsCategory = lazy(()=> import('../../views/sandbox/news-manage/NewsCategory'))
const Audit = lazy(()=> import('../../views/sandbox/audit-manage/Audit'))
const AuditList = lazy(()=> import('../../views/sandbox/audit-manage/AuditList'))
const Unpublished = lazy(()=> import('../../views/sandbox/publish-manage/Unpublished'))
const Published = lazy(()=> import('../../views/sandbox/publish-manage/Published'))
const Sunset = lazy(()=> import('../../views/sandbox/publish-manage/Sunset'))
const NewsPreview = lazy(()=> import('../../views/sandbox/news-manage/NewsPreview'))
const NewsUpdate = lazy(()=> import('../../views/sandbox/news-manage/NewsUpdate'))
···
<Route path={item.key} key={item.key} element={<Suspense fallback={<div>Loading...</div>}>{LocalRouterMap[item.key]}</Suspense>} />

• 按需加载lodash

import groupBy from 'lodash/groupBy'
// 下面的代码同理，不过需要安装lodash-es
import {groupBy} from 'lodash-es'

• 按需加载Echarts

// import * as Echarts from 'echarts'
import * as Echarts from 'echarts/core';
import {
  BarChart,
  PieChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
Echarts.use(
  [
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    PieChart,
    LegendComponent,
    DatasetComponent,
    CanvasRenderer
  ]
);

• moment优化(使用dayjs替换)

import dayjs from 'dayjs'

修改后已经好了很多了，发现还有一个react_devtools_backend.js特别大。这是不过试了半天也没办法去掉他。

---

_到这里，已经成功地把性能分数干到50了！

3.3 遗留

• Reduce unused JavaScript：
  
• Reduce unused CSS
  
• Minify JavaScript
  
• Eliminate render-blocking resources
  

4. accessibility优化

4.1 Buttons do not have an accessible name

发现了一段没写过的代码，内容是翻译，一会查一下源头，应该是浏览器插件注入的代码

4.2 Image elements do not have [alt] attributes

发现是个<Avatar />头像组件，加上alt属性即可。

4.3 Background and foreground colors do not have a sufficient contrast ratio.

这是设计需要考虑的，这个我们先放着。

5. Best Practices优化

5.1 Does not use HTTPS

// 修改package.json的包
 "scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    ···
  },

上面是开发环境的设置，生产版本的话，使用http-server服务。

5.3 Ensure CSP is effective against XSS attacks

5.4 Displays images with incorrect aspect ratio

之前设置的宽高比不对

// 这里应该使用媒体查询做响应式的，偷个懒：裁图替换了

5.5 Uses deprecated APIs

使用了被弃用的API,貌似是因为用了：这样的URL？

5.6 Missing source maps for large first-party JavaScript

终于到sourcemap了，很多时候生产环境要关掉这个的。这里提示chrome-extension没有资源映射。先放着吧，这是react开发工具插件一系列问题。

6. SEO优化

6.1 Links are not crawlable

找了一下问题，和4.1都是一块的。不管了。

7. 优化结果

8. 遗留

• CSS的优化
• react dev插件（禁用之外别无他法？）
• 缓存策略
• JS压缩等
• Gzip压缩