Vue Performance Monitor

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

特性

• 📊 核心性能指标监控：LCP、FCP、TTFB、CLS
• 💾 内存使用监控：实时监控JavaScript堆内存使用情况
• 📈 可视化界面：美观的拖拽式监控面板
• 🔄 实时更新：支持手动刷新和自动收集
• 📤 数据导出：支持性能数据导出为JSON格式
• 🎯 评分系统：基于Web Vitals标准的性能评分
• 📱 响应式设计：适配不同屏幕尺寸
• 🎨 原生设计：使用原生 HTML 元素，无需任何 UI 库依赖

安装

npm install vue-performance-monitor
# 或
yarn add vue-performance-monitor

使用方法

Vue 2 全局注册

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

Vue.use(PerformanceMonitor)

浏览器直接使用

Vue 2

<!-- 引入依赖 -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<!-- 引入组件 -->
<script src="https://unpkg.com/vue-performance-monitor/dist/vue-performance-monitor.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-performance-monitor/dist/vue-performance-monitor.css">

<script>
new Vue({
    el: '#app',
    components: {
        PerformanceMonitor: window.VuePerformanceMonitor.default
    },
    methods: {
        sendPerformanceData(data) {
            console.log('性能数据:', data);
            // 自定义发送逻辑
        }
    }
});
</script>

局部使用

<template>
  <div>
    <PerformanceMonitor 
      :auto-collect="true"
      :show-stats="true"
      :show-memory="true"
      :auto-send-data="sendPerformanceData"
    />
  </div>
</template>

<script>
import { PerformanceMonitor } from 'vue-performance-monitor'

export default {
  components: {
    PerformanceMonitor
  },
  methods: {
    // 自定义性能数据发送函数
    sendPerformanceData(data) {
      // 发送到您的性能监控服务
      console.log('发送性能数据:', data);
      
      // 示例：发送到服务器
      // this.$http.post('/api/performance/metrics', data)
      //   .then(response => {
      //     console.log('数据发送成功:', response);
      //   })
      //   .catch(error => {
      //     console.error('数据发送失败:', error);
      //   });
    }
  }
}
</script>

Props

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

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | 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 错误

如果在浏览器中直接使用时遇到 Cannot read properties of undefined (reading 'onFCP') 错误，这是因为 web-vitals 库的加载问题。最新版本已经修复了这个问题，web-vitals 库现在会被打包到组件中，无需额外引入。

如果仍然遇到问题，请确保：

1. 使用的是最新版本的组件
2. 正确引入了 Vue.js
3. 组件的脚本标签在 Vue.js 之后引入

无依赖设计

组件使用原生 HTML 元素设计，无需任何 UI 库依赖，可以在任何 Vue 2 或 Vue 3 项目中直接使用：

// 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)

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 运行测试
npm test

# 代码检查
npm run lint

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

v1.3.0

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

v1.1.0

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

v1.0.0

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