前端构建产物体积太大怎么分析和优化？webpack-bundle-analyzer 怎么用？

Question

仓乃文 · Accepted Answer

构建产物体积大通常不是单一原因，而是重复依赖、未 tree-shake、未压缩、大库未拆分等多个问题叠加。先用分析工具定位问题，再针对性优化，不要盲目猜测。

安装和使用分析工具：
```bash
# Webpack 项目
pnpm add -D webpack-bundle-analyzer

# Vite 项目
pnpm add -D rollup-plugin-visualizer
```

Webpack 配置：
```javascript
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "server",
      analyzerPort: 8888,
      openAnalyzer: true,
    }),
  ],
};
```

Vite 配置：
```typescript
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
      filename: "stats.html",
    }),
  ],
});
```

优化策略（按收益排序）：
```
1. 重复依赖（最大收益）
   → 检查 analyzer 中是否有同一个库出现多次
   → Webpack: 配置 resolve.alias 统一版本
   → Vite: 配置 resolve.dedupe
   resolve: { dedupe: ["lodash", "dayjs"] }

2. 未 tree-shake 的库
   → 用 lodash-es 替代 lodash
   → 用 dayjs 替代 moment（moment 约 230KB，dayjs 约 2KB）
   → 按需引入：import { Button } from "antd" + babel-plugin-import

3. 代码分割
   → 路由级别懒加载：const Home = () => import("./views/Home.vue")
   → 大型第三方库单独打包

4. 图片和字体
   → 图片用 WebP 格式，压缩后体积减少 30%+
   → 字体用 fontmin 按需裁剪，中文字体从 5MB 降到 200KB
```