Rolldown 深度实战：Vite 团队用 Rust 重写 JavaScript 打包引擎——从双引擎架构到 Bitset 代码分割的完整技术揭秘

引言：前端打包器的终极进化

2024 年 Vite 团队宣布了一个让前端社区震动消息：Rolldown——一个完全用 Rust 编写的高性能 JavaScript 打包器，将成为 Vite 的下一代构建引擎。

为什么这件事如此重要？因为在此之前的十多年里，前端打包领域经历了从 Webpack 到 Rollup、从 Parcel 到 esbuild 的不断迭代，但始终没有一款工具能同时做到：构建极快 + API 兼容 + 生态完善。Rolldown 的野心恰恰是打破这个不可能三角。

截至 2026 年中，Vite 6+ 已经默认集成 Rolldown，Vite 8 更是完成了从 "esbuild + Rollup" 双引擎向 Rolldown 统一引擎的全面切换。这意味着，今天你在用 vite build 打包时，底层跑的已经不是 JavaScript，而是 Rust。

本文将从架构设计、核心算法、代码实战到性能调优，全方位剖析 Rolldown 的技术内幕。无论你是 Vite 用户、Rollup 插件开发者，还是对编译器工程感兴趣的系统程序员，这篇万字长文都会给你带来实质性的收获。

一、历史背景：为什么 Vite 需要一个新打包器

1.1 Vite 的双引擎困境

Vite 的成功建立在一个精妙的分工之上：

• 开发环境：esbuild（Go 编写）负责依赖预构建和 TypeScript/JSX 转换，速度极快
• 生产构建：Rollup（JavaScript 编写）负责代码打包、Tree-shaking、Code Splitting

这种 "双引擎" 架构在 2020-2023 年间非常成功，但随着项目规模增长，问题逐渐暴露：

问题一：行为不一致

esbuild 和 Rollup 对同一份代码的处理结果可能不同。比如：

• esbuild 的 const enum 处理方式与 Rollup 不同
• 路径解析策略存在微妙差异
• Scope hoisting 的实现逻辑不一致

这导致开发环境和生产环境的代码行为可能不同，经典的 "开发环境正常但上线后报错" 问题。

问题二：维护成本翻倍

Vite 团队需要同时维护两套转换管道。每当 ECMAScript 标准新增特性，两边都要分别适配。当 React 或 Vue 发布新版本时，同样需要同步更新两套处理逻辑。

问题三：性能天花板

Rollup 是纯 JavaScript 实现，受限于 Node.js 的单线程模型和 V8 的 GC 开销。在大规模项目（10 万+ 模块）中，Rollup 的构建时间可能达到数十秒甚至分钟级。

1.2 为什么选择 Rust

Vite 团队评估了多种方案后，最终选择了 Rust：

Rust 的核心优势：

• 零成本抽象：写起来像高级语言，跑起来像 C++
• 所有权系统：编译期保证内存安全，没有 GC 停顿
• 异步生态成熟：tokio 是 Rust 异步运行时的事实标准
• WASM 支持一流：理论上 Rolldown 可以编译为 WASM 在浏览器中运行
• NAPI-RS：可以通过 Node.js N-API 与 JS 生态无缝互操作

二、Rolldown 核心架构

2.1 三阶段流水线

Rolldown 的打包过程分为三个核心阶段：

源代码 → [阶段1: Module Scanning] → [阶段2: Symbol Linking] → [阶段3: Code Generation] → 输出

阶段一：Module Scanning（模块扫描）

这个阶段的目标是构建完整的模块依赖图。对于每个入口模块，Rolldown 递归解析所有 import/export 语句，建立模块间的依赖关系。

Rolldown 使用 Oxc 的解析器（基于 Rust 实现的超快 JS/TS 解析器）来解析源代码。相比 esbuild 的 Go 解析器和 SWC 的 Rust 解析器，Oxc 在 2026 年的 benchmark 中已经位列前三。

// Rolldown 内部模块扫描的简化逻辑（伪代码）
struct ModuleScanner {
    module_graph: ModuleGraph,
    resolver: Resolver,
}

