下一代前端工具链浅析

在目前火热的 AI Coding 概念的背后，前端工具链生态也在蓬勃发展。目前新一代工具如Vite、Bun、 Rspack等已经不局限于只做 Webpack 那样的打包工具，而是围绕性能、开发体验和可扩展性构建完整的前端工具解决方案，各自形成了独特的技术路线与社区氛围。在这篇文章中，我将对比 Rspack、Vite 与 Bun 的生态布局，并在后续持续关注并更新这篇文章的内容。

Vite 生态

Vite 于 2020 年发布，当时主要是为了解决 Webpack 在大型项目中启动和热更新慢的问题。Vite 过去 5 年发展迅速，到现在已经攀升为 No.1 的前端构建工具。

Vite 目前主要是由 VoidZero 公司成员维护，这家公司是尤雨溪在 2024 年创立，目前主要工作就是维护Vite、Vitest、Rolldown、OXC这些项目。VoidZero 的愿景是使用 Rust 开发语言重塑前端工具链。下面总结一下 VoidZero 基于 Rust 的生态工具以及目前的进展。

OXC

OXC，全称 JavaScript Oxidation Compiler，是一个使用 Rust 语言开发的 JS 工具集合，包含 Parser（JS 代码解析）, Linter（代码检查工具）, Formatter（格式化工具）, Transpiler（转译器）, Minifier（代码压缩）等。

OXC 的工具全部使用 Rust 语言编写，旨在替代 Babel，Acorn 这一类传统的 JS 代码解析工具，极大地提升了解析和编译 JS 代码的速度。

oxc-parser

oxc-parser 是一个代码解析器，它能够将.js、.jsx代码解析成符合estree规范的 AST，或者将.ts、.tsx代码解析成符合typescript-estree规范的 AST，可以在该官方提供的 Playground 中测试生成的 AST。

在 oxc-parser 提供的 benchmark 测试中显示出了卓越的性能，速度为目前使用更多的swc的 3 倍以上 ，具体请查看该仓库：bench-javascript-parser-written-in-rust.

oxc-walker

oxc-walker可以解析代码，并提供了一些方法用来遍历 AST 节点，节点类型可以从@oxc-project/types获取。如果你需要对 AST 进行遍历然后修改节点，可以使用这个工具。

js 复制代码

 import { parseAndWalk } from 'oxc-walker'
 
 const nodes = []
 parseAndWalk('console.log("hello world")', 'test.js', {
   enter(node) {
     nodes.push(node)
   },
 })
 
 console.log(nodes)

oxc-transform

oxc-transform 类似于 @babel/core 的transform 方法，将.jsx，.ts 以及 .tsx 代码转换为标准的 JS 代码，或者将最新 ECMAScript 语法（如 ES2024）编写的代码降级成旧版本（如 ES6）；目前最低支持转换成 ES6 的版本。同时，oxc-transform还支持生成 TS 代码的 .d.ts 定义文件。

js 复制代码

 import { transform } from 'oxc-transform';
 
 const result = transform('test.ts', 'const foo: any = a ?? b;', {
   target: 'es2018',
 });
 
 console.log(result);

oxc formatter

Formatter 方面进展相对缓慢，目前 OXC 实现了一个 Prettier 插件：@prettier/plugin-oxc，其内部使用了 oxc-parser 提升格式化代码的速度。未来 OXC 目标是完全移植 Prettier 这样的工具，来进一步提升性能。

oxc-minify

oxc-minify 是一个代码压缩工具，旨在替换 Terser，目前能够和 esbuild 相媲美。

根据 benchmark 显示 oxc-minify 与性能排名第一的 @swc/core 只在某些显示库（d3，echarts等）的压缩表现中存在非常微小的差距，具体请查看 benchmark 仓库中详细的对比。

oxc-resolver

oxc-resolver 是一个模块路径解析工具，旨在替代 Webpack 使用的 enhanced-resolve。

根据 benchmark 显示其速度为 enhanced-resolve 的 17 倍以上。

并且 oxc-resolver 内置 tsconfig-paths-webpack-plugin，能够自动对 tsconfig 中配置的 paths 进行解析。

oxlint

