打包体积分析与优化

打包体积分析工具

Webpack Bundle Analyzer是目前最常用的打包体积可视化工具。它通过生成一个交互式树状图，直观展示各个模块在最终打包文件中的占比。安装方式如下：

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

配置示例：

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',
      generateStatsFile: true,
      statsOptions: { source: false }
    })
  ]
}

运行构建后会启动本地服务展示分析结果，图中可以清晰看到：

• 每个模块的实际大小
• 模块间的依赖关系
• 重复依赖的情况
• 第三方库的占比

代码分割策略

动态导入是实现代码分割的核心方法。Webpack遇到import()语法时会自动进行分割：

// 静态导入
import { heavyModule } from './heavyModule';

// 动态导入
const loadHeavyModule = () => import('./heavyModule');

React项目常用的路由级代码分割：

import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Router>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </Suspense>
  );
}

依赖优化技巧

第三方库往往是体积膨胀的主因。针对不同场景的优化方案：

1. 按需加载组件库

// 错误 - 全量引入
import { Button, Select } from 'antd';

// 正确 - 按需引入
import Button from 'antd/lib/button';
import Select from 'antd/lib/select';

2. 替换臃肿的库

• 用date-fns代替moment.js
• 用lodash-es代替全量lodash
• 用preact兼容层替代react

3. 使用CDN外链

<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>

构建配置优化

Webpack生产环境配置示例：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    },
    minimizer: [
      new TerserPlugin({
        parallel: true,
        extractComments: false,
      }),
      new CssMinimizerPlugin(),
    ]
  },
  performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  }
}

关键配置项说明：

• splitChunks：自动拆分node_modules和公共模块
• treeShaking：删除未使用的导出代码
• scopeHoisting：提升模块作用域减少闭包
• minimize：启用代码压缩

高级压缩技术

1. 图片资源优化

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: { progressive: true, quality: 65 },
            optipng: { enabled: false },
            pngquant: { quality: [0.65, 0.90], speed: 4 },
            gifsicle: { interlaced: false },
          }
        }
      ]
    }
  ]
}

2. Gzip/Brotli压缩

# 安装compression插件
npm install compression-webpack-plugin --save-dev

# webpack配置
const CompressionPlugin = require("compression-webpack-plugin");
plugins: [
  new CompressionPlugin({
    algorithm: 'brotliCompress',
    filename: '[path][base].br',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8,
  })
]

持续监控方案

集成到CI/CD流程的体积监控：

1. 使用webpack-stats-plugin生成构建报告

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

plugins: [
  new StatsWriterPlugin({
    filename: "stats.json",
    fields: ["assets", "modules"]
  })
]

2. 配置体积阈值警告

performance: {
  hints: 'warning',
  maxEntrypointSize: 500000, // 500kb
  maxAssetSize: 300000 // 300kb
}

3. 集成BundleWatch自动化监控

# .bundlewatch.config.json
{
  "files": [
    {
      "path": "dist/*.js",
      "maxSize": "100kB"
    }
  ]
}