构建分析工具的使用

性能优化与构建分析工具的必要性

现代前端项目复杂度越来越高，构建工具生成的代码体积直接影响用户体验。Vite.js作为新一代构建工具，虽然开发环境启动快，但生产构建仍需关注性能优化。构建分析工具能可视化展示打包结果，帮助开发者定位优化点。

常见的构建分析工具

Rollup Plugin Visualizer

// vite.config.js
import { defineConfig } from 'vite'
import visualizer from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
    })
  ]
})

这个插件生成交互式树状图，展示各模块体积占比。gzipSize和brotliSize选项显示压缩后大小，更接近实际传输体积。

Webpack Bundle Analyzer

虽然Vite基于Rollup，但兼容部分Webpack生态：

import { defineConfig } from 'vite'
import analyzer from 'webpack-bundle-analyzer'

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        analyzer.bundleAnalyzerPlugin()
      ]
    }
  }
})

会启动本地服务展示环形图，特别适合分析多入口项目。

深度分析构建产物

使用source-map-explorer

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

在package.json中添加脚本：

{
  "scripts": {
    "analyze": "vite build && source-map-explorer dist/assets/*.js"
  }
}

运行后会生成精确到代码行的体积分析，能发现具体哪段代码导致体积膨胀。

自定义分析脚本

// analyze.js
import fs from 'fs'
import path from 'path'

const stats = JSON.parse(fs.readFileSync('./dist/stats.json'))
const modules = stats.modules
  .sort((a, b) => b.size - a.size)
  .slice(0, 10)

console.table(modules)

结合Rollup的generateBundle钩子输出自定义统计信息。

优化策略实战

代码分割配置

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('lodash')) {
              return 'lodash'
            }
            if (id.includes('moment')) {
              return 'moment'
            }
            return 'vendor'
          }
        }
      }
    }
  }
})

通过手动分块将大依赖单独打包，利用浏览器缓存。

按需加载示例

// 原写法
import _ from 'lodash'

// 优化后
const debounce = await import('lodash/debounce')

结合动态导入语法减少初始加载体积。

高级分析技巧

比较不同构建版本

npx vite-bundle-diff v1.0.0 v2.0.0

这个工具可以对比两个版本间的体积变化，找出新增的依赖项。

性能预算设置

// vite.config.js
import { defineConfig } from 'vite'
import { performanceBudget } from 'vite-plugin-performance-budget'

export default defineConfig({
  plugins: [
    performanceBudget({
      budgets: [
        {
          type: 'js',
          budget: 500 * 1024 // 500KB
        }
      ]
    })
  ]
})

当JS总体积超过阈值时构建失败，强制优化。

可视化监控方案

集成到CI流程

# .github/workflows/analyze.yml
name: Bundle Analysis
on: push
jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci
      - run: npm run build
      - uses: relative-ci/compare-action@v1
        with:
          buildScript: npm run build
          outputDir: dist

每次提交自动生成与上次构建的对比报告。

使用Lighthouse CI

npx @lhci/cli collect --url=https://your-site.com
npx @lhci/cli upload --target=filesystem

生成完整的性能评分，包含构建产物对实际性能的影响分析。