oxlint 是一个代码格式检查工具，旨在替换性能堪忧的 ESLint。

根据 oxlint 的 benchmark 显示，oxlint的速度是 ESLint 的 50~100 倍。

oxlint于 2025-06-10 发布了第一个稳定版本 1.0，目前可以在中小型项目中完全替换 ESLint，像 Shopify、Airbnb 等一些企业项目已经着手接入了。如果你想替换 ESLint，可以使用 @oxlint/migrate 这个工具来快速迁移。

oxlint 使用 .oxlintrc.json 文件配置，其 API 基本和 ESLint v9 的配置一致，例如 ignorePatterns、globals、settings、plugins 以及 rules 等。对于常见的 typescript、react、import 等插件也在开发支持中，具体进度可以查看 oxlint plan.

最新进展：oxlint 于 2025/8/17 日宣布已支持 typed linting 功能。

使用 Rust 重写 Lint 工具的一大挑战就是，基于 TS 类型信息来进行更复杂的代码检查------ typed-linting，例如 typescript-eslint 中具有的以下规则：

@typescript-eslint/await-thenable：不允许对非Thenable函数使用await；
@typescript-eslint/no-floating-promises：安全处理Promise的错误等；
@typescript-eslint/no-for-in-array：不允许使用for...in循环迭代数组；

oxlint 在 typescript-eslint 开发的 tsgolint 基础上 fork 并维护 oxlint 版本的类型检查工具 oxlint-tsgolint（tsgolint 后续可能会不再维护了）。

oxlint-tsgolint 目前在大型 monorepo 上仍然存在性能瓶颈，OXC 团队正着手解决。

Rolldown

Rolldown，基于 OXC 项目，用于打包前端应用或者库，对标 Rollup。

Vite 目前使用 esbuild 进行依赖预打包，使用 Rollup 进行生产构建。Rolldown 的目标是将这两个过程统一到一个高性能的打包工具中，以降低复杂性。

Rolldown 提供了与 Rollup 高度兼容的 API（尤其是插件接口），并且具有类似的 tree shaking 功能以优化 bundle 大小。但是，Rolldown 的功能范围与 esbuild 更相似，并内置了以下附加功能：

Platform presets
ts、.tsx代码转换
Node.js 兼容模块解析
ESM / CJS 模块互操作
define
inject
CSS 打包（实验性）
代码压缩（开发中）

Rolldown 还有一些在 esbuild 中有相近概念但在 Rollup 中不存在的功能：

模块类型（实验）
插件钩子过滤器

最后，Rolldown 提供了一些 esbuild 和 Rollup 没有实现的功能：

Chunk Splitting（实验）
支持 HMR（开发中）
Module Federation，模块联邦（计划中）

Tsdown

Tsdown 是基于 Rolldown 开发的一个 library 打包工具，旨在替代 tsup。tsup 目前已不再积极维护，其仓库页面介绍也推荐迁移到 tsdown。

tsdown 在 Rolldown 基础上简化了一些配置，专用于打包库。具有以下特性：

支持生成.d.ts定义文件；并且支持 tsconfig 的 isolatedDeclarations 属性，为每个 TS 文件独立地生成 .d.ts 文件。
支持生成库的多种格式，esm、cjs，iife以及umd等；
支持处理非代码资产，如 .json 或 .wasm 文件等；
支持 unbundle mode，也就是 bundleless，仅转换模块的代码而不打包。

Vitest

Vitest 是基于 Vite 的代码测试工具，旨在替换 Jest。使用 Jest 在处理 ES Module 以及 TypeScript 模块时，复杂繁琐的配置总会让人感觉头疼，Vitest 可能就是你的迁移选择。

Vitest 相比 Jest 存在以下优势：

内置 ES Module 和 TS、TSX 的支持，无需像 Jest 那样频繁折腾 Babel 或 SWC 配置来让 TS 测试顺利跑起来；
无缝衔接基于 Vite 构建的项目，测试环境能重用同一套解析/插件规则等，不需要再折腾配置测试工具；
速度更快，基于 Vite 的按需编译与缓存，watch 模式下改一行代码看到测试结果的等待更短；同时还具有多进程/worker 并行执行测试。

从使用量来看，Vitest 正稳步增长，快速追赶 Jest。