impl ModuleScanner {
    fn scan_entry(&mut self, entry: &str) -> Result<Vec<ModuleId>> {
        let mut queue = VecDeque::new();
        queue.push_back(entry.to_string());
        let mut modules = Vec::new();

        while let Some(id) = queue.pop_front() {
            if self.module_graph.contains(&id) {
                continue;
            }
            let source = fs::read_to_string(&id)?;
            let ast = oxc_parser::parse(&source)?;
            let imports = self.extract_imports(&ast);
            let exports = self.extract_exports(&ast);

            for import in &imports {
                let resolved = self.resolver.resolve(import.source, &id)?;
                queue.push_back(resolved);
            }

            self.module_graph.add_module(id, imports, exports, ast);
            modules.push(id);
        }
        Ok(modules)
    }
}

关键设计决策：

• 并行解析：多个独立模块可以并行解析，利用 Rayon 数据并行库
• 增量缓存：解析结果可以持久化到磁盘，下次构建只解析变更的模块
• 错误恢复：即使某个模块有语法错误，仍然继续解析其他模块，最后汇总报告

阶段二：Symbol Linking（符号链接）

模块扫描完成后，Rolldown 拥有了完整的模块图。符号链接阶段要解决的问题更加精细：确定每个导入符号的最终来源。

例如：

// a.js
export { foo } from './b.js';
export { bar } from './c.js';

// b.js
export { foo } from './d.js';
export const baz = 1;

符号链接需要确定：foo 最终来自 d.js，bar 来自 c.js，baz 来自 b.js。

这个阶段对于 Tree-shaking 至关重要——只有精确追踪了每个符号的来源，才能安全地移除未使用的导出。

// 符号链接的简化数据结构
struct SymbolLinker {
    symbol_map: HashMap<SymbolId, ResolvedSymbol>,
}

struct ResolvedSymbol {
    original_module: ModuleId,
    original_name: String,
    reexports: Vec<ModuleId>,  // 经过的 re-export 链路
    is_used: bool,             // 是否被引用
}

阶段三：Code Generation（代码生成）

代码生成是 Rolldown 最复杂的阶段，也是性能优化的主战场。Rolldown 提供两种代码生成模式：

1. Preserve Mode：保持原始模块结构，每个模块一个 chunk（主要用于库开发）
2. Normal Mode：智能合并模块为优化后的 chunks（生产环境默认模式）

Normal Mode 的核心是 Bitset 代码分割算法，我们后面会深入讲解。

2.2 与 Rollup 的兼容性策略

Rolldown 的设计目标之一是 100% 兼容 Rollup 的插件 API。这意味着你现有的 Rollup 插件理论上可以直接在 Rolldown 中使用。

实现方式：

// Rolldown 的 Rollup 兼容层
import { rolldown } from 'rolldown';
import legacyPlugin from 'some-rollup-plugin';

rolldown({
    input: 'src/index.js',
    plugins: [
        legacyPlugin(),  // Rollup 插件直接可用
    ],
});

底层实现上，Rolldown 将 Rollup 插件调用的 JS 函数通过 NAPI 桥接到 Rust 运行时。虽然存在一定的跨语言调用开销，但对于大多数 I/O 密集型插件（如处理文件、生成 manifest），这个开销可以忽略不计。

需要注意的不兼容点：

• this.getModuleInfo() 可能返回略有差异的元信息
• 虚拟模块的解析时机可能不同
• 部分钩子函数（如 buildEnd）的执行顺序有微小差异

三、Bitset 代码分割算法深度解析

这是 Rolldown 最核心的技术创新。传统打包器（包括 Rollup）的代码分割算法通常基于图论，时间复杂度较高。Rolldown 用一种精妙的位运算（Bitset）方式大幅降低了复杂度。

3.1 问题定义

给定 N 个模块和 M 个入口（chunk），目标是将模块分配到不同的 chunk 中，使得：

• 动态 import() 的模块自动分到独立 chunk
• 被多个 chunk 共享的模块提取到公共 chunk
• 尽可能减少总输出大小
• 每个 chunk 的模块数量合理（不出现极端大 chunk）

3.2 传统方法的问题

Rollup 的代码分割使用贪心算法 + 图遍历：

1. 从入口开始 DFS 遍历模块图
2. 遇到动态 import() 时创建新 chunk
3. 后续遍历中如果发现模块已属于其他 chunk，则标记为共享

这种方法的问题是：每判断一个模块是否属于某个 chunk，都需要遍历该 chunk 的所有模块。时间复杂度接近 O(N × M)。

3.3 Rolldown 的 Bitset 方案

Rolldown 的核心洞察：模块的 "可达性" 可以用位掩码（bitmask）高效表示。

