构建性能：分享 7 款常用的性能分析工具

// webpack.config.js
module.exports = {
  // 方式一：开启 profile 模式收集详细耗时数据
  profile: true,

  // 方式二：精细控制 stats 输出（推荐）
  stats: {
    // 基础选项
    all: false, // 先关闭所有默认输出
    assets: true,
    errors: true,
    warnings: true,
    modules: true,
    timings: true,

    // 高级选项（v5 新增）
    performance: true, // 显示性能提示
    relatedAssets: true, // 显示关联资源
    moduleTrace: true, // 显示模块追踪
    dependencies: true, // 显示依赖关系

    // 自定义输出格式
    colors: true,
    logging: 'warn', // 日志级别：'error' | 'warn' | 'info' | 'log' | 'verbose'
    loggingDebug: [/webpack/], // 正则匹配需要详细日志的模块
  }
}

npx webpack --json=stats.json --profile

const webpack = require('webpack');
const fs = require('fs');
const config = require('./webpack.config');

const compiler = webpack(config);

compiler.run((err, stats) => {
  // 写入 JSON 文件
  fs.writeFileSync('stats.json', JSON.stringify(stats.toJson({ source: false }), null, 2));
});

{
  "hash": "2c0b66247db00e494ab8",
  "version": "5.107.0",
  "time": 81,
  "builtAt": 1620401092814,
  "publicPath": "",
  "outputPath": "/Users/project/dist",

  "assetsByChunkName": { "main": ["index.js"] },
  "assets": [
    {
      "name": "index.js",
      "size": 12345,
      "chunks": ["main"],
      "emitted": true
    }
  ],

  "modules": [
    {
      "name": "./src/index.js",
      "size": 1234,
      "chunks": ["main"],
      "reasons": [{ "moduleName": "main" }],
      "profile": {
        "factory": 10,       // 模块工厂创建耗时(ms)
        "building": 50,      // Loader 编译耗时(ms)
        "dependencies": 20,  // 依赖解析耗时(ms)
        "total": 80          // 总耗时(ms)
      }
    }
  ],

  "chunks": [
    {
      "id": "main",
      "names": ["main"],
      "files": ["index.js"],
      "size": 12345,
      "modules": [...],
      "origins": [...],
      "rendered": true,
      "initial": true,
      "entry": true
    }
  ],

  "entrypoints": {
    "main": {
      "chunks": ["main"],
      "assets": ["index.js"]
    }
  },

  "timing": {
    "building": 1000,
    "dependencies": 500,
    "total": 1500
  },

  "children": [
    // 子 Compiler 数据（如 mini-css-extract-plugin）
  ],

  // v5 新增字段
  "namedChunkGroups": {},
  "logging": {}
}

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.ProgressPlugin({
      // 基础配置
      activeModules: false, // 显示活跃模块计数
      entries: true,        // 显示入口计数
      modules: true,        // 显示模块计数
      modulesCount: 5000,   // 模块最小显示阈值
      dependencies: true,   // 显示依赖计数
      dependenciesCount: 10000, // 依赖最小显示阈值

      // 进度回调（自定义输出）
      handler: (percentage, message, ...args) => {
        console.log(`${Math.round(percentage * 100)}% ${message}`);
      },

      // v5.107 新增选项
      profile: false,       // 收集性能剖析数据（用于后续分析）
    }),
  ],
};

0% compiling
10% building 0/1 entries 1/3 modules 0/3 dependencies
30% building 1/3 entries 5/15 modules 10/25 dependencies
60% building 1/3 entries 20/50 modules 30/80 dependencies
90% sealing 1/1 entries optimization
95% emitting
100% after emitting

yarn add -D webpack-dashboard

const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  plugins: [
    new DashboardPlugin({
      // v5.107 支持的配置选项
      port: 9838,           // WebSocket 端口（用于远程监控）
      host: 'localhost',
      handler: undefined,    // 自定义数据处理函数

      // 传输层配置
      transport: {
        host: 'localhost',
        port: 9838
      }
    }),
  ],
};

npx webpack-dashboard -- webpack

npx webpack-dashboard -- webpack-dev-server

npx webpack

yarn add -D webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',  // 默认值
      analyzerHost: '127.0.0.1',
      analyzerPort: 8888,

      // 自动打开浏览器
      openAnalyzer: true,

      // 生成报告文件（可选）
      generateStatsFile: false,
      statsFilename: 'stats.json',

      // 其他选项
      reportTitle: 'Bundle Analysis',
      defaultSizes: 'parsed', // parsed | gzip | brotli
      logLevel: 'info',
    }),
  ],
};

