tessl/npm-webpackbar

Elegant ProgressBar and Profiler for Webpack and Rspack

—

Pending

Overview

Eval results

Files

Performance Profiling

Name: tessl/npm-webpackbar
Author: tessl

WebpackBar includes a comprehensive profiling system for analyzing build performance, identifying bottlenecks, and optimizing compilation times.

Capabilities

State Management

WebpackBar tracks detailed state information for each compilation process.

interface State {
  /**
   * High-resolution start time using process.hrtime()
   */
  start: [number, number] | null;

  /**
   * Progress percentage from -1 (not started) to 100 (complete)
   */
  progress: number;

  /**
   * Whether compilation is complete
   */
  done: boolean;

  /**
   * Current status message
   */
  message: string;

  /**
   * Additional status details array
   */
  details: string[];

  /**
   * Current processing request information
   */
  request: null | {
    file: null | string;      // File being processed
    loaders: string[];        // Loaders being applied
  };

  /**
   * Whether compilation has errors
   */
  hasErrors: boolean;

  /**
   * Associated color for display
   */
  color: string;

  /**
   * Display name
   */
  name: string;
}

Enabling Profiling

Enable profiling through configuration options.

Basic Profiling:

new WebpackBar({
  name: 'Production Build',
  profile: true
});

Profiling with Custom Reporter:

new WebpackBar({
  name: 'Performance Analysis',
  profile: true,
  reporters: ['basic', 'profile']
});

Profile Reporter

The Profile Reporter automatically tracks and displays performance metrics when profiling is enabled.

class ProfileReporter implements Reporter {
  /**
   * Track request timing data during compilation
   */
  progress(context: WebpackBar): void;

  /**
   * Generate profiling statistics when compilation completes
   */
  done(context: WebpackBar): void;

  /**
   * Output formatted profile results after all builds complete
   */
  allDone(context: WebpackBar): void;
}

Profiling Features:

Request-level timing analysis
Module processing performance
Loader execution times
Build phase breakdowns
Bottleneck identification

Build State Access

Access comprehensive build state information for custom profiling.

import type webpack from "webpack";

// WebpackBar class instance passed to reporters
declare class WebpackBar {
  /**
   * Check if any compilation is currently running
   */
  readonly hasRunning: boolean;

  /**
   * Check if any compilation has errors
   */
  readonly hasErrors: boolean;

  /**
   * Array of all compilation states sorted by name
   */
  readonly statesArray: State[];

  /**
   * Global states object with all tracked compilations
   */
  readonly states: { [key: string]: State };

  /**
   * Current state for this plugin instance
   */
  readonly state: State;
  
  constructor(options?: WebpackBarOptions);
  apply(compiler: webpack.Compiler): void;
  updateProgress(percent?: number, message?: string, details?: string[]): void;
}

Usage Examples:

// Custom profiling reporter
class ProfilingReporter {
  constructor() {
    this.startTimes = new Map();
    this.metrics = [];
  }

  start(context) {
    this.startTimes.set(context.state.name, Date.now());
  }

  progress(context) {
    const { progress, request, message } = context.state;
    
    // Track module processing times
    if (request && request.file) {
      this.metrics.push({
        file: request.file,
        progress,
        timestamp: Date.now(),
        message
      });
    }
  }

  done(context) {
    const startTime = this.startTimes.get(context.state.name);
    const totalTime = Date.now() - startTime;
    
    console.log(`Build ${context.state.name} completed in ${totalTime}ms`);
    
    // Analyze slowest modules
    const slowModules = this.metrics
      .filter(m => m.file)
      .sort((a, b) => b.timestamp - a.timestamp)
      .slice(0, 10);
      
    console.log('Slowest modules:', slowModules);
  }
}

new WebpackBar({
  name: 'Profiled Build',
  reporter: ProfilingReporter
});

Performance Metrics

WebpackBar tracks various performance metrics:

Timing Metrics:

Total compilation time
Module processing time
Loader execution time
Plugin hook execution time

Progress Metrics:

Real-time progress percentage
Module count and processing status
File change detection timing

Error Metrics:

Error occurrence tracking
Error resolution timing
Build failure analysis

Multi-Build Profiling

Profile multiple concurrent builds (useful for SSR scenarios).

// Client build with profiling
const clientConfig = {
  name: 'client',
  // ... webpack config
  plugins: [
    new WebpackBar({
      name: 'Client',
      color: 'blue',
      profile: true
    })
  ]
};

// Server build with profiling
const serverConfig = {
  name: 'server',
  // ... webpack config
  plugins: [
    new WebpackBar({
      name: 'Server',
      color: 'green',
      profile: true
    })
  ]
};

export default [clientConfig, serverConfig];

Watch Mode Profiling

Special considerations for profiling in watch mode.

new WebpackBar({
  name: 'Development',
  profile: true,
  reporter: class WatchProfiler {
    change(context, { shortPath, time }) {
      console.log(`File changed: ${shortPath} at ${new Date(time).toISOString()}`);
    }

    done(context) {
      if (context.state.start) {
        const [seconds, nanoseconds] = process.hrtime(context.state.start);
        const totalMs = seconds * 1000 + nanoseconds / 1000000;
        console.log(`Rebuild completed in ${totalMs.toFixed(2)}ms`);
      }
    }
  }
});

Integration with External Tools

WebpackBar profiling data can be integrated with external performance analysis tools.

// Export profiling data
class DataExporter {
  constructor() {
    this.buildData = [];
  }

  done(context) {
    const buildInfo = {
      name: context.state.name,
      duration: context.state.start ? 
        process.hrtime(context.state.start) : null,
      hasErrors: context.state.hasErrors,
      timestamp: Date.now(),
      progress: context.state.progress
    };

    this.buildData.push(buildInfo);
    
    // Export to JSON for analysis
    if (!context.hasRunning) {
      require('fs').writeFileSync(
        'build-metrics.json', 
        JSON.stringify(this.buildData, null, 2)
      );
    }
  }
}

Install with Tessl CLI