Vite+ 深度解剖：从 Rolldown 到 Oxlint，尤雨溪的统一工具链革命

前言：前端工具链的碎片化困境

如果你是一个有五年以上经验的前端工程师，一定经历过这样的场景：

# 一个典型前端项目的 devDependencies
{
  "devDependencies": {
    "vite": "^6.0.0",           # 构建工具
    "vitest": "^2.0.0",         # 测试框架
    "eslint": "^8.0.0",         # 代码检查
    "@typescript-eslint/parser": "^6.0.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "prettier": "^3.0.0",       # 代码格式化
    "eslint-config-prettier": "^9.0.0",  # ESLint + Prettier 冲突解决
    "tsup": "^8.0.0",           # 库打包
    "turbo": "^2.0.0",          # Monorepo 任务调度
    // ... 还有 50+ 个配置文件
  }
}

这只是冰山一角。一个成熟的前端项目通常伴随着：

• 5-10 个配置文件：vite.config.ts、vitest.config.ts、.eslintrc.js、.prettierrc、tsconfig.json、turbo.json...
• 3-5 套插件系统：Vite 插件、Rollup 插件、ESLint 插件、Vitest 插件...
• N 个行为不一致：开发模式用 esbuild，生产用 Rollup；ESLint 和 Prettier 规则冲突；TypeScript 类型检查和 Vitest 配置分离...

这不是夸张。这是 2024-2025 年前端工程化的真实写照：工具链碎片化。

2026 年，尤雨溪创立的 VoidZero 团队给出了终极答案：Vite+（Vite Plus）—— 一个统一的前端工具链，将构建、测试、代码检查、格式化、库打包、Monorepo 任务调度全部收敛到一个入口、一个配置文件。

本文将从第一性原理深度拆解 Vite+ 的架构设计、核心组件、性能优化与迁移实战。

一、为什么需要统一工具链？

1.1 Vite 的双轨制问题

Vite 在 2020 年横空出世，用 ESM 原生支持和 esbuild 极速编译重新定义了"开发体验"。但它一直有个历史包袱：

开发模式：源码 → esbuild 快速编译 → ESM 模块 → 浏览器
生产模式：源码 → Rollup 精细打包 → Bundle → 浏览器

两套工具、两套插件系统、两套转换流水线。这导致了：

1. 行为不一致 Bug：开发环境正常的代码，生产构建报错（esbuild 和 Rollup 对某些边缘语法的处理不同）
2. 插件维护成本高：需要同时适配 esbuild 和 Rollup 的 API
3. 胶水代码膨胀：Vite 内部需要大量"胶水代码"协调两套系统

Vite 8 的核心使命就是：统一打包器。

1.2 工具链割裂的成本

一个典型的前端项目生命周期：

创建项目 → 开发 → 测试 → 代码检查 → 格式化 → 类型检查 → 构建 → 部署
    ↓        ↓       ↓         ↓          ↓          ↓         ↓
  脚手架    Vite   Vitest    ESLint    Prettier     tsc     Rollup
                    ↓         ↓
                 配置分离   规则冲突

问题一：配置分散

// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [react()],
  build: { ... }
})

// vitest.config.ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
  test: { ... }
})

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: { ... }
}

// .prettierrc
{
  "semi": false,
  "singleQuote": true
}

// tsconfig.json
{
  "compilerOptions": { ... }
}

// turbo.json
{
  "tasks": {
    "build": { "outputs": ["dist/**"] }
  }
}

六个配置文件，分布在项目根目录的各个角落。修改一个构建配置，可能需要同步更新 3 个文件。

问题二：性能浪费

# 代码检查
$ eslint src/ --ext .ts,.tsx
# 耗时：45 秒（大型项目）

# 类型检查
$ tsc --noEmit
# 耗时：60 秒

# 测试
$ vitest run
# 耗时：30 秒

# 构建
$ vite build
# 耗时：120 秒

每个工具都要独立解析 AST、构建依赖图、执行转换。大量重复工作。

问题三：工具生态割裂

