React Bundle Optimizer

A comprehensive toolkit for optimizing React application bundles. This package provides tools and utilities to reduce bundle size, improve loading performance, and identify optimization opportunities.

Features

• 🔍 Bundle Analysis: Identify large chunks, unused code, and duplicate dependencies
• ⚡ Import Optimization: Transform and optimize React imports
• 🚀 Code Splitting: Automatic detection and configuration of code splitting opportunities
• 🧩 Component Optimization: Tools for optimizing React components and hooks
• 📊 Performance Reports: Generate detailed bundle analysis reports

Installation

npm install react-bundle-optimizer
# or
yarn add react-bundle-optimizer

Usage

Babel Plugin

Add the Babel plugin to your .babelrc or babel.config.js:

{
  "plugins": [
    ["react-bundle-optimizer/babel", {
      "optimizeImports": true,
      "optimizeHooks": true,
      "detectLazyLoad": true
    }]
  ]
}

Webpack Plugin

Add the Webpack plugin to your webpack.config.js:

const { ReactBundleOptimizerPlugin } = require('react-bundle-optimizer');

module.exports = {
  // ... other config
  plugins: [
    new ReactBundleOptimizerPlugin({
      analyze: true,
      splitChunks: true,
      removeUnused: true
    })
  ]
};

Bundle Analysis

Use the BundleAnalyzer to generate reports:

const { BundleAnalyzer } = require('react-bundle-optimizer');

const analyzer = new BundleAnalyzer(webpackStats);
const analysis = analyzer.analyze();
const report = analyzer.generateReport();

Component Optimization

Use the provided helper functions for component optimization:

import { optimizedMemo, lazyWithPreload } from 'react-bundle-optimizer';

// Optimize a component with memo
const OptimizedComponent = optimizedMemo(MyComponent);

// Lazy load with preload capability
const LazyComponent = lazyWithPreload(() => import('./HeavyComponent'));

Features in Detail

Import Optimization

• Transforms default React imports to named imports
• Optimizes hook imports
• Removes unused imports

Code Splitting

• Automatic chunk splitting
• Vendor bundle optimization
• Dynamic import suggestions

Component Optimization

• Enhanced memo implementation
• Lazy loading with preload
• Hook optimization

Bundle Analysis

• Chunk size analysis
• Module dependency tracking
• Duplicate dependency detection
• Performance recommendations

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT