@avixiii/bundle-size-tracker v0.1.4

Bundle Size Tracker

A powerful and flexible tool to track and analyze JavaScript bundle sizes across different build tools. Monitor your bundle sizes, set size limits, and get detailed reports with AI-powered optimization suggestions.

Features

Core Features 🎯

• Track bundle sizes during build process
• Support for multiple build tools:
  • Webpack
  • Rollup
  • Vite
• Multiple report formats:
  • Console output
  • JSON reports
  • HTML reports with visualizations
• File compression analysis:
  • Gzip compression
  • Brotli compression
• Custom size limits per bundle
• Easy CI/CD integration
• Full TypeScript support
• Configurable alerts and warnings

AI-Powered Optimization 🤖 (New in v0.1.2)

• Intelligent bundle analysis using OpenAI GPT models
• Smart code splitting suggestions
• Tree shaking opportunities detection
• Dependency analysis and recommendations
• Performance impact predictions
• Automated optimization suggestions

History and Alerts 📊 (New in v0.1.3)

• Track bundle size changes over time
• Export and import history data
• Interactive size visualizations
• Configurable alerts for:
  • Total size increases
  • Individual chunk size changes
  • Maximum size thresholds
• Beautiful HTML reports with charts
• Historical trend analysis
• Size comparison across builds

Real User Monitoring 📈 (New in v0.1.4)

• Track real-world performance metrics:
  • Load time
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)
  • Time to Interactive (TTI)
  • Total Blocking Time (TBT)
• Device and network analysis:
  • Device type detection
  • Network connection speed
  • Hardware capabilities
• Performance recommendations:
  • Automated performance insights
  • Device-specific optimizations
  • Network-based suggestions
• Customizable data collection:
  • Configurable sampling rate
  • Pattern-based URL filtering
  • Custom endpoint support

Installation

npm install @avixiii/bundle-size-tracker --save-dev
# or
yarn add -D @avixiii/bundle-size-tracker
# or
pnpm add -D @avixiii/bundle-size-tracker

Quick Start

Webpack

// webpack.config.js
const { BundleSizeTrackerPlugin } = require('@avixiii/bundle-size-tracker');

module.exports = {
  // ... other config
  plugins: [
    new BundleSizeTrackerPlugin({
      maxSize: 500, // 500KB limit
      outputFormat: 'html',
      outputPath: './reports',
      history: {
        enabled: true,
        thresholds: {
          totalSizeIncreaseThreshold: 10, // 10% increase warning
          maxTotalSize: 5 * 1024 * 1024 // 5MB limit
        }
      },
      rum: {
        enabled: true,
        sampleRate: 0.1, // Sample 10% of users
        endpoint: '/api/rum', // Optional custom endpoint
        excludePatterns: ['/api/*', '/static/*'] // Optional URL patterns to exclude
      }
    })
  ]
};

Rollup

// rollup.config.js
import { bundleSizeTracker } from '@avixiii/bundle-size-tracker';

export default {
  // ... other config
  plugins: [
    bundleSizeTracker({
      maxSize: 300,
      outputFormat: 'json',
      history: {
        enabled: true,
        thresholds: {
          chunkSizeIncreaseThreshold: 15 // 15% chunk size increase warning
        }
      },
      rum: {
        enabled: true,
        sampleRate: 0.5 // Sample 50% of users
      }
    })
  ]
};

Vite

// vite.config.js
import { bundleSizeTrackerVite } from '@avixiii/bundle-size-tracker';

export default {
  plugins: [
    bundleSizeTrackerVite({
      maxSize: 400,
      history: {
        enabled: true,
        exportPath: './bundle-history'
      },
      rum: {
        enabled: true,
        sampleRate: 1, // Monitor all users
        excludePatterns: ['/admin/*'] // Exclude admin pages
      }
    })
  ]
};

Configuration

History Options

RUM Configuration

AI Configuration

Compression Options

{
  compression: {
    gzip: true,
    brotli: true,
    raw: true
  },
  reportFormats: ['json', 'html', 'console']
}

Custom Rules

You can set specific size limits for different bundles:

{
  rules: [
    {
      pattern: 'vendor', // or /vendor\..*\.js$/
      maxSize: 800 // 800KB limit for vendor bundles
    },
    {
      pattern: 'main',
      maxSize: 200 // 200KB limit for main bundle
    }
  ]
}

Report Examples

Console Output

Bundle Size Report

Generated: 2025-01-13T15:52:18+07:00
Status: PASS 
Total Size: 264.09 KB

main.js
  Raw: 120.5 KB
  Gzip: 45.2 KB
  Brotli: 40.1 KB
  Status: PASS 

vendor.js
  Raw: 143.59 KB
  Gzip: 52.8 KB
  Brotli: 48.3 KB
  Status: PASS 

Performance Metrics (RUM):
  Load Time (median): 1.2s
  First Contentful Paint: 0.8s
  Largest Contentful Paint: 2.1s
  First Input Delay: 45ms
  Cumulative Layout Shift: 0.05

License

MIT avixiii