JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q48789F
  • License MIT

A comprehensive performance analysis library for React applications (Core - MIT License)

Package Exports

  • performance-analyzer-lib
  • performance-analyzer-lib/components
  • performance-analyzer-lib/core
  • performance-analyzer-lib/testing
  • performance-analyzer-lib/utils

Readme

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

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>
  );
}

License

MIT - See LICENSE for details.