VitePress

VitePress 是基于 Vite 的文档开发工具，使用 VUE 作为渲染框架，相信大部分人都用过，就不多赘述了。

Rstack

Rstack 是由 Bytedance Web Infra 团队维护的围绕Rspack打造的统一工具链。Rstack生态的工具，品牌风格比较统一，一般使用英文字母 rs 前缀命名，图标都是一个卡通的小螃蟹拿着不同的工具。

SWC

Rstack 生态的基石就是 SWC。SWC 是基于 Rust 语言开发的一个编译器项目，包含一系列编译和转换 JS 代码的工具。这里简单介绍几个常用代码转换工具。

@swc/core

首先就是 SWC 的核心工具 @swc/core，其提供 Parser、Tranformer 以及代码压缩器 Minifier 功能：

支持同步或者异步解析 JS 代码生成 AST；
支持同步或者异步转换高版本的 JS 代码到最低 ES3 版本；
支持同步或者异步压缩 JS 代码。

@swc/wasm-web

@swc/wasm-web 使用 WebAssembly 在浏览器内同步转换代码。

@swc/html

@swc/html 支持对 HTML 代码进行同步或异步压缩。

Rspack

Rspack 基于 Rust 语言开发，底层使用 SWC 来转换和压缩 JS 代码，API 基本对齐 Webpack，目标就是无缝替换 Webpack，提升在大型项目上的构建打包速度。

Rspack 于 2024/8/28 就发布了第一个稳定版本 1.0，到目前差不多正好一年的时间，可以用于生产环境中，非常稳定了。相比 Webpack，Rspack 还提供 CLI 命令（例如pnpm create rspack@latest）用于直接创建项目，开箱即用，非常方便。

module 解析

相比 Webpack，Rspack 内置了对.js、.css、.json、以及静态资源（图片、视频、字体）等模块类型的支持，对于 jsx、less 等其他模块类型可以自行配置 Loader 解析。

plugins

Rspack 目前支持了大部分常用的 Webpack 插件，具体查看Rspack-plugins的描述。

其他功能

对于 Webpack 的一些新特性，例如 Module Federation、Lazy compilation、Chunk Splitting 以及 Tree shaking 等也都已经支持，具体请查看 Rspack 官方详细的文档介绍。

Rsbuild

Rsbuild 是基于 Rspack 开发，专用于构建 Web 应用的工具。Rsbuild 根据不同的 UI 框架（React、VUE等）预设了部分 Rspack 的配置项，通过使用 Rsbuild CLI 能一行命令创建项目并开箱即用，省去了配置构建工具的繁琐步骤。

Rslib

Rslib 是基于 Rspack 的库构建工具。

Rslib 具有以下特性：

CLI 命令直接创建库项目，开箱即用；
内置对几乎所有模块类型的支持，常见的jsx，css，less以及图片，视频，字体等全都默认支持；
支持生成库的多种格式，esm、cjs，iife以及 umd 等；
支持 bundleless 模式；
支持 isolatedDeclarations；
支持模块联邦开发，也就是打包成一个独立的模块；
支持 Storybook 插件。

Rslint

Rslint 是使用 go 语言编写的代码检查工具，它是从 tsgolint fork 出来维护的版本，上文说过，tsgolint已经没有继续开发的计划了。

Rslint 相比 ESLint 有以下优化：

TS 优先，基于 go 和 typescript-go 重写 ESLint 和 typescript-eslint 的规则；
提升速度，预测 20~40 倍于 ESLint；
简化 ESLint 繁琐复杂的配置；
支持 Monorepo，以及 TypeScript project references。

Rslint 目前仍处于开发阶段，尚无稳定版本，可以在官方文档中查看其进度。

Rspress

Rspress 是一个基于 Rsbuild 的静态站点生成器，基于 React 框架进行渲染，内置了一套默认的文档主题。

相比 React 生态的 Docusaurus 来说，Rspress 使用了基于 Rust 开发了 Markdown 编译器mdx-rs，编译文档的速度更快。

Rspress 还具有以下特性：

根据文档目录自动生成布局；
多版本文档展示；
内置对全部文档内容的搜索；
提供组件的预览和 Playground 功能，并且支持移动端组件的预览。