• ESLint 插件 ≠ Prettier 插件
• Vite 插件 ≠ Rollup 插件
• Vitest 配置 ≠ Vite 配置（虽然共享一部分）

一个项目可能需要维护多套插件生态，每套有自己的版本、配置方式、更新频率。

1.3 VoidZero 的解法：All-in-One

VoidZero 团队的愿景很明确：用一个工具链，解决所有前端工程化需求。

vite-plus dev      # 开发服务器（Vite + Rolldown）
vite-plus build    # 生产构建（Rolldown）
vite-plus test     # 测试（Vitest）
vite-plus lint     # 代码检查（Oxlint）
vite-plus format   # 格式化（Oxfmt）
vite-plus typecheck # 类型检查（Oxc）
vite-plus pack     # 库打包（tsdown）
vite-plus task     # Monorepo 任务调度（内置）

一个入口、一个配置文件：

// vite-plus.config.ts
import { defineConfig } from 'vite-plus'

export default defineConfig({
  build: { ... },    // 构建
  test: { ... },     // 测试
  lint: { ... },     // 代码检查
  format: { ... },   // 格式化
  typecheck: { ... }, // 类型检查
  run: { ... }       // 任务调度
})

这不是"重新发明轮子"，而是把所有轮子装在同一辆车上。

二、核心架构：Rust 驱动的工具链矩阵

2.1 技术栈全景图

Vite+ 的核心是一组 Rust 编写的高性能工具：

┌─────────────────────────────────────────────────────────────┐
│                         Vite+ CLI                           │
│                   (统一的命令行入口)                          │
└─────────────────────────────────────────────────────────────┘
                              │
        ┌─────────────────────┼─────────────────────┐
        ▼                     ▼                     ▼
┌───────────────┐    ┌───────────────┐    ┌───────────────┐
│   Rolldown    │    │    Oxlint     │    │    Vitest     │
│  (打包器)      │    │   (Linter)    │    │   (测试)      │
│   Rust        │    │    Rust       │    │   TypeScript  │
└───────────────┘    └───────────────┘    └───────────────┘
        │                     │                     │
        └─────────────────────┼─────────────────────┘
                              ▼
                    ┌───────────────┐
                    │      Oxc      │
                    │  (解析器)      │
                    │    Rust       │
                    └───────────────┘
                              │
                              ▼
                    ┌───────────────┐
                    │ LightningCSS  │
                    │ (CSS处理)      │
                    │    Rust       │
                    └───────────────┘

核心组件：

2.2 为什么选择 Rust？

Rust 在构建工具领域有三个不可替代的优势：

1. 零成本抽象

// Rust 的高性能抽象
fn parse_module(source: &str) -> Result<Module, Error> {
    let lexer = Lexer::new(source);  // 零成本抽象
    let parser = Parser::new(lexer); // 编译期内联
    parser.parse()                   // 无运行时开销
}

相比之下，JavaScript 的抽象会带来运行时开销。

2. 内存安全（无 GC）

Rust 内存模型：
┌────────────────────────────────────────┐
│  编译时所有权检查 + 无 GC 停顿          │
│  → 可预测的性能                         │
│  → 适合长时间运行的构建进程             │
└────────────────────────────────────────┘

JavaScript 内存模型：
┌────────────────────────────────────────┐
│  运行时 GC + 停顿                       │
│  → 性能抖动                             │
│  → 大型项目可能几分钟一次 Full GC       │
└────────────────────────────────────────┘

3. 并行计算

// Rust 的 Rayon 并行库
use rayon::prelude::*;

fn compile_modules(modules: Vec<Module>) -> Vec<Output> {
    modules.par_iter()  // 自动并行化
        .map(|m| compile(m))
        .collect()
}

Rust 的并发模型天然适合构建工具的并行化需求——模块编译、文件读取、AST 转换都可以并行执行。

2.3 Rolldown：统一打包器

Rolldown 是 Vite+ 的核心引擎，它是用 Rust 从头编写的 JavaScript 打包器。

设计目标：

