Bundle 分析与优化

分析构建产物体积分布，找出优化点减小产物大小。

安装分析插件

npm add -D rollup-plugin-visualizer

配置分析插件

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      filename: 'stats.html',  # 输出文件
      open: true,              # 自动打开
      template: 'treemap',     # 可视化类型
      gzipSize: true           # 显示 gzip 体积
    })
  ]
})

可视化类型

注意：treemap 最直观展示模块体积分布。

分析产物结构

打开 stats.html 可看到：

• 每个 chunk 的体积
• 模块占 chunk 的比例
• gzip 后的体积
• 模块依赖关系

优化策略

根据分析结果优化：

manualChunks 分包

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 大依赖单独分包
          if (id.includes('lodash')) {
            return 'lodash'
          }
        }
      }
    }
  }
})

按需导入优化

// 全量导入（不推荐）
import _ from 'lodash'

// 按需导入（推荐）
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'

Tree Shaking 检查

// 检查是否有副作用标记
// package.json
{
  "sideEffects": false
}

gzip 体积对比

gzip 压缩后体积约为原始的 30%。

要点总结

• visualizer 分析产物体积分布
• treemap 直观展示模块占比
• 针对大依赖配置分包策略
• 按需导入减小产物体积