new BundleAnalyzerPlugin({
  analyzerMode: 'static',
  reportFilename: 'bundle-report.html',  // 输出到 dist 目录
  openAnalyzer: false,                    // 不自动打开浏览器
})

new BundleAnalyzerPlugin({
  analyzerMode: 'disabled',              // 禁用可视化界面
  generateStatsFile: true,
  statsFilename: 'bundle-stats.json',     // 仅生成统计数据
})

npx webpack-bundle-analyzer ./stats.json

npx webpack-bundle-analyzer ./stats.json -p 8888

npx webpack-bundle-analyzer ./stats.json -m static -r report.html

yarn add -D speed-measure-webpack-plugin

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

const config = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin(),
  ],
};

// 使用 smp.wrap 包裹整个配置
module.exports = smp.wrap(config);

 SMP  ⏱  General output time took 3.24 mins

 SMP  ⏱  Plugins
 MiniCssExtractPlugin took 0.001 mins
 HtmlWebpackPlugin took 0.073 mins

 SMP  ⏱  Loaders
 css-loader took 0.342 mins  ⚠️  [slow]
         module count: 456
 postcss-loader took 0.567 mins  ⚠️  [slow]
         module count: 456
 ts-loader took 1.234 mins  ❌  [very slow]
         module count: 789
 babel-loader took 0.089 mins
         module count: 123

 SMP  ⏱  External:
   typescript compilation took 0.89 mins

const smp = new SpeedMeasurePlugin({
  // 输出格式
  outputFormat: 'human',     // 'human' | 'json' | 'verbose'

  // 输出目标
  outputTarget: './smp-output.json', // 文件路径或 process.stdout

  // 插件名称映射（解决匿名插件问题）
  pluginNames: {
    CustomPlugin: 'MyCustomPlugin',
  },

  // Loader 名称自定义
  loaderNames: {
    customLoader: 'my-custom-loader',
  },
});

yarn add -D @statoscope/cli

yarn add -D @statoscope/webpack-plugin

const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin').default;

module.exports = {
  plugins: [
    new StatoscopeWebpackPlugin({
      // 基本配置
      name: 'my-project',          // 项目名称
      saveTo: '.statoscope/report.webpack', // 报告保存路径
      open: 'file',                // 打开方式：'file' | 'server' | false

      // 分析选项
      analyzeMode: 'web',          // 'web' | 'cli'

      // 高级选项
      watchMode: false,            // 监听模式
      additionalStats: [],         // 额外的 stats 文件（用于对比）
      context: __dirname,          // 项目根目录

      // 报告生成选项
      disableReport: false,
      reportOptions: {
        keepName: false,
      },
    }),
  ],
};

npx statoscope stats.json --open

npx statoscope before.json after.json --open

npx statoscope stats.json -o report.html

yarn add -D webpack-stats-plugin

const { StatsWriterPlugin } = require('webpack-stats-plugin');

module.exports = {
  plugins: [
    new StatsWriterPlugin({
      filename: 'stats.json',  // 输出文件名
      fields: null,            // null = 全部字段，或指定字段数组
      stats: {                 // stats 配置选项（同 webpack.stats）
        all: false,
        assets: true,
        chunks: true,
        modules: true,
        timings: true,
      },
    }),
  ],
};

new StatsWriterPlugin({
  filename: 'stats-transformed.json',
  transform(data, opts) {
    // 自定义数据转换逻辑
    return JSON.stringify({
      timestamp: Date.now(),
      assets: data.assets.map(asset => ({
        name: asset.name,
        size: asset.size,
        sizeKB: Math.round(asset.size / 1024),
      })),
      totalSize: data.assets.reduce((sum, a) => sum + a.size, 0),
      chunkCount: data.chunks.length,
      moduleCount: data.modules.length,
    }, null, 2);
  },
});

yarn add -D bundle-stats

npx bundle-stats

npx bundle-stats --path ./dist

npx bundle-stats --baseline ./baseline-stats.json --current ./current-stats.json

npx bundle-stats --format markdown > BUNDLE_REPORT.md

npx bundle-stats --format html > report.html

const { BundleStatsWebpackPlugin } = require('bundle-stats');

module.exports = {
  plugins: [
    new BundleStatsWebpackPlugin({
      // 输出模式
      mode: 'auto',  // 'auto' | 'html' | 'markdown' | 'json'

      // 对比基线（可选）
      baseline: path.resolve(__dirname, '.bundle-stats/baseline.json'),

      // 输出路径
      outDir: '.bundle-stats',

      // 报告文件名
      filename: 'report',

      // 自定义选项
      jsonOutput: true,
      showFiles: true,
      showComponents: false,
    }),
  ],
};

