2021 was a year of major change for frontend build tools. Vite 2.0 matured, esbuild was widely adopted, and Webpack 5 gradually became mainstream. As a tech lead maintaining several projects, this year's build-tool choices made me rethink what the right tool really is.

Current State Analysis

我们的项目分布：
- 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 直接打包

Developer Experience Comparison

Based on real project data:

指标                    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

Scenarios Where Vite Excels

// 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 is best suited for:

• New projects, especially Vue 3 projects
• Teams with high developer-experience requirements
• Small-to-medium projects (large projects need manual chunk optimization)

Scenarios Where Webpack Is Irreplaceable

// 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']
    })
  ]
}

Scenarios where Webpack remains irreplaceable:

• Module Federation for micro-frontends
• Complex projects needing lots of custom loaders/plugins
• Legacy projects with heavy existing Webpack configuration investment

esbuild's Positioning

esbuild isn't suited to direct application bundling (it lacks code splitting, CSS handling, etc.), but it excels as a low-level tool:

// 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

Selection Recommendations

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

Summary

• Vite has comprehensively surpassed Webpack in developer experience; it's the recommended first choice for new projects
• Webpack remains irreplaceable in complex scenarios and for Module Federation
• esbuild is not a replacement for application-level bundlers, but an excellent low-level tool
• Build-tool selection should weigh team capability, project characteristics, and ecosystem compatibility
• The 2021 trend is toward Rust and esbuild — faster foundations and better DX