Rstest

Rstest 是一个基于 Rspack 的测试框架，提供兼容 Jest 的 API，内置对 TypeScript、ESM 的支持，目前处于开发阶段，暂未发布稳定版本。

Rsdoctor

Rsdoctor 是一个项目构建分析工具，对编译、构建过程以及依赖等信息提供可视化的图表和信息展示。

Rsdoctor是一个项目构建分析工具，对编译、构建过程以及依赖等信息提供可视化的图表和信息展示。简单来说，Rsdoctor 就是一个 super webpack bundle analyzer。之前用 Webpack 需要安装webpack bundle analyzer、speed-measure-webpack-plugin等等插件才能监测到项目内部构建的细节，现在只需要一个插件就能可视化展示更详细的项目构建信息。

Rsdoctor 支持所有基于 Rspack 或 Webpack 的工具和框架，如果是 Webpack 项目，可以使用 @rsdoctor/webpack-plugin 接入，基于 Rsdoctor 的 CLI 命令启动项目，就会自动打开一个本地页面展示项目构建的信息。

Rsdoctor 能够分析模块解析 Loader 以及 Plugins 的执行时间：

Rsdoctor 能够显示打包产物的体积，有webpack bundle analyzer那样的 treemap 功能：

Rsdoctor 还能检测项目的重复依赖，这在 monorepo 项目中十分实用。具体可查看官方文档对于重复包优化的介绍。

Bun

Bun 使用 Zig 语言开发的 JS 运行时，类似于 Nodejs，但是它本身内置了一套开发、测试、运行和打包 JS、TS 项目的工具。Bun 兼容 Nodejs 生态，旨在取代 Node.js、NPM、Webpack 等多个工具，成为一个完整、高效的 JavaScript 运行时。

Bun 目前具有以下优势：

启动速度快，Bun 使用 JavaScriptCore 引擎，官方文档显示启动速度目前比 Node.js 快 4 倍；
安装包的速度快，Bun 的包管理器是原生实现的，提供类似于 NPM 一样的依赖管理命令，如 bun add、bun install 等，但是其速度远远超过 NPM、PNPM 这些包管理工具， bun install 的速度为 npm install 的 25 倍以上；
Bun 实现了标准的 Web API，例如fetch、WebSocket和ReadableStream，并且致力于完全兼容内置的 Node.js 全局变量（process、Buffer）和模块（path、fs、http等）；
Bun 内置对大量模块类型的解析，如 ES Module，JSX，TS，HTML，CSS，WASM 等；
Bun 内置的命令支持对项目构建打包，使用 bun build 命令能直接构建打包项目，官方文档显示其性能非常优秀：

Bun 内置测试工具，使用 bun test 能直接测试 JSX，TS 等模块代码，同时还支持快照测试，DOM 测试以及 Watch 模式等，非常方便。Bun 的目的是兼容 Jest，但是目前仍有一些功能尚未实现。
Bun 内置对 monorepo 的支持，可以直接在 package.json 中使用 workspaces 属性管理多个项目；使用 bun install 或者执行scripts 时可以使用 --filter 选择 monorepo 下的项目；可参考示例仓库。

总而言之，Bun 将多个工具整合到了它的运行时中，使用 Bun 则不需要单独安装和配置不同的构建、测试工具，下面是 Bun 和 Nodejs、deno 这些运行时的详细对比。

总结

总体来说，Rstack 生态发展的路线更加清晰和成熟，大部分工具基本都可以稳定用于生产环境了；而 Vite 依赖的 OXC 目前还处于早期快速迭代状态，毕竟 OXC 是完全使用 Rust 重写编译器，难度很大，所以进展会缓慢一点。

最后就以一张简单的表格总结一下上面介绍的各种工具：

生态	Vite	Rstack	Bun
编译器	OXC	SWC	内置
构建工具	Rolldown	Rspack	内置`bun build`
库打包工具	Tsdown	Rslib	内置`bun build`
测试工具	Vitest	Rstest	内置`bun test`
Linter	Oxlint	Rslint	无
Formatter	@prettier/plugin-oxc	无	无
文档开发	VitePress	Rspress	无
其他		Rsdoctor