Webpack、Rollup、esbuild、Rspack 这些构建工具有什么区别？

详细解析#

定位对比#

webpack：什么都能打包#

webpack 把一切资源都看作模块，从入口出发构建依赖图，loader 负责转换文件，plugin 介入构建的各个阶段（流程见 Webpack 构建流程、Loader 和 Plugin）。

• 优点：生态最完整，代码分割、Module Federation、各种老旧场景都有成熟方案
• 缺点：配置项多，学习成本高；单线程的 JavaScript 实现，项目大了以后冷启动和 HMR 都会变慢

Rollup：适合打包库#

• 以 ESM 为核心，tree shaking 做得彻底，产物几乎没有运行时代码，读起来接近手写
• 一次构建可以输出 ESM、CommonJS、UMD 等多种格式，正好满足库的发布需求
• 处理 CommonJS 依赖、CSS、图片都要靠插件，开发服务器和 HMR 不是它的重点
• Rolldown 是用 Rust 编写、API 兼容 Rollup 的打包器，Vite 8 用它同时替换了开发时的 esbuild 预构建和生产时的 Rollup 打包

esbuild：快，但能力有取舍#

• Go 编写，并行处理，没有 JavaScript 工具的启动开销
• 只转译、不做类型检查：TypeScript 的类型错误不会让构建失败，需要另外跑 tsc --noEmit（见 tsc、Babel、esbuild 编译 TypeScript 的区别）
• 不注入 polyfill，const、async 函数等 ES6+ 语法不支持降级到 ES5；代码分割目前只支持 ESM 输出格式；插件 API 只有 resolve、load 等少数钩子
• 很多工具把它当作内部组件：Vite 8 之前的依赖预构建和生产压缩、tsup 等库打包工具都用了 esbuild

Rspack 和 Vite#

• Rspack：核心用 Rust 实现，配置格式与 webpack 基本一致，大部分 loader 和插件可以直接复用，还内置了 SWC loader、CSS 处理等常用能力。想要开箱即用的体验，可以用基于它的 Rsbuild
• Vite：开发时不打包，浏览器请求哪个模块就编译哪个，依赖提前预构建；生产环境再完整打包。Vite 8 之前是开发用 esbuild、生产用 Rollup，两套工具的行为可能不一致；Vite 8 起统一使用 Rolldown 和 Oxc（原理见 Vite 为什么快）

怎么选#

1. 新的应用项目：优先用 Vite 或框架自带的构建方案（Nuxt、Next.js 等），配置最少
2. 已有的大型 webpack 项目：构建慢就评估迁移到 Rspack，改动远小于换成 Vite；重度依赖某些 webpack 插件时，先确认 Rspack 是否支持
3. 写一个 npm 库：Rollup，或者基于 Rollup、esbuild 封装的工具（例如 tsup、Vite 的库模式）
4. 脚本、Node.js 服务、简单的转译：esbuild 足够

选型时看团队熟悉度、插件生态和迁移成本，不要只看速度对比，不同项目测出来的差距可能很大。

代码示例#

用 Rollup 打包一个同时提供 ESM 和 CommonJS 的库：

// rollup.config.js
export default {
  input: 'src/index.js',
  // 依赖不打进产物，由使用方安装
  external: ['dayjs'],
  output: [
    { file: 'dist/index.mjs', format: 'es' },
    { file: 'dist/index.cjs', format: 'cjs' },
  ],
}

Rspack 的配置和 webpack 几乎一样，TypeScript 用内置的 SWC loader 转译：

// rspack.config.mjs
import { defineConfig } from '@rspack/cli'
import { rspack } from '@rspack/core'

export default defineConfig({
  entry: './src/index.ts',
  resolve: { extensions: ['.ts', '.js'] },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        loader: 'builtin:swc-loader',
        options: { detectSyntax: 'auto' },
      },
    ],
  },
  plugins: [new rspack.HtmlRspackPlugin()],
})

面试官可能追问#

易错点#

• 认为用 esbuild 或 SWC 编译 TypeScript 就会做类型检查，CI 里漏掉 tsc --noEmit
• 把 Vite 当成"不打包的工具"：它只是开发时不打包，生产环境照样完整打包
• 说 Rspack 是"Rust 版的 Vite"：Rspack 对标的是 webpack，兼容的是 webpack 的配置和生态
• 背各家宣传的性能倍数，实际差距取决于项目规模和配置，面试时讲清原因比报数字更有说服力