BundleAnalyzerPlugin分析包大小

作者：陈川阅读数：44252人阅读分类：构建工具

BundleAnalyzerPlugin的作用

BundleAnalyzerPlugin是webpack中一个可视化分析工具，用于展示打包后各个模块的体积大小及其依赖关系。它能生成一个交互式树状图，直观呈现bundle的组成结构，帮助开发者识别和优化过大的依赖项。

安装与基本配置

首先需要通过npm或yarn安装该插件：

npm install --save-dev webpack-bundle-analyzer
# 或
yarn add --dev webpack-bundle-analyzer

在webpack配置文件中引入并配置插件：

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'server', // 可选值：server、static、json、disabled
      generateStatsFile: true,
      statsOptions: { source: false },
      openAnalyzer: true,
    })
  ]
}

主要配置参数详解

analyzerMode：控制分析器行为
- server：启动HTTP服务器展示报告（默认）
- static：生成单页HTML文件
- json：生成JSON格式报告
- disabled：禁用插件
analyzerHost：指定服务器主机地址，默认127.0.0.1
analyzerPort：指定服务器端口，默认8888
reportFilename：静态报告文件名，默认report.html
defaultSizes：显示模块大小的方式
- stat：原始文件大小
- parsed：处理后大小（默认）
- gzip：gzip压缩后大小
openAnalyzer：是否自动打开浏览器，默认true

实际应用场景

识别大型依赖

运行构建后，分析器会启动本地服务器并自动打开浏览器展示可视化报告。例如发现lodash占用了大量空间：

// 问题代码示例
import _ from 'lodash';

// 优化方案：按需引入
import isEmpty from 'lodash/isEmpty';

分析重复依赖

当多个bundle包含相同依赖时，可视化图表会清晰显示重复模块。例如react被多个chunk包含：

// webpack配置优化示例
optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

检查代码分割效果

验证动态导入是否按预期工作：

// 动态导入示例
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// 分析器会显示单独的chunk

高级使用技巧

生成对比报告

通过设置不同环境配置生成对比数据：

// package.json
{
  "scripts": {
    "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json"
  }
}

自定义分析逻辑

结合stats文件进行深度分析：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const stats = require('./stats.json');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      stats,
      analyzerMode: 'static'
    })
  ]
}

CI环境集成

在持续集成环境中使用无头模式：

new BundleAnalyzerPlugin({
  analyzerMode: 'static',
  reportFilename: 'bundle-report.html',
  generateStatsFile: true,
  statsFilename: 'bundle-stats.json',
  openAnalyzer: false
})

常见问题解决方案

图表显示不完整

当bundle过大时可能导致图表渲染问题，可以调整默认限制：

new BundleAnalyzerPlugin({
  analyzerMode: 'server',
  analyzerHost: '0.0.0.0',
  analyzerPort: 8888,
  logLevel: 'info',
  defaultSizes: 'parsed',
  statsOptions: {
    maxModules: 1000 // 增加模块数量限制
  }
})

排除特定模块

在分析时忽略某些模块：

new BundleAnalyzerPlugin({
  excludeAssets: (assetName) => 
    assetName.includes('.map') || assetName.includes('hot-update')
})

处理内存不足

对于超大项目，可能需要增加Node内存限制：

NODE_OPTIONS=--max-old-space-size=4096 npm run build

与其他工具结合使用

与source-map-explorer配合

npm install --save-dev source-map-explorer

// package.json
{
  "scripts": {
    "analyze": "source-map-explorer dist/*.js",
    "analyze:all": "source-map-explorer dist/*.js dist/*.css"
  }
}

与webpack-bundle-size-analyzer结合

npm install --save-dev webpack-bundle-size-analyzer

const analyze = require('webpack-bundle-size-analyzer');