## Summary
- **Total Size**: 245 KB (-12% from baseline)
- **Chunks**: 3
- **Modules**: 156

## Assets Comparison
| Asset | Current | Baseline | Delta
| -------|---------|----------|-------
| main.js | 120 KB | 135 KB | -15 KB ✅ |
| vendor.js | 98 KB | 102 KB | -4 KB ✅ |
| runtime.js | 27 KB | 26 KB | +1 KB ⚠️ |

## Largest Modules
1. lodash (45 KB) - Consider tree-shaking or importing specific functions
2. moment (32 KB) - Consider using date-fns as alternative
3. @ant-design/icons (18 KB) - Consider importing only needed icons

name: Bundle Analysis
on: [pull_request]

jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: yarn install

      - name: Build project
        run: yarn build

      - name: Generate bundle report
        run: npx bundle-stats --format markdown --baseline .bundle-stats/baseline.json

      - name: Comment PR
        uses: actions/github-script@v6
        with:
          script: |
            const fs = require('fs');
            const report = fs.readFileSync('.bundle-stats/report.md', 'utf8');
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## 📊 Bundle Size Report\n\n${report}`
            });

yarn add -D unused-webpack-plugin

const UnusedWebpackPlugin = require('unused-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new UnusedWebpackPlugin({
      // 需要分析的源码目录
      directories: [path.join(__dirname, 'src')],

      // 项目根路径
      root: path.join(__dirname),

      // 排除规则
      exclude: ['*.test.ts', '*.spec.ts', '__mocks__/**'],

      // 包含规则（可选，默认所有文件）
      include: ['**/*.ts', '**/*.tsx', '**/*.js'],

      // 是否在失败时退出进程（CI 场景有用）
      failOnUnused: false,

      // 输出详细程度
      verbose: false,
    }),
  ],
};

UNUSED FILES DETECTED:

❌ src/utils/deprecated-helper.ts
   - Not imported by any module
   - Last modified: 2026-01-15

❌ src/components/OldComponent.tsx
   - Not imported by any module
   - Consider removing or moving to archive/

✅ Total unused files found: 2

module.exports = {
  cache: {
    type: 'filesystem',  // 使用文件系统缓存

    // 缓存性能分析（v5 新增）
    profile: true,       // 记录缓存命中/未命中的详细信息

    // 缓存目录
    cacheDirectory: path.resolve(__dirname, '.cache/webpack'),

    // 缓存版本（变更此值会清除旧缓存）
    version: '',         // 默认使用 webpack 版本

    // 缓存算法
    maxAge: 1000 * 60 * 60 * 24 * 7, // 7 天
    maxGenerations: undefined,

    // 构建依赖（变更会失效）
    buildDependencies: {
      config: [__filename],
    },
  },
};

cached assets 5.02 MiB [compared for emit]
  assets by path *.js 3.76 MiB
    asset main.js 3.76 MiB [compared for emit] (name: main)
  assets by path *.css 1.26 MiB
    asset main.css 1.26 MiB [compared for emit] (name: main)
  asset index.html 1.01 KiB [emitted]

// 缓存命中率统计
cache: cached 1234 modules (85% of total modules)
cache: not cached 217 modules (15% of total modules)
  - 100 modules changed since last build
  - 117 modules newly added

// 缓存恢复时间
cache: restored 1234 modules from filesystem cache (took 234ms)
cache: built 217 modules from scratch (took 1.2s)

// 总体效果
previous build time: 12.5s
current build time: 1.8s (85% faster due to cache)

module.exports = {
  experiments: {
    // 启用未受影响模块缓存
    cacheUnaffected: true,
  },

  cache: {
    type: 'filesystem',
    profile: true,
  },
};

npx webpack --profile --json=stats.json | jq '.modules[] | select(.unaffected == true)'

npx webpack --profile --json=stats.json | jq '{time, hash, assets: (.assets | length), modules: (.modules | length)}'

#!/bin/bash

echo "=== Webpack Build Benchmark ==="

rm -rf .cache/webpack dist

echo "\n🧊 Cold Build (no cache):"
time npx webpack --mode=production

echo "\n🔥 Hot Build (with cache):"
time npx webpack --mode=production

echo "\n🔥 Hot Build 2nd (cache stability):"
time npx webpack --mode=production

echo "\n📊 Generating analysis..."
npx webpack --mode=production --json=stats.json --profile

echo "\n✅ Benchmark complete!"