vue组件性能分析需聚焦首屏加载、列表滚动、高频更新、组件切换四类真实场景，统一硬件、构建、网络等环境，只跟踪fcp/lcp/tti、fps、内存增量等关键指标，并用puppeteer自动化采集+vue devtools精准归因。
做 Vue 组件性能分析与基准测试，核心是把“测什么”和“怎么比”说清楚——不是跑个 benchmark 就完事，而是让每次测量都对应真实使用场景、能归因到具体代码改动。
聚焦四类高频瓶颈场景
脱离业务路径的测试容易失真。应按实际交互拆解为可复现的典型链路：
- 首屏加载：从路由跳转开始，到图表渲染完成、按钮可点击（含数据请求、setup 执行、render 完成）
- 列表滚动：1000+ 条目下虚拟滚动组件的帧率稳定性（持续滚动 5 秒，FPS ≥ 55）、内存是否持续增长
-
高频更新：每秒 20 次触发
setOption或修改 reactive 对象，观察平均耗时与 FPS 波动范围 -
组件切换：Tab 切换或模态框打开/关闭时，目标组件
onBeforeUnmount到onMounted的总耗时
统一环境，排除干扰变量
硬件、构建配置、网络条件稍有差异，结果就不可比。必须固化以下要素：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 硬件与浏览器：固定 CPU（如 i7-10700K）、内存（32GB），Chrome 99+ 无痕模式，禁用所有扩展
-
构建配置：生产模式（
mode: 'production'），关闭 source map，Vue 版本、Vite 或 Vue CLI 版本保持一致 - 网络模拟：DevTools Network 面板设为 “Fast 3G”，带宽 1.6 Mbps / 延迟 150 ms，避免本地缓存影响
- 运行上下文：关闭其他标签页，禁用后台程序；测试前清空 Chrome 缓存与 localStorage
只跟踪对体验有感知的指标
不堆砌数字，只盯关键项：
- 加载类：FCP（首次内容绘制）、LCP（最大内容绘制）、TTI（可交互时间）——用 Navigation Timing API 或 Lighthouse 获取
- 运行时类：FPS（≥5s 测试中不低于 55）、长任务占比（>50ms 任务占总运行时间比例）、内存增量（组件重复挂载/卸载 10 次后的 Heap 增量）
-
响应类：FID（首次输入延迟）、
setOption执行耗时（精确到微秒）、resize 节流后重绘次数 -
构建类：首屏 JS 包体积（gzip 后 ≤500KB）、vendor 分包合理性（用
webpack-bundle-analyzer验证）
用自动化代替手动点按
靠人手录制 Performance 面板易出错、难复现。推荐最小可行自动化方案：
- 用 Puppeteer 控制 Chrome，自动访问页面、触发 Tab 切换、滚动、点击等动作
- 在组件生命周期钩子（
onMounted、onBeforeUnmount）中插入performance.mark()和performance.measure() - 采集 Lighthouse 报告 + Performance 日志，导出为 JSON，用脚本比对前后版本差异（例如：“
b-table渲染时间下降 22%”） - 配合 Vue DevTools Performance 标签，直接查看每个组件的 setup/render/patch 耗时，并按响应式依赖着色定位拖慢源头
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