1. 兼容 Rollup 插件 API（存量生态无缝迁移）
2. 达到 esbuild 的转换速度（Rust + 并行编译）
3. 统一开发/生产构建（不再需要 esbuild + Rollup 双引擎）

架构深度剖析：

┌─────────────────────────────────────────────────────────────┐
│                    Rolldown 架构                            │
└─────────────────────────────────────────────────────────────┘
         │
         ├──► Oxc Parser (Rust)
         │      ├── 词法分析 (Lexer)
         │      ├── 语法分析 (Parser)
         │      └── AST 生成
         │
         ├──► Module Graph Builder
         │      ├── 依赖解析
         │      ├── 循环依赖检测
         │      └── Tree Shaking 分析
         │
         ├──► Chunk Generator
         │      ├── 代码分割
         │      ├── Scope Hoisting
         │      └── 副作用分析
         │
         └──► Renderer
                ├── 压缩 (Terser API 兼容)
                ├── Source Map 生成
                └── Hash 计算

关键设计点：

1. Oxc 解析器

Oxc 的解析速度是 SWC 的 2 倍，是 Babel 的 10 倍以上。它的核心优化：

• 零拷贝字符串：解析阶段不分配新字符串，直接引用源码切片
• 扁平化 AST：减少指针跳转，提高缓存命中率
• SIMD 加速：利用 CPU 向量指令加速词法分析

2. 并行编译

Rolldown 利用 Rayon 库实现自动并行化。在 16 核 CPU 上，模块编译可以接近线性加速。

3. 增量构建

Rolldown 内置增量构建缓存，只重新编译变更的模块及其依赖链。在大型项目中，二次构建可以快 5-10 倍。

性能基准测试：

测试项目：中型 React 项目（500+ 组件，2000+ 模块）

2.4 Oxlint：比 ESLint 快 50 倍

Oxlint 是用 Rust 编写的 JavaScript/TypeScript Linter，目标是替代 ESLint。

设计哲学：

"ESLint 的 80% 常用规则，50-100 倍的速度"

性能对比：

# 传统 ESLint
$ eslint src/ --ext .ts,.tsx
# 耗时：45 秒（大型项目）

# Oxlint
$ oxlint src/
# 耗时：0.8 秒

为什么这么快？

1. 统一遍译 + 并行检查

ESLint 流程：
文件 → 解析 AST → 遍历 AST → 执行规则
     ↑
     每个文件都要重新解析

Oxlint 流程：
文件 → 解析 AST → 并行执行所有规则
     ↓
     一次解析，所有规则共享 AST
     规则并行执行（Rust 的 Rayon）

2. 规则优化

Oxlint 的规则设计避免了多次遍历 AST。大部分规则只需要一次遍历就能完成检查。

3. 规则覆盖

Oxlint 目前支持 600+ 规则，覆盖了：

• ESLint 核心规则（eslint:recommended）
• TypeScript 规则（@typescript-eslint/recommended）
• React 规则（eslint-plugin-react）
• React Hooks 规则（eslint-plugin-react-hooks）
• Import 规则（eslint-plugin-import）
• Promise 规则（eslint-plugin-promise）

兼容性：

大部分项目可以直接把 .eslintrc 复制为 .oxlintrc，零成本迁移。

2.5 LightningCSS：CSS 处理的 100 倍加速

LightningCSS 是用 Rust 编写的 CSS 处理器，替代 PostCSS 生态。

功能矩阵：

性能对比：

# PostCSS 处理 1000 个 CSS 文件
$ postcss src/**/*.css --dir dist
# 耗时：12 秒

# LightningCSS 处理 1000 个 CSS 文件
$ lightningcss src/**/*.css --dir dist
# 耗时：0.1 秒

三、Vite+ 的统一配置与 CLI

3.1 一条命令搞定一切

Vite+ 提供了统一的 CLI 入口：

# 安装
npm install -D vite-plus

# 或全局安装 CLI
curl -fsSL https://vite.plus | bash  # macOS/Linux
irm https://vite.plus/ps1 | iex      # Windows

# 创建项目
npm create vite-plus@latest my-app

# 开发
vite-plus dev

