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


使用方法
$3

`javascript import Vue from 'vue' import PerformanceMonitor from 'vue-performance-monitor'

Vue.use(PerformanceMonitor)`

`$3`

#### Vue 2`html

`$3`

`vue

`$3`

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | autoCollect | Boolean | true | 是否自动收集性能指标 | | showStats | Boolean | true | 是否显示详细统计信息 | | autoSendData | Function | null | 自定义数据发送函数，接收性能数据作为参数 | | showMemory | Boolean | true | 是否显示内存监控 |

`$3`

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | hide | 隐藏监控面板时触发 | - |

`$3`

#### 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

`功能特性`

`$3`


监控面板支持拖拽移动，位置会自动保存到本地存储。
$3

- 监控面板位置自动保存
- 历史性能记录本地存储
- 支持数据导出功能
$3

实时监控JavaScript堆内存使用情况，包括：
- 已用内存
- 总分配内存
- 内存上限
- 内存使用率
$3

组件支持自定义数据发送函数，当所有性能指标收集完成后会自动调用该函数：

`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+

`故障排除`

`$3`


如果在浏览器中直接使用时遇到

Cannot read properties of undefined (reading 'onFCP')

 错误，这是因为 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！

更新日志

$3

- 🎨 原生设计: 移除所有 UI 库依赖，使用原生 HTML 元素
- 🚀 轻量化: 减少包体积，提高加载速度
- 📝 文档更新: 更新使用示例，移除 UI 库相关说明
- 🔧 简化安装: 无需安装任何 UI 库，直接使用

$3

- ✨ 新功能: autoSendData 改造成自定义函数，支持灵活的数据发送策略
- 🐛 修复: 解决了浏览器直接使用时 web-vitals 库加载错误的问题
- 📝 文档更新: 添加详细的使用示例和 API 说明
- 🧪 测试用例: 新增 autoSendData 功能测试
- 📚 示例代码: 提供多种发送函数实现示例

$3

- 初始版本发布
- 支持核心性能指标监控
- 支持内存使用监控
- 支持拖拽定位和数据导出

Vue Performance Monitor

🚀 Vue2 性能监控组件，支持 LCP、FCP、TTFB、CLS 等核心性能指标监控

特性

安装

``bash npm install vue-performance-monitor

`或`


yarn add vue-performance-monitor


使用方法
$3

`javascript import Vue from 'vue' import PerformanceMonitor from 'vue-performance-monitor'

Vue.use(PerformanceMonitor)`

`$3`

#### Vue 2`html

`$3`

`vue

`$3`

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | hide | 隐藏监控面板时触发 | - |

`$3`

#### 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

`功能特性`

`$3`


监控面板支持拖拽移动，位置会自动保存到本地存储。
$3

- 监控面板位置自动保存
- 历史性能记录本地存储
- 支持数据导出功能
$3

实时监控JavaScript堆内存使用情况，包括：
- 已用内存
- 总分配内存
- 内存上限
- 内存使用率
$3

组件支持自定义数据发送函数，当所有性能指标收集完成后会自动调用该函数：

`浏览器兼容性`

- Chrome 60+ - Firefox 55+ - Safari 12+ - Edge 79+

`故障排除`

`$3`


如果在浏览器中直接使用时遇到

Cannot read properties of undefined (reading 'onFCP')

 错误，这是因为 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！

更新日志

$3

- 初始版本发布
- 支持核心性能指标监控
- 支持内存使用监控
- 支持拖拽定位和数据导出