Vue3性能优化
LightHouse
浏览器的调试工具中自带LightHouse性能分析。
点击“分析页面负载”生成分析报告。
指标:
- FCP(First Contentful Paint):首次内容绘制的时间,浏览器第一次绘制DOM相关的内容,也是用户第一次看到页面内容的时间。
- Speed Index:页面各个可见部分的显示平均时间,当页面上存在轮播图或者需要从后端获取内容加载时,这个数据会被影响到。
- LCP(Largest Contentful Paint):最大内容绘制时间,页面最大的元素绘制完成的时间。
- TTI(Time to Interactive):从页面开始渲染到用户可以与页面进行交互的时间,内容必须渲染完毕,交互元素绑定的事件已经注册完成。
- TBT(Total Blocking Time):记录了首次内容绘制到用户可交互之间的时间,这段时间内,主进程被阻塞,会阻碍用户的交互,页面点击无反应。
- CLS(Cumulative Layout Shift):计算布局偏移值得分,会比较两次渲染帧的内容偏移情况,可能导致用户想点击A按钮,但下一帧中,A按钮被挤到旁边,导致用户实际点击了B按钮。
rollup
vite打包基于rollup,安装rollup插件:
1 | pnpm add rollup-plugin-visualizer |
在vite.config.ts中配置插件:
1 | import { defineConfig } from 'vite' |
打包后就会呈现这样一个页面:
此处AntDesign太大了,所以可以使用按需引入优化。
Vite配置优化
1 | build:{ |
PWA离线缓存技术
安装依赖:
1 | npm install vite-plugin-pwa -D |
部分配置项:
1 | VitePWA({ |
PWA能让web网页无限接近于Native应用:
- 可以添加到主屏幕,利用manifest实现
- 可以实现离线缓存,利用service worker实现
- 可以发送通知,利用service worker实现
打包后会生成sw.js。
其他性能优化
- 图片懒加载
- 虚拟列表
- webWorker多线程
- 防抖节流
评论