// 每个 chunk 用一个 Bitset 表示其包含的模块
struct ChunkBitset {
    bits: Vec<u64>,  // 每个 bit 代表一个模块是否属于该 chunk
    chunk_modules: Vec<ModuleId>,
}

impl ChunkBitset {
    // 检查模块是否属于该 chunk：O(1)
    fn contains(&self, module_idx: usize) -> bool {
        let word_idx = module_idx / 64;
        let bit_idx = module_idx % 64;
        (self.bits[word_idx] >> bit_idx) & 1 == 1
    }

    // 标记模块属于该 chunk：O(1)
    fn insert(&mut self, module_idx: usize) {
        let word_idx = module_idx / 64;
        let bit_idx = module_idx % 64;
        self.bits[word_idx] |= 1 << bit_idx;
    }

    // 计算两个 chunk 的交集：O(N/64)
    fn intersection(&self, other: &ChunkBitset) -> ChunkBitset {
        let bits: Vec<u64> = self.bits.iter()
            .zip(other.bits.iter())
            .map(|(a, b)| a & b)
            .collect();
        ChunkBitset { bits, chunk_modules: vec![] }
    }
}

算法流程：

1. 初始化：每个入口创建一个空的 Bitset
2. Phase 1 - 手动分块处理：
   - 遍历用户的 manualChunks 配置
   - 将指定模块标记到对应 chunk 的 Bitset 中
3. Phase 2 - 自动分块：
   - 对每个入口，递归遍历其可达模块
   - 遇到动态 import() 创建新 chunk
   - 如果模块已被多个 chunk 标记（Bitset 与运算非零），
     考虑提取到公共 chunk
4. Phase 3 - 后处理：
   - 合并过小的 chunk
   - 拆分过大的 chunk
   - 生成 chunk 间的 import/export 关系

3.4 性能对比

以一个包含 50,000 个模块的中大型项目为例：

这就是 Bitset 的威力：通过将 O(1) 的位运算替代 O(n) 的数组遍历，将原本可能的 O(N²) 算法降到了接近 O(N)。

四、代码实战：从零配置 Rolldown 项目

4.1 Vite 6+ 项目（推荐方式）

如果你用的是 Vite 6+，Rolldown 已经是默认打包器，无需额外配置：

# 创建新项目
npm create vite@latest my-app -- --template react-ts
cd my-app

# Vite 6+ 默认使用 Rolldown 作为生产构建引擎
npm run build

构建日志会显示 Rolldown 的相关信息：

vite v6.x.x building for production...
✓ 1424 modules transformed.
Rolldown build completed in 1.2s
dist/index.html                0.46 kB │ gzip: 0.30 kB
dist/assets/index-Bk7eF.css   45.12 kB │ gzip: 8.23 kB
dist/assets/index-Cd8fG.js   142.78 kB │ gzip: 45.91 kB

4.2 独立使用 Rolldown

Rolldown 也可以脱离 Vite 独立使用，作为 Rollup 的替代品：

npm install rolldown -D

// rolldown.config.mjs
import { rolldown } from 'rolldown';

const build = await rolldown({
    input: 'src/index.js',
    output: {
        dir: 'dist',
        format: 'esm',
        chunkFileNames: 'assets/[name]-[hash].js',
        sourcemap: true,
    },
    plugins: [
        // Rollup 兼容插件
        resolve(),
        commonjs(),
    ],
});

await build.write({});

4.3 高级配置：手动分块与优化

// rolldown.config.mjs - 生产环境优化配置
import { rolldown } from 'rolldown';
import { resolve } from 'path';

const build = await rolldown({
    input: {
        main: 'src/main.js',
        admin: 'src/admin.js',
    },
    output: {
        dir: 'dist',
        format: 'esm',
        manualChunks(id) {
            // 将 node_modules 中的依赖拆分到 vendor chunk
            if (id.includes('node_modules')) {
                // React 生态单独一个 chunk
                if (id.includes('react') || id.includes('react-dom')) {
                    return 'vendor-react';
                }
                // 其他第三方依赖
                return 'vendor';
            }
        },
        // 控制最小 chunk 大小（字节）
        minChunkSize: 10000,
    },
});

await build.write({});

4.4 与 TypeScript 深度集成

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "bundler",
        "isolatedModules": true,
        "jsx": "react-jsx",
        // 让 Rolldown 处理 TypeScript 转换，不使用 tsc
        "noEmit": true,
        "declaration": true,
        "declarationDir": "./types",
        "sourceMap": true
    },
    "include": ["src"]
}