# 构建
vite-plus build

# 代码检查
vite-plus lint

# 类型检查
vite-plus typecheck

# 测试
vite-plus test

# 格式化
vite-plus format

# 库打包
vite-plus pack

# Monorepo 任务
vite-plus task build --filter="./packages/*"

3.2 统一配置文件

// vite-plus.config.ts
import { defineConfig } from 'vite-plus'

export default defineConfig({
  // 构建配置（Rolldown）
  build: {
    target: 'es2024',
    minify: 'lightningcss',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        }
      }
    }
  },

  // 代码检查（Oxlint）
  lint: {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'error',
    },
    ignore: ['**/dist/**', '**/node_modules/**'],
  },

  // 格式化（Oxfmt）
  format: {
    semi: false,
    singleQuote: true,
    trailingComma: 'all',
    printWidth: 100,
  },

  // 测试（Vitest）
  test: {
    framework: 'vitest',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
    },
    environment: 'jsdom',
  },

  // 类型检查（Oxc）
  typecheck: {
    strict: true,
    noEmit: true,
  },

  // 库打包（tsdown）
  pack: {
    entry: 'src/index.ts',
    formats: ['esm', 'cjs'],
    dts: true,  // 自动生成 .d.ts
  },

  // Monorepo 任务调度
  run: {
    tasks: {
      build: {
        dependsOn: ['^build'],
        outputs: ['dist/**'],
      },
      dev: {
        persistent: true,
        cache: false,
      },
    },
    cache: {
      inputs: ['src/**', '!**/*.test.ts'],
      outputs: ['dist/**'],
    },
  },
})

配置收敛的好处：

1. 单一真相来源：所有工具配置在一个文件中，避免冲突
2. 共享解析结果：Oxc 解析一次，build/lint/test/typecheck 共享 AST
3. 热重载友好：修改配置后，所有工具自动重新加载

3.3 与现有生态的兼容性

Vite+ 并不是"推翻一切"，而是渐进式兼容：

1. Rollup 插件兼容

// vite-plus.config.ts
import { defineConfig } from 'vite-plus'
import react from '@vitejs/plugin-react'      // Vite 插件
import image from '@rollup/plugin-image'      // Rollup 插件

export default defineConfig({
  plugins: [react(), image()],
})

Vite+ 兼容大部分 Rollup 插件（通过 Rolldown 的 Rollup API 层）。

2. Vitest 配置继承

// vite-plus.config.ts
export default defineConfig({
  test: {
    // Vitest 配置，直接继承 Vite 的 resolve.alias
    alias: [{ find: '@', replacement: '/src' }],
  },
})

3. ESLint 规则迁移

# 自动迁移 .eslintrc 到 .oxlintrc
vite-plus migrate --from eslint

四、从 Turbo/Webpack 迁移实战

4.1 从 Turbo 迁移到 Vite+ 任务调度

Turbo 是目前最流行的 Monorepo 任务调度工具。Vite+ 内置了类似能力。

Turbo 配置：

// turbo.json
{
  "$schema": "https://turborepo.com/schema.json",
  "tasks": {
    "build": {
      "outputs": ["dist/**"],
      "dependsOn": ["^build"]
    },
    "dev": {
      "persistent": true,
      "cache": false
    }
  }
}

Vite+ 等价配置：

// vite-plus.config.ts
export default defineConfig({
  run: {
    tasks: {
      build: {
        dependsOn: ['^build'],
        outputs: ['dist/**'],
      },
      dev: {
        persistent: true,
        cache: false,
      },
    },
    cache: {
      scripts: true,  // 缓存 package.json scripts
      tasks: true,    // 缓存 tasks
    },
  },
})

迁移步骤：

# 1. 移除 Turbo
pnpm remove turbo
rm turbo.json

# 2. 安装 Vite+
curl -fsSL https://vite.plus | bash

# 3. 更新 package.json scripts
{
  "scripts": {
-   "dev": "turbo run dev --filter=\"./apps/*\"",
+   "dev": "vite-plus task dev --filter=\"./apps/*\"",
-   "build": "turbo run build",
+   "build": "vite-plus task build"
  }
}

