工程化2025-03-10

Vite 6 和 Rust 工具链：前端构建的下一步

2025 年前端构建工具的格局基本定了：Vite 是主流选择，Rust 写的工具正在从边缘走向核心。Vite 6 在 2024 年底发布，配合 SWC、Turbopack 这些 Rust 工具，构建速度和开发体验又上了一个台阶。

Vite 6 的主要变化

Environment API

这是 Vite 6 最大的新功能。之前如果你需要在同一个项目里同时跑浏览器端和服务端代码，配置起来比较麻烦。Environment API 给了一个统一的方案：

// vite.config.js
export default defineConfig({
  environments: {
    client: {
      build: { outDir: 'dist/client' },
    },
    server: {
      build: { outDir: 'dist/server' },
    },
  },
});

对 SSR 项目来说这个功能挺实用的，不用再维护两套 vite config。

更好的 CSS 处理

Vite 6 内置了对 Lightning CSS 的支持。Lightning CSS 是一个用 Rust 写的 CSS 转换工具，比 PostCSS 快不少：

// vite.config.js
export default defineConfig({
  css: {
    transformer: 'lightningcss',
  },
});

实测在一个有 200+ CSS 文件的项目里，构建时间从 3.2 秒降到了 1.1 秒。不过要注意 Lightning CSS 对一些 PostCSS 插件不支持，迁移前需要检查依赖。

为什么是 Rust

前端工具用 Rust 重写这件事，本质上是因为 JavaScript 处理密集型计算太慢了。打包、转译、压缩这些操作都是 CPU 密集型的。

几个关键的 Rust 工具：

工具	替代	速度提升
SWC	Babel	20-70x
Turbopack	Webpack	10x（官方宣称）
Lightning CSS	PostCSS	100x
Oxc	ESLint + Prettier	50-100x
Biome	ESLint + Prettier	50-100x

SWC 实战

Next.js 从 13 版本开始用 SWC 替代了 Babel。如果你用了 Next.js 13+，其实已经在用 Rust 工具链了，只是可能没注意到。

迁移自己的 Vite 项目到 SWC 也很简单：

// vite.config.js
import swc from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [swc()],
});

把 @vitejs/plugin-react 换成 @vitejs/plugin-react-swc 就行了，API 完全兼容。在我们的项目里做这个替换之后，热更新速度从 300ms 左右降到了 50ms 左右，体感很明显。

Oxc 和 Biome

这两个是比较新的项目，都在快速迭代中。

Oxc 是一个用 Rust 写的 JavaScript 工具链集合，包括 parser、linter、formatter、minifier、resolver。目前 linter 和 formatter 已经可以用了，替代 ESLint + Prettier。

Biome 的定位类似，也是想成为 ESLint + Prettier 的 Rust 替代品。目前我用 Biome 在几个新项目里做 lint 和格式化，配置比 ESLint 简单很多：

{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "noUnusedVariables": "error"
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space"
  }
}

一个配置文件搞定 lint + format，不用像以前那样装一堆 ESLint 插件和 Prettier 配置。

Turbopack 的现状

Turbopack 是 Vercel 推出的 Webpack 替代品，用 Rust 写的。Next.js 15 已经把 Turbopack 作为默认的 dev server。

实际使用下来，开发服务器的启动速度确实快了很多。但在构建（production build）方面，目前还是 Webpack 更稳定。Turbopack 的 build 模式还在积极开发中。

如果你用的是 Next.js，建议 dev 用 Turbopack，build 继续用 Webpack。在 next.config.js 里配置：

module.exports = {
  experimental: {
    turbo: {
      // dev 模式自动启用 Turbopack
    },
  },
};

Bun 作为构建工具

Bun 不只是一个运行时，它也自带打包功能。bun build 可以直接把 TypeScript 打包成 JavaScript，速度非常快。

不过说实话，Bun 的打包功能目前还比较基础。如果你的项目不需要复杂的代码分割和插件系统，用 Bun 打包可以省掉 Webpack/Vite 的配置。但对于大型项目，Vite 仍然是更成熟的选择。

迁移建议

如果你在考虑升级工具链，我的建议是：

已经在用 Vite 的项目：直接升到 Vite 6，把 React 插件换成 SWC 版本
用 Webpack 的老项目：新代码用 Vite，老项目逐步迁移。不需要一次性全换掉
lint/format 工具：新项目可以试试 Biome，老项目不急着重构就先用着 ESLint + Prettier
CSS 处理：如果 Tailwind 够用就不折腾 Lightning CSS

工具链升级的核心原则是：不影响开发效率的前提下，逐步引入。没必要为了用新工具而用新工具。

ViteRustwebpack

返回首页