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压缩
本文来自博客园,作者:沧浪浊兮,转载请注明原文链接:https://www.cnblogs.com/shixiu/p/16002113.html