性能对比：

4.2 从 Webpack 迁移

Webpack 的迁移成本主要在于 Loader/Plugin 生态。

迁移对照表：

迁移步骤：

# 1. 安装 Vite+
npm install -D vite-plus

# 2. 创建 vite-plus.config.ts
# （根据 webpack.config.js 简化）

# 3. 更新 package.json
{
  "scripts": {
-   "dev": "webpack serve",
+   "dev": "vite-plus dev",
-   "build": "webpack --mode production",
+   "build": "vite-plus build"
  }
}

# 4. 移除 Webpack
npm uninstall webpack webpack-cli webpack-dev-server

# 5. 调整入口文件
# 将 html-webpack-plugin 的模板改为 Vite 入口

常见问题：

Q1: require() 语法不支持

// Webpack 支持
const config = require('./config')

// Vite+ 需要改为 ESM
import config from './config'

Q2: process.env 改为 import.meta.env

// Webpack
const apiUrl = process.env.API_URL

// Vite+
const apiUrl = import.meta.env.VITE_API_URL

Q3: __dirname 改为 import.meta.url

// Webpack (Node.js)
const path = require('path')
const root = path.resolve(__dirname, '../')

// Vite+ (ESM)
import { fileURLToPath } from 'url'
const root = fileURLToPath(new URL('../', import.meta.url))

4.3 性能提升实测

测试项目：大型 React Monorepo（10 个 apps，20 个 packages）

五、深度实战：构建一个 Vite+ 项目

5.1 项目初始化

# 创建项目
npm create vite-plus@latest my-app
cd my-app

# 项目结构
my-app/
├── src/
│   ├── index.tsx
│   ├── App.tsx
│   └── styles/
│       └── global.css
├── vite-plus.config.ts
├── package.json
└── tsconfig.json

5.2 配置详解

// vite-plus.config.ts
import { defineConfig } from 'vite-plus'
import react from '@vitejs/plugin-react'

export default defineConfig({
  // 插件
  plugins: [react()],

  // 构建配置
  build: {
    target: 'es2024',
    minify: 'lightningcss',
    rollupOptions: {
      output: {
        // 代码分割策略
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('react')) return 'react-vendor'
            if (id.includes('lodash')) return 'lodash-vendor'
            return 'vendor'
          }
        },
      },
    },
  },

  // 代码检查
  lint: {
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/explicit-function-return-type': 'off',
    },
  },

  // 测试
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'lcov'],
      exclude: ['node_modules/', 'src/test/'],
    },
  },

  // 类型检查
  typecheck: {
    strict: true,
    noUnusedLocals: true,
    noUnusedParameters: true,
  },

  // 开发服务器
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

5.3 开发工作流

# 启动开发服务器
vite-plus dev

# 输出
  VITE+ v0.1.12  ready in 234 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://192.168.1.100:3000/
  ➜  press h + enter to show help

  Using:
  - Rolldown (bundler)
  - Oxlint (linter)
  - LightningCSS (CSS transformer)
  - Vitest (test runner)

开发时的自动检查：

文件保存 → 触发 HMR
         ↓
         → Oxlint 自动检查（后台）
         → Oxc 类型检查（后台）
         → 结果推送到编辑器

5.4 生产构建

# 构建生产版本
vite-plus build

# 输出
vite-plus build v0.1.12
Building for production...
✓ 1500 modules transformed.
dist/index.html                  1.23 kB
dist/assets/index-DYWP5j6K.js  234.56 kB │ gzip: 78.23 kB
dist/assets/react-vendor-B7Xk.js  89.12 kB │ gzip: 28.45 kB
dist/assets/index-CssStyLe.css    12.34 kB │ gzip: 4.56 kB
✓ built in 12.34s

构建产物分析：

# 分析构建产物
vite-plus analyze

