2021 年是前端构建工具大变革的一年。Vite 2.0 成熟、esbuild 被广泛采用、Webpack 5 逐步普及。作为一个维护多个项目的技术负责人，今年的构建工具选型让我重新思考了"什么是最合适的工具"。

现状分析

我们的项目分布：
- 3 个 Vue 3 新项目 → Vite
- 2 个 Vue 2 遗留项目 → Webpack 4/5
- 1 个 React 项目 → Webpack 5 + esbuild loader
- 1 个组件库 → Rollup（通过 Vite Library Mode）
- 2 个 Node.js 服务 → esbuild 直接打包

开发体验对比

基于实际项目数据：

指标                    Webpack 4    Webpack 5    Vite 2
------------------------------------------------------------
冷启动时间              35s          20s          0.8s
HMR 响应                2-5s         1-3s         <50ms
配置文件行数            200+         180+         30-50
插件生态                最丰富        最丰富       兼容 Rollup
TypeScript 支持         需要 loader   需要 loader  原生（esbuild）
CSS Modules             需要配置     需要配置     开箱即用
Tree Shaking            支持         更好         基于 Rollup

Vite 适合的场景

// vite.config.ts - 配置极其简洁
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'

export default defineConfig({
  plugins: [vue(), WindiCSS()],
  resolve: {
    alias: { '@': '/src' }
  },
  build: {
    target: 'es2015',
    minify: 'esbuild', // 比 Terser 快 10 倍
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
})

Vite 最适合：

• 新项目，特别是 Vue 3 项目
• 对开发体验有高要求的团队
• 中小型项目（大型项目需要手动优化分包）

Webpack 不可替代的场景

// webpack.config.js - 虽然配置复杂，但能力强大
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.tsx?$/,
        use: {
          loader: 'esbuild-loader', // 用 esbuild 替代 ts-loader
          options: { loader: 'tsx' }
        }
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'] // SVG 作为 React 组件导入
      }
    ]
  },
  // Webpack 5 的 Module Federation
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      },
      shared: ['vue', 'vue-router']
    })
  ]
}

Webpack 仍然不可替代的场景：

• Module Federation 微前端
• 需要大量自定义 loader/plugin 的复杂项目
• 已有大量 Webpack 配置投资的遗留项目

esbuild 的定位

esbuild 不适合直接做应用打包（缺少 code splitting、CSS 处理等），但作为底层工具非常出色：

// esbuild 适合的场景

// 1. Node.js 服务打包
require('esbuild').buildSync({
  entryPoints: ['src/server.ts'],
  bundle: true,
  platform: 'node',
  target: 'node16',
  outfile: 'dist/server.js',
  minify: true
})

// 2. 作为其他工具的加速层
// Vite 用 esbuild 做依赖预构建和 TS 转译
// Webpack 用 esbuild-loader 替代 ts-loader + Terser
// Rollup 用 rollup-plugin-esbuild 替代 @rollup/plugin-typescript

选型建议

场景                          推荐方案
------------------------------------------------------
Vue 3 新项目                  Vite（首选）
React 新项目                  Vite 或 Next.js
遗留项目                      保持 Webpack，优化配置
组件库打包                    Rollup 或 Vite Library Mode
Node.js 服务                  esbuild
微前端（模块联邦）            Webpack 5
文档站                        VitePress / Docusaurus

小结

• Vite 在开发体验上已经全面超越 Webpack，新项目推荐首选
• Webpack 在复杂场景和 Module Federation 上仍然不可替代
• esbuild 不是应用级打包器的替代品，而是优秀的底层工具
• 构建工具选型要结合团队能力、项目特点和生态兼容性
• 2021 年的趋势是 Rust 化和 esbuild 化——更快的底层，更好的 DX