浏览器lighthouse、性能优化

1.lighthouse监测项目性能

FCP：首次内容绘制时间，浏览器第一次绘制DOM相关的内容，用户第一次看到页面内容的时间(首次加载白屏时间)

Speed Indxe：页面各个可见部分的显示平均时间，页面有轮播图或需要从后端获取内容加载时，这个数据会被影响到

LCP：页面中最大的内容需要绘制的时间

TTB：记录内容首次内容绘制到用户可交互的事件，这段时间主进程被阻塞，阻碍用户交互互，页面点击无反应

CLS：偏移量，即点击A可能因为偏移量比较大，点击了隔壁的B

2.分析打包体积vite

安装打包分析插件：npm i rollup-plugin-visualizer，执行npm run build可以看到每个包占据多少空间

 3.vite打包优化指令

 4.离线缓存：即会缓存页面状态，等待有网络的时候在更新

npm i vite-plugin-pwa

 pwa目的

 pwa配置

 进行npm run build会生成sw.js和manifest.webmanifest

 此时可以在浏览器看到对应的server woker

 其他性能优化

图片懒加载 import lazyPlugin from ‘vue3-lazy' 即可视区内图片才对src赋值

虚拟列表 elementuit提供，原理相同加载可视区的dom

webwork 开后台线程进行计算再提供给回来( vueuse已经提供了useWebWorker的hook，可以直接使用)

防抖节流：在vueuse也提供了对应的hook