# 输出
Bundle Size Analysis:
┌─────────────────────────────────────────────────────┐
│ react-vendor (89 KB)                                │
│ ████████████████████████████████████████           │
├─────────────────────────────────────────────────────┤
│ index (235 KB)                                      │
│ ████████████████████████████████████████████████   │
├─────────────────────────────────────────────────────┤
│ lodash-vendor (45 KB)                               │
│ ███████████████████                                 │
└─────────────────────────────────────────────────────┘

Tree Shaking:
- Removed 234 unused exports
- Saved 56 KB

5.5 库开发模式

如果你的项目是一个库而不是应用：

// vite-plus.config.ts (库模式)
export default defineConfig({
  pack: {
    entry: 'src/index.ts',
    name: 'MyLib',
    formats: ['esm', 'cjs', 'umd'],
    dts: true,  // 自动生成类型声明
    sourcemap: true,
    external: ['react', 'react-dom'],  // peer dependencies
  },
})

# 库打包
vite-plus pack

# 输出
dist/
├── index.js        (ESM)
├── index.cjs       (CommonJS)
├── index.umd.js    (UMD)
├── index.d.ts      (TypeScript 声明)
└── index.d.cts     (CommonJS 声明)

六、Monorepo 支持

6.1 项目结构

my-monorepo/
├── apps/
│   ├── web/
│   │   ├── src/
│   │   └── package.json
│   └── admin/
│       ├── src/
│       └── package.json
├── packages/
│   ├── ui/
│   │   ├── src/
│   │   └── package.json
│   └── utils/
│       ├── src/
│       └── package.json
├── vite-plus.config.ts  # 根配置
└── pnpm-workspace.yaml

6.2 根配置

// vite-plus.config.ts (根)
import { defineConfig } from 'vite-plus'

export default defineConfig({
  run: {
    tasks: {
      build: {
        dependsOn: ['^build'],  // 先构建依赖包
        outputs: ['dist/**'],
      },
      dev: {
        persistent: true,
        cache: false,
      },
      test: {
        dependsOn: ['^build'],
      },
    },
    cache: {
      inputs: ['src/**', 'package.json', 'vite-plus.config.ts'],
      outputs: ['dist/**', '.coverage/**'],
    },
  },
})

6.3 任务执行

# 构建所有包和应用
vite-plus task build

# 只构建特定包
vite-plus task build --filter="@my-org/ui"

# 开发特定应用
vite-plus task dev --filter="./apps/web"

# 运行所有测试
vite-plus task test

# 输出
• @my-org/utils build
• @my-org/ui build
• @my-org/web build
• @my-org/admin build

  Tasks:    4 successful, 4 total
  Cached:   0/4
  Time:     12.3s

七、与竞品的横向对比

7.1 vs Turbo + Vite 5

结论：Vite+ 在功能等价的前提下，提供了更统一的体验和更快的速度。

7.2 vs Nx

Nx 是一个功能更强大的 Monorepo 工具，但它的学习成本更高。

结论：Nx 适合大型企业级 Monorepo，Vite+ 适合中小型前端项目。

7.3 vs Turbopack

Turbopack 是 Vercel 用 Rust 编写的增量打包器，专为 Next.js 优化。

结论：Turbopack 是 Next.js 的最佳选择，Vite+ 是通用前端项目的选择。

八、踩坑指南与最佳实践

8.1 常见坑

坑 1：ESLint 插件不兼容

部分 ESLint 插件（如 eslint-plugin-import 的某些规则）依赖 ESLint 的特定 API，在 Oxlint 中可能不支持。

解法：

// vite-plus.config.ts
export default defineConfig({
  lint: {
    // 混合模式：Oxlint + ESLint
    use: ['oxlint', 'eslint'],  // 先用 Oxlint 快速检查，再用 ESLint 补充
    eslint: {
      rules: {
        // 只启用 Oxlint 不支持的规则
        'import/no-cycle': 'error',
      },
    },
  },
})

坑 2：Rolldown 插件兼容性

部分 Rollup 插件依赖 Rollup 的内部 API，在 Rolldown 中可能报错。

解法：

// vite-plus.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        // 不兼容的插件降级到 Rollup
        incompatiblePlugin(),
      ],
    },
    // 临时回退到 Rollup
    builder: 'rollup',  // 'rolldown' | 'rollup'
  },
})