Rolldown 内置了基于 Oxc 的 TypeScript 转换器，性能远超 ts-loader 或 babel-loader：

// rolldown.config.mjs - TypeScript 配置
import { rolldown } from 'rolldown';

const build = await rolldown({
    input: 'src/index.ts',
    output: {
        dir: 'dist',
        format: 'esm',
    },
    // Rolldown 内置 TS 支持，无需额外插件
    // 但可以自定义 TS 转换行为
    transform: {
        target: 'es2022',        // 目标 JS 版本
        jsx: 'automatic',         // 使用 React 17+ 自动 JSX 转换
        jsxImportSource: 'react', // JSX 导入源
    },
});

await build.write({});

五、性能优化实战

5.1 从 Webpack/Rollup 迁移到 Rolldown

如果你的项目目前使用 Webpack，可以通过 Rspack 作为中间步骤过渡，或者直接迁移到 Vite + Rolldown：

# 方案 A：直接迁移到 Vite + Rolldown
npm create vite@latest -- --template react-ts

# 方案 B：Webpack → Rspack（渐进式）
# rspack.config.js 与 webpack.config.js 高度兼容
# 后续再迁移到 Vite + Rolldown

迁移 Checklist：

• 将所有 CommonJS require() 改为 ESM import
• 将 Webpack 特有的 require.context() 替换为 import.meta.glob()
• 替换 Webpack loader 为 Vite/Rolldown 插件
• 更新环境变量从 process.env 到 import.meta.env
• 验证所有动态 import 是否正确分割

5.2 构建性能调优

// rolldown.config.mjs - 极致性能配置
import { rolldown } from 'rolldown';

const build = await rolldown({
    input: 'src/index.ts',
    output: {
        dir: 'dist',
        format: 'esm',
        // 开启持久化缓存（大幅提升二次构建速度）
        experimentalCache: {
            dir: '.rolldown-cache',
        },
    },
    // 并行解析模块（利用多核 CPU）
    parallel: true,
    // Tree-shaking 优化级别
    treeshake: {
        annotations: true,      // 识别 /*#__PURE__*/ 注释
        moduleSideEffects: false, // 假设模块无副作用，激进去除
        propertyReadSideEffects: false,
    },
});

await build.write({});

5.3 大型项目实战：Monorepo 中的 Rolldown

对于 Monorepo 项目，Rolldown 可以配合 Turborepo/Nx 实现增量构建：

// packages/shared/rolldown.config.mjs
// 共享库打包为 ESM + CJS 双格式
import { rolldown } from 'rolldown';

export default async function build() {
    // ESM 格式
    await rolldown({
        input: 'src/index.ts',
        output: {
            file: 'dist/index.esm.js',
            format: 'esm',
            sourcemap: true,
        },
    }).write({});

    // CJS 格式
    await rolldown({
        input: 'src/index.ts',
        output: {
            file: 'dist/index.cjs.js',
            format: 'cjs',
            sourcemap: true,
        },
    }).write({});
}

六、Rolldown 插件开发指南

6.1 插件钩子体系

Rolldown 实现了 Rollup 的完整插件钩子体系：

// my-rolldown-plugin.ts
import type { Plugin } from 'rolldown';

function myPlugin(): Plugin {
    return {
        name: 'my-plugin',

        // 构建开始
        buildStart(options) {
            console.log('Build started with options:', options);
        },

        // 解析每个模块之前
        resolveId(source, importer) {
            if (source.startsWith('@my-alias/')) {
                return source.replace('@my-alias/', './src/');
            }
            return null; // 让 Rolldown 继续正常解析
        },

        // 加载模块内容
        load(id) {
            if (id.endsWith('.custom')) {
                // 自定义文件格式处理
                return `export default ${JSON.stringify(customParse(id))}`;
            }
            return null;
        },

        // 转换模块代码
        transform(code, id) {
            if (id.endsWith('.vue')) {
                // 简化的 Vue SFC 处理
                return compileVueSFC(code);
            }
            return null;
        },

        // 构建结束
        buildEnd(error) {
            if (error) {
                console.error('Build failed:', error);
            }
        },

        // 生成阶段钩子
        generateBundle(options, bundle) {
            // 修改或添加输出文件
            for (const [fileName, chunk] of Object.entries(bundle)) {
                if (chunk.type === 'chunk') {
                    chunk.code = chunk.code.replace(
                        '__BUILD_TIME__',
                        new Date().toISOString()
                    );
                }
            }
        },
    };
}

