Q11 · 优化策略

如何对 bundle 体积进行监控和分析？

Bundle体积优化分析

⚡ 速记答案（30 秒）

  • 构建阶段：使用 webpack-bundle-analyzer、stats.json 分析依赖构成
  • 监控：在 CI 中保存每次构建的体积，超过阈值报警
  • 关注：各个 chunk 体积、三方库占比、重复依赖、未按需引入的组件库等
  • 结合 SourceMap Explorer、Bundlephobia 等工具查看问题库

📖 详细讲解

分析工具


工具用途
webpack-bundle-analyzer可视化分析
source-map-explorer分析 SourceMap
bundlephobia查看 npm 包体积
size-limitCI 体积门禁

分析维度


1. 整体构成

• 业务代码 vs 第三方库

• 各 chunk 体积分布


2. 问题识别

• 重复依赖

• 未 tree-shaking 的库

• 过大的单个依赖


3. CI 集成


- name: Check bundle size
  run: |
    npm run build
    npx size-limit

💻 代码示例

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: process.env.ANALYZE ? 'server' : 'disabled',
      openAnalyzer: true,
    }),
  ],
};

// package.json
// "analyze": "ANALYZE=true npm run build"
💡
面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。