简介

一个轻量级的Vue 3性能监控组件，用于实时监控和记录Web应用的性能指标。

特性

• 📊 实时渲染时间监控

  • 实时显示页面渲染时间
  • 自动计算平均渲染时间
  • 保留最近100次渲染数据

• 💾 内存使用监控

  • 实时显示JavaScript堆内存使用情况
  • 以MB为单位展示内存占用

• 📝 性能日志记录

  • 每秒自动记录性能数据
  • 包含时间戳、渲染时间和内存使用情况
  • 支持日志文件导出
  • ISO格式时间戳记录

• 🔄 数据重置功能

  • 一键重置所有统计数据
  • 清空性能日志记录

安装

npm install @bobwangsport/performance-monitor

或使用pnpm：

pnpm add @bobwangsport/performance-monitor

使用方法

全局注册

import { createApp } from 'vue'
import PerformanceMonitor from '@bobwangsport/performance-monitor'
import App from './App.vue'

const app = createApp(App)
app.component('PerformanceMonitor', PerformanceMonitor)
app.mount('#app')

按需引入

import { PerformanceMonitor } from '@bobwangsport/performance-monitor'

export default {
  components: {
    PerformanceMonitor
  }
}

在模板中使用

<template>
  <PerformanceMonitor />
</template>

组件功能说明

渲染时间监控

• 使用performance.now()精确计算渲染时间
• 通过requestAnimationFrame持续监控渲染性能
• 保持最新的100条渲染时间记录

内存监控

• 通过performance.memoryAPI监控内存使用
• 每秒更新内存使用数据
• 显示当前已用内存大小

性能日志

• 自动记录性能数据
• 导出格式：[时间戳] 平均渲染时间: XXms, 内存使用: XXMB
• 支持下载日志文件（文件名格式：performance_logs_${timestamp}.txt）

浏览器兼容性

• Chrome 58+
• Edge 79+
• Firefox（内存监控功能不可用）
• Safari（内存监控功能不可用）

注意事项

1. 内存监控功能仅在支持performance.memory API的浏览器中可用
2. 性能监控可能会对应用性能产生轻微影响
3. 建议在开发和测试环境中使用

许可证

MIT © Bob Wang