跳到主要内容

Rspack 与 Rolldown

问题​

Rspack 和 Rolldown 是什么？它们如何改变前端构建工具格局？

答案​

Rspack​

Rspack 是字节跳动开发的 Rust 构建工具，高度兼容 Webpack：

关于 Webpack 原理，可参考 Webpack 核心原理。

维度WebpackRspack
语言JavaScriptRust
构建速度1x5-10x
HMR 速度慢极快
Webpack 兼容—大部分 Loader/Plugin 兼容
迁移成本—低（配置几乎相同）
rspack.config.js
// 和 webpack.config.js 几乎一样
module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'builtin:swc-loader', // 内置 SWC
          options: {
            jsc: { parser: { syntax: 'typescript', tsx: true } }
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlPlugin({ template: './index.html' })
  ]
};

Rolldown​

Rolldown 是 Vue 团队（尤雨溪）主导的 Rust 构建工具，目标是替代 Rollup + esbuild，成为 Vite 的统一打包器：

关于 Vite 原理，可参考 Vite 原理与优势。

维度RollupRolldown
语言JavaScriptRust（Oxc parser）
速度1x10-30x
插件Rollup 插件 API兼容 Rollup 插件
定位库打包Vite 统一构建引擎

构建工具格局​

Webpack 系：Webpack → Rspack（兼容替代）
Vite 系：  Rollup + esbuild → Rolldown（统一替代）
Turbo 系： Turbopack（Vercel，Next.js 专用）

常见面试问题​

Q1: Rspack 和 Rolldown 怎么选？​

答案：

  • Rspack：现有 Webpack 项目的迁移首选，配置兼容性好
  • Rolldown：Vite 生态的未来，等正式发布后随 Vite 升级即可
  • 新项目建议 Vite（未来会自动切换到 Rolldown）

Q2: 为什么不直接用 esbuild？​

答案：

esbuild 虽然极快（Go 编写），但缺少 Webpack/Rollup 的高级功能：

  • 不支持 HMR
  • 代码分割策略有限
  • 插件 API 简单
  • 不支持 CSS Modules 等复杂场景

Rspack/Rolldown 在保持 Rust 性能的同时，提供了完整的构建功能。

相关链接​