6.2 Rollup 插件兼容性

大多数 Rollup 插件可以直接使用：

import { rolldown } from 'rolldown';
import alias from '@rollup/plugin-alias';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import visualizer from 'rollup-plugin-visualizer';

rolldown({
    input: 'src/index.js',
    plugins: [
        alias({
            entries: [
                { find: '@', replacement: resolve(__dirname, 'src') },
            ],
        }),
        json(),
        replace({
            preventAssignment: true,
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),
        // rollup-plugin-visualizer 可用于分析产物大小
        visualizer({
            filename: 'stats.html',
            open: true,
        }),
    ],
});

七、与竞品的深度对比

7.1 Rolldown vs esbuild

7.2 Rolldown vs Turbopack

7.3 Rolldown vs Rspack

结论：如果你在用 Webpack，选 Rspack；如果你在用 Vite 或 Rollup，选 Rolldown。

八、常见问题与排障

8.1 构建速度不如预期

现象：迁移到 Rolldown 后构建速度没有明显提升。

排查步骤：

# 1. 确认 Rolldown 确实在工作（而非 fallback 到 Rollup）
ROLLDOWN_VERBOSE=1 npm run build

# 2. 分析产物，确认没有过大的 chunk
npx rolldown-plugin-visualizer

# 3. 检查是否有 JS 插件成为瓶颈
# 在插件中添加计时

常见原因：

• 使用了大量的 JS 插件（跨语言调用开销）
• SourceMap 生成模式过于详细（考虑使用 hidden 模式）
• 没有启用持久化缓存

8.2 Rollup 插件不兼容

现象：某些 Rollup 插件在 Rolldown 中报错。

解决方案：

// 使用 Rolldown 原生插件替代
// 替代 @rollup/plugin-node-resolve
import { nodeResolve } from 'rolldown-plugin-node-resolve';

// 替代 @rollup/plugin-commonjs
import commonjs from 'rolldown-plugin-commonjs';

8.3 Tree-shaking 不彻底

现象：打包后仍包含未使用的代码。

// 确保 package.json 中正确标记 sideEffects
{
    "sideEffects": false
}

// 在代码中使用 /*#__PURE__*/ 注释辅助标记
const result = /*#__PURE__*/ expensiveFunction();

九、源码导读：想深入贡献怎么入手

如果你想参与 Rolldown 开发，以下是推荐的阅读路径：

1. rolldown_core/src/module_scanner.rs：模块扫描的入口
2. rolldown_core/src/symbol_linker.rs：符号链接和重导出追踪
3. rolldown_core/src/codegen/chunk.rs：Chunk 生成和 Bitset 算法
4. rolldown_core/src/utils/bitset.rs：Bitset 数据结构实现
5. napi/：Node.js N-API 绑定层

# 克隆仓库
git clone https://github.com/rolldown/rolldown.git
cd rolldown

# 构建（需要 Rust 工具链）
cargo build --release

# 运行测试
cargo test

# 运行 benchmark
cargo bench

十、总结与展望

Rolldown 代表了前端打包器发展的一个重要方向：用系统级语言重写前端基础设施。这不仅仅是性能提升，更是一次架构层面的重新思考。

核心价值：

• 100% 兼容 Rollup 生态，迁移成本极低
• 基于 Bitset 的代码分割算法，构建速度提升 5-15 倍
• 统一 Vite 的双引擎架构，消除行为不一致
• Rust 的内存安全保证，大型项目构建更稳定

未来展望：

• WASM 化：Rolldown 可能编译为 WASM，在浏览器中直接运行（类似 StackBlitz 的 WebContainers）
• 增量构建：基于文件系统监听的细粒度增量构建
• 跨平台：通过 WASM 支持更多构建环境（Deno、Bun、Cloudflare Workers）
• 生态融合：与 Oxc、SWC、Biome 等工具形成完整的 Rust 前端工具链

对于每一位前端开发者来说，Rolldown 值得关注——不是因为它是某个框架的附属品，而是因为它正在重新定义 "前端构建" 这件事的边界。当 JavaScript 不再是唯一能写 JavaScript 工具的语言时，整个生态的天花板都被抬高了。

这场 Rust 写的代码革命，才刚刚开始。