// 在webpack配置的stats选项中使用
stats: {
  children: true,
  chunks: true,
  modules: true,
  reasons: true,
  usedExports: true,
  // 自定义统计输出
  stats: {
    all: false,
    assets: true,
    excludeAssets: /\.(map|hot-update\.js)$/,
    performance: true,
    timings: true,
    warnings: true,
    errors: true,
    errorDetails: true,
    builtAt: true,
    chunks: true,
    chunkModules: true,
    chunkOrigins: true,
    modules: true,
    moduleTrace: true,
    source: true,
    children: true,
    reasons: true,
    usedExports: true,
    providedExports: true,
    optimizationBailout: true,
    depth: true,
    maxModules: 0,
    cached: true,
    cachedAssets: true,
    runtimeModules: true,
    dependentModules: true,
    groupAssetsByChunk: true,
    groupAssetsByEmitStatus: true,
    groupAssetsByExtension: true,
    groupAssetsByInfo: true,
    groupAssetsByPath: true,
    groupModulesByAttributes: true,
    groupModulesByCacheStatus: true,
    groupModulesByExtension: true,
    groupModulesByLayer: true,
    groupModulesByPath: true,
    groupModulesByType: true,
    logging: 'verbose',
    outputPath: true,
    publicPath: true,
    entrypoints: true,
    chunkGroups: true,
    assetsSort: '!size',
    chunksSort: '!size',
    modulesSort: '!size',
    nestedModules: true,
    ids: true,
    hash: true,
    version: true,
    env: true,
    warningsFilter: /export .* was not found in/,
    performance: true,
    hints: true,
    colors: true,
    preset: 'normal',
    context: path.resolve(__dirname, 'src'),
    // 使用分析器处理统计信息
    stats: {
      context: path.resolve(__dirname, 'src'),
      children: true,
      chunks: true,
      modules: true,
      reasons: true,
      usedExports: true,
      // 自定义统计输出
      stats: {
        all: false,
        assets: true,
        excludeAssets: /\.(map|hot-update\.js)$/,
        performance: true,
        timings: true,
        warnings: true,
        errors: true,
        errorDetails: true,
        builtAt: true,
        chunks: true,
        chunkModules: true,
        chunkOrigins: true,
        modules: true,
        moduleTrace: true,
        source: true,
        children: true,
        reasons: true,
        usedExports: true,
        providedExports: true,
        optimizationBailout: true,
        depth: true,
        maxModules: 0,
        cached: true,
        cachedAssets: true,
        runtimeModules: true,
        dependentModules: true,
        groupAssetsByChunk: true,
        groupAssetsByEmitStatus: true,
        groupAssetsByExtension: true,
        groupAssetsByInfo: true,
        groupAssetsByPath: true,
        groupModulesByAttributes: true,
        groupModulesByCacheStatus: true,
        groupModulesByExtension: true,
        groupModulesByLayer: true,
        groupModulesByPath: true,
        groupModulesByType: true,
        logging: 'verbose',
        outputPath: true,
        publicPath: true,
        entrypoints: true,
        chunkGroups: true,
        assetsSort: '!size',
        chunksSort: '!size',
        modulesSort: '!size',
        nestedModules: true,
        ids: true,
        hash: true,
        version: true,
        env: true,
        warningsFilter: /export .* was not found in/,
        performance: true,
        hints: true,
        colors: true,
        preset: 'normal',
        context: path.resolve(__dirname, 'src'),
        // 使用分析器处理统计信息
        stats: analyze
      }
    }
  }
}

性能优化实践

识别未使用的代码

通过分析器发现未使用的模块后，可以使用webpack的sideEffects标记：

// package.json
{
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

优化moment.js时区数据

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/
    })
  ]
}

优化antd组件库

// babel.config.js
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
    }]
  ]
}

可视化报告解读技巧

颜色标识含义

黄色：普通JS代码
蓝色：node_modules中的依赖
绿色：异步加载的模块
灰色：被多个chunk共享的模块

交互操作指南

点击模块可以展开查看其子依赖
鼠标悬停显示模块详细信息
使用左上角筛选器可以按大小过滤模块
右上角切换显示原始大小/解析后大小/gzip大小

关键指标关注点

单个模块超过200KB需要特别关注
重复出现的相同模块
第三方库在多个chunk中的重复引入
未被正确代码分割的大型组件

自动化分析方案

集成到构建流程

// webpack.config.js
const isProduction = process.env.NODE_ENV === 'production';

const plugins = [
  // 其他插件...
];

if (process.env.ANALYZE) {
  plugins.push(new BundleAnalyzerPlugin());
}

module.exports = {
  // 其他配置...
  plugins
};

ANALYZE=true npm run build

阈值报警设置

const { execSync } = require('child_process');
const fs = require('fs');

const stats = JSON.parse(fs.readFileSync('stats.json', 'utf8'));
const largeModules = stats.modules
  .filter(m => m.size > 1024 * 100) // 大于100KB的模块
  .map(m => `${m.name} (${(m.size / 1024).toFixed(2)}KB)`);

if (largeModules.length > 0) {
  console.warn('发现大型模块:\n', largeModules.join('\n '));
  // CI环境下可以设置退出码
  if (process.env.CI) process.exit(1);
}

长期监控策略

版本对比分析

保存每次构建的stats文件，建立历史记录：

# 构建脚本示例
webpack --profile --json > stats-$(date +%Y%m%d).json

趋势可视化

使用第三方服务如BundlePhobia或Packtracker进行长期趋势分析：

// 集成Packtracker示例
const PacktrackerPlugin = require('@packtracker/webpack-plugin');

module.exports = {
  plugins: [
    new PacktrackerPlugin({
      project_token: 'your-project-token',
      upload: process.env.CI === 'true'
    })
  ]
}

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：ProgressPlugin构建进度显示

下一篇：自定义Plugin开发实践