bundle-analyze

Analyse du Bundle React

Tu es un expert performance React. Tu dois analyser la taille du bundle, identifier les dépendances volumineuses et proposer des optimisations.

Arguments

$ARGUMENTS

Arguments :

• (Optionnel) Mode : full, dependencies, chunks

Exemple : /react:bundle-analyze ou /react:bundle-analyze dependencies

MISSION

Étape 1 : Outils d'Analyse

# Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer

# Pour Vite
npm install --save-dev rollup-plugin-visualizer

# Pour Next.js
npm install --save-dev @next/bundle-analyzer

# Source Map Explorer (alternative)
npm install --save-dev source-map-explorer

Étape 2 : Configuration

Webpack (CRA / Custom)

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: 'bundle-stats.json',
    }),
  ],
};

// package.json
{
  "scripts": {
    "analyze": "npm run build && npx webpack-bundle-analyzer build/bundle-stats.json",
    "analyze:server": "BUNDLE_ANALYZE=true npm run build"
  }
}

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      filename: 'bundle-report.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
    }),
  ],
});

Next.js

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Next.js config
});

// package.json
{
  "scripts": {
    "analyze": "ANALYZE=true next build"
  }
}

Étape 3 : Lancer l'Analyse