Vue.js 性能监控组件,支持 LCP、FCP、TTFB、CLS 等核心性能指标监控
npm install vue-performance-monitor🚀 Vue2 性能监控组件,支持 LCP、FCP、TTFB、CLS 等核心性能指标监控
- 📊 核心性能指标监控:LCP、FCP、TTFB、CLS
- 💾 内存使用监控:实时监控JavaScript堆内存使用情况
- 📈 可视化界面:美观的拖拽式监控面板
- 🔄 实时更新:支持手动刷新和自动收集
- 📤 数据导出:支持性能数据导出为JSON格式
- 🎯 评分系统:基于Web Vitals标准的性能评分
- 📱 响应式设计:适配不同屏幕尺寸
- 🎨 原生设计:使用原生 HTML 元素,无需任何 UI 库依赖
``bash`
npm install vue-performance-monitor或
yarn add vue-performance-monitor
`javascript
import Vue from 'vue'
import PerformanceMonitor from 'vue-performance-monitor'
Vue.use(PerformanceMonitor)
`
#### Vue 2
`html
`
`vue
:show-stats="true"
:show-memory="true"
:auto-send-data="sendPerformanceData"
/>
`
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| autoCollect | Boolean | true | 是否自动收集性能指标 |
| showStats | Boolean | true | 是否显示详细统计信息 |
| autoSendData | Function | null | 自定义数据发送函数,接收性能数据作为参数 |
| showMemory | Boolean | true | 是否显示内存监控 |
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| hide | 隐藏监控面板时触发 | - |
#### LCP (Largest Contentful Paint)
- 定义:页面最大内容元素绘制完成的时间
- 优秀:≤ 2.5秒
- 良好:≤ 4.0秒
- 需优化:> 4.0秒
#### FCP (First Contentful Paint)
- 定义:页面首次绘制任何内容的时间
- 优秀:≤ 1.8秒
- 良好:≤ 3.0秒
- 需优化:> 3.0秒
#### TTFB (Time to First Byte)
- 定义:从请求到接收到第一个字节的时间
- 优秀:≤ 800ms
- 良好:≤ 1.8秒
- 需优化:> 1.8秒
#### CLS (Cumulative Layout Shift)
- 定义:页面加载过程中布局偏移的累积值
- 优秀:≤ 0.1
- 良好:≤ 0.25
- 需优化:> 0.25
`javascript`
// 发送函数接收一个包含性能数据的对象
const sendPerformanceData = (data) => {
// data 包含以下信息:
// {
// url: 当前页面URL,
// timestamp: 时间戳,
// userAgent: 用户代理,
// metrics: 性能指标数据,
// stats: 统计信息,
// overallScore: 总体评分
// }
// 发送到您的性能监控服务
fetch('/api/performance/metrics', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
}
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
错误,这是因为 web-vitals 库的加载问题。最新版本已经修复了这个问题,web-vitals 库现在会被打包到组件中,无需额外引入。如果仍然遇到问题,请确保:
1. 使用的是最新版本的组件
2. 正确引入了 Vue.js
3. 组件的脚本标签在 Vue.js 之后引入
$3
组件使用原生 HTML 元素设计,无需任何 UI 库依赖,可以在任何 Vue 2 或 Vue 3 项目中直接使用:`javascript
// Vue 2
import Vue from 'vue'
import { PerformanceMonitor } from 'vue-performance-monitor'// Vue 3
import { createApp } from 'vue'
import { PerformanceMonitor } from 'vue-performance-monitor'
const app = createApp(App)
app.component('PerformanceMonitor', PerformanceMonitor)
`开发
`bash
安装依赖
npm install开发模式
npm run dev构建生产版本
npm run build运行测试
npm test代码检查
npm run lint
``MIT License
欢迎提交 Issue 和 Pull Request!