（练手用）一款极简风的前端性能监控可视化看板+SDK一个基于 React 的开箱即用的性能监控看板组件，某前端菜鸡学习性

💡 这是神马？

easy-performance，一个基于 React 的开箱即用的性能监控看板组件，其实最开始是写了个sdk练手用，然后想着写都写了干脆再写个简单的看板出来

它的核心目标只有一个：通过一个可拖拽的悬浮球，让你对当前页面的各项性能指标一目了然！

🎯 它能做什么？

支持如下指标监控

加载与渲染 (Loading & Rendering): FP, FCP, LCP, TTFB，Load Time
交互响应 (Interaction): FID, INP, Long Task
视觉稳定性 (Visual Stability): CLS
资源与网络 (Resource & Network):高耗时的静态资源以及网络请求
数据上报: 支持自动上报性能数据到指定服务器

🎯 特点

🛸 无感悬浮球：默认吸附在页面右下角，支持全屏自由拖拽，完全不影响你的正常业务操作。

🎛 可视化配置面板：点击悬浮球，你可以在界面上直接勾选需要监控的指标（FP、FCP、LCP、INP、LongTask 等），上报的地址，并且能随时修改监控阈值。

📊 数据看板：开启监控后，数据会以卡片的形式实时呈现：

🔄 随开随关，热重启：不仅能够随时点击“开始监控”，还能在调试完毕后点击“停止”，彻底释放浏览器性能。

🚀 极速上手：真的只需要一行代码

无需复杂的初始化，无需满屏的配置项，只需两步即可点亮你的性能看板！

Step 1: 安装依赖

npm install easy-performance
# 或者使用 yarn / pnpm
yarn add easy-performance
pnpm add easy-performance

Step 2: 在你的 React 项目入口引入

将组件引入到你的根组件（最顶层）即可，比如

import React from 'react';
import PerformanceDebugger from 'easy-performance'; // 引入我们的主角
const App = () => {
  return (
    <div>
      {/* 你的其他业务代码 */}
      <h1>My Awesome React App</h1>
      
      {/* 就是这么简单，建议仅在非生产环境渲染 */}
      {process.env.NODE_ENV !== 'production' && <PerformanceDebugger />}
    </div>
  );
};
export default App;

📦 源码

👉 Github 源码传送门：haodali4s/easy-performance 👈

看板和sdk的源码都在，期待你的一个 Star 🌟！也欢迎大家提出 Issue 或 PR，如果使用过程中有任何想法，评论区见！