坑 3：CSS Modules 路径问题

Vite+ 的 CSS Modules 需要文件名包含 .module.：

/* 正确 */
Button.module.css
Button.module.scss

/* 错误（不会被识别为 CSS Modules） */
Button.css
Button.scss

8.2 最佳实践

1. 渐进式迁移

# 第一阶段：只替换打包器
npm install vite-plus --save-dev
vite-plus build  # 替换 vite build

# 第二阶段：替换 Linter
vite-plus lint   # 替换 eslint

# 第三阶段：替换测试配置
vite-plus test   # 替换 vitest

# 第四阶段：启用 Monorepo 任务调度
vite-plus task build

2. 配置分层

// vite-plus.config.ts
import { defineConfig } from 'vite-plus'

// 共享配置
const sharedConfig = {
  lint: {
    rules: { 'no-console': 'warn' },
  },
}

// 应用配置
export default defineConfig({
  ...sharedConfig,
  build: { ... },  // 应用特有
})

// packages/ui/vite-plus.config.ts
import { defineConfig } from 'vite-plus'

// 库配置
export default defineConfig({
  pack: { ... },  // 库特有
})

3. CI 优化

# .github/workflows/ci.yml
name: CI
on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      
      - name: Cache
        uses: actions/cache@v3
        with:
          path: |
            ~/.pnpm-store
            node_modules/.vite-plus-cache
          key: ${{ runner.os }}-vite-plus-${{ hashFiles('**/pnpm-lock.yaml') }}
      
      - run: pnpm install
      - run: pnpm vite-plus lint
      - run: pnpm vite-plus typecheck
      - run: pnpm vite-plus test
      - run: pnpm vite-plus build

九、未来展望

VoidZero 团队的路线图显示，Vite+ 的未来将聚焦：

9.1 AI 辅助开发

// vite-plus.config.ts
export default defineConfig({
  ai: {
    // AI 代码审查
    review: {
      provider: 'anthropic',  // 或 'openai'
      rules: ['security', 'performance', 'accessibility'],
    },
    // AI 测试生成
    testGeneration: {
      enabled: true,
      coverage: 80,  // 目标覆盖率
    },
  },
})

9.2 边缘计算支持

# 一键部署到边缘
vite-plus deploy --target=cloudflare-workers
vite-plus deploy --target=deno-deploy

9.3 WebAssembly 组件

// vite-plus.config.ts
export default defineConfig({
  wasm: {
    components: [
      './wasm/image-processor.wasm',
    ],
    // 自动生成 TypeScript 类型
    types: true,
  },
})

十、总结

Vite+ 不是"重新发明轮子"，而是把所有轮子装在同一辆车上。

它解决了前端工具链的三大痛点：

1. 碎片化：6+ 配置文件 → 1 个
2. 性能瓶颈：JavaScript 工具 → Rust 工具（10-100 倍加速）
3. 行为不一致：esbuild + Rollup 双引擎 → Rolldown 统一引擎

适用场景：

• ✅ 新项目：直接使用 Vite+，获得最佳开发体验
• ✅ Vite 项目：渐进式迁移，先替换 Linter/测试，再替换打包器
• ✅ Webpack 项目：迁移成本可控，收益显著
• ⚠️ Nx 项目：如果是大型企业 Monorepo，暂不建议迁移

不适用场景：

• ❌ Next.js 项目：推荐使用 Turbopack
• ❌ 遗留项目：ES5/CommonJS 混合项目，建议先现代化

如果你还在被 ESLint 的慢速、Rollup 的配置、Turbo 的独立配置文件困扰，Vite+ 是一个值得立即尝试的选择。

一句话总结：

Vite+ = Vite 8 + Rolldown + Oxlint + Oxc + LightningCSS + Vitest + 内置 Monorepo

一个工具链，解决所有前端工程化需求。

延伸阅读：

• Rolldown 官方文档
• Oxc 官方文档
• Vite+ 官方文档
• VoidZero 博客