来源：https://xiaoman.blog.csdn.net/article/details/126811832

Chrome dev tools LightHouse 分析

我们可以使用谷歌浏览器自带的 DevTools 进行性能分析 LightHouse

参数介绍

从 Performance 页的表现结果来看，得分37分，并提供了很多的时间信息，我们来解释下这些选项代表的意思：

• 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按钮。

代码分析

由于我们使用的是 vite， vite 打包是基于 rollup 的我们可以使用 rollup 的插件

npm install rollup-plugin-visualizer

vite.config.ts 配置  记得设置 open 不然无效

import { visualizer } from 'rollup-plugin-visualizer';

plugins: [vue(), vueJsx(),visualizer({
      open:true
 })],

然后进行 npm run build 打包