Performance Analyzer Library

A comprehensive performance analysis library for React applications that provides monitoring, benchmarking, and optimization tools.

Features

• Performance Monitoring: Real-time performance tracking with hooks and HOCs
• Visual Dashboard: Interactive dashboard with charts and metrics
• Benchmarking: Automated performance testing and comparison
• Console Tools: Command-line analysis and debugging utilities
• Export Reports: Generate and export performance reports
• Modular Design: Use only the components you need

Installation

npm install performance-analyzer-lib

Quick Start

import { usePerformanceMonitoring, PerformanceDashboard } from 'performance-analyzer-lib';

// Use performance monitoring hook
function MyComponent() {
  const { startTiming, endTiming, getMetrics } = usePerformanceMonitoring();
  
  useEffect(() => {
    startTiming('data-fetch');
    fetchData().then(() => {
      endTiming('data-fetch');
    });
  }, []);
  
  return <div>My Component</div>;
}

// Add dashboard to your app
function App() {
  return (
    <div>
      <MyComponent />
      <PerformanceDashboard />
    </div>
  );
}

Documentation

• 📖 Comprehensive Guide
• ⚡ Quick Reference
• 🎯 Examples

API Reference

Core

• usePerformanceMonitoring() - Main monitoring hook
• withPerformanceMonitoring() - HOC for class components
• PerformanceMonitor - Global monitoring instance
• performanceLogger - Utility for performance logging

Components

• PerformanceDashboard - Visual dashboard
• PerformanceToggle - Toggle for enabling/disabling monitoring

Testing

• PerformanceTestSuite - Automated testing utilities
• PerformanceComparator - Before/after comparison tools

Utils

• performanceAnalysisExamples - Console analysis tools
• performanceExamples - Advanced usage examples

Examples

Basic Performance Monitoring

import { usePerformanceMonitoring, performanceLogger } from 'performance-analyzer-lib';

function MyComponent() {
  const { startTiming, endTiming } = usePerformanceMonitoring();
  
  const handleClick = async () => {
    startTiming('user-action');
    await performAction();
    const duration = endTiming('user-action');
    
    performanceLogger.info('User action completed', { duration });
  };
  
  return <button onClick={handleClick}>Perform Action</button>;
}

Performance Dashboard

import { PerformanceDashboard } from 'performance-analyzer-lib';

function App() {
  return (
    <div>
      {/* Your app content */}
      <PerformanceDashboard 
        position="bottom-right"
        enableExport={true}
      />
    </div>
  );
}

Links

• 📦 npm Package
• 🔗 GitHub Repository
• 📝 Issues & Bug Reports
• 🤝 Contributing

License

MIT - See LICENSE for details.