Turbopack 简介 #

什么是 Turbopack？ #

Turbopack 是由 Vercel 团队使用 Rust 编写的下一代 JavaScript/TypeScript 打包器，它是 Webpack 的继任者，专为大规模应用设计。Turbopack 通过增量编译和持久缓存实现了前所未有的构建速度，在大型项目中比 Webpack 快 700 倍，比 Vite 快 10 倍。

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                        Turbopack                             │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Rust 编写   │  │ 增量编译    │  │ 持久缓存    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  懒加载编译  │  │ 函数级缓存  │  │  Webpack兼容 │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

Turbopack 的历史 #

发展历程 #

text 
2022年 ─── Turbopack 发布
    │
    │      Vercel 团队开发
    │      Webpack 作者 Tobias Koppers 主导
    │
2022年 ─── Next.js 13 集成
    │
    │      作为 Next.js 开发服务器
    │      首次大规模应用
    │
2023年 ─── 稳定版发布
    │
    │      生产环境可用
    │      更多框架支持
    │
2024年 ─── 生态扩展
    │
    │      独立 CLI 支持
    │      插件系统完善
    │
至今   ─── 持续迭代
    │
    │      性能持续优化
    │      功能持续增强

里程碑版本 #

版本 时间 重要特性
0.1 2022 首次发布，Next.js 集成
0.2 2023 CSS 支持，HMR 优化
0.3 2023 Server Components 支持
1.0 2024 稳定版发布
2.0 2025 独立 CLI，插件系统

为什么选择 Turbopack？ #

传统打包器的痛点 #

在 Turbopack 出现之前，前端打包面临以下问题：

text 
Webpack:
├── 冷启动慢（大型项目 30s+）
├── HMR 延迟高（修改后 3-5s）
├── 配置复杂
└── 内存占用大

Vite:
├── 开发快，生产慢
├── 双引擎问题（esbuild + Rollup）
├── CommonJS 兼容问题
└── 大型项目页面加载慢

Turbopack 的解决方案 #

text 
Turbopack:
├── 冷启动快（毫秒级）
├── HMR 极快（< 10ms）
├── 开发生产一致
├── 原生 TypeScript
└── 内存高效

Turbopack 的核心特点 #

1. 极致的增量编译 #

Turbopack 只编译变化的文件：

text 
┌─────────────────────────────────────────────────────────────┐
│                    增量编译流程                              │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   修改文件 ──► 检测变化 ──► 只编译变化部分 ──► 更新缓存      │
│                                                              │
│   ┌─────────┐   ┌─────────┐   ┌─────────┐   ┌─────────┐   │
│   │ file.ts │   │  diff   │   │ compile │   │  cache  │   │
│   └─────────┘   └─────────┘   └─────────┘   └─────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

2. 持久化缓存 #

编译结果保存到磁盘，重启后无需重新编译：

bash 
.turbo/
├── cache/
│   ├── analysis/
│   ├── emit/
│   └── source-maps/
└── info.json

3. 函数级缓存 #

比文件级缓存更细粒度：

javascript 
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

function formatPrice(price) {
  return `$${price.toFixed(2)}`;
}

export { calculateTotal, formatPrice };

如果只修改 formatPrice，calculateTotal 的编译结果会被复用。

4. 懒加载编译 #

只编译当前页面需要的代码：

text 
┌─────────────────────────────────────────────────────────────┐
│                    懒加载编译                                │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   浏览器请求 ──► 检查缓存 ──► 需要编译？ ──► 返回结果       │
│       │              │            │                         │
│       │              │            ├── 是 ──► 编译 ──► 缓存  │
│       │              │            │                         │
│       │              └── 否 ──────┴──► 直接返回             │
│       │                                                     │
│       └── 只编译请求的模块                                   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

5. Rust 高性能 #

使用 Rust 实现，充分利用多核 CPU：

rust 
pub struct ModuleGraph {
    modules: HashMap<ModuleId, Module>,
    edges: Vec<Edge>,
    cache: PersistentCache,
}

impl ModuleGraph {
    pub fn parse(&mut self, source: &str) -> Result<AST> {
        // 并行解析
        self.modules.par_iter_mut()
            .map(|module| module.parse())
            .collect()
    }
}

Turbopack 与其他打包器对比 #

Turbopack vs Webpack #

特性 Turbopack Webpack
语言 Rust JavaScript
冷启动 < 1s 30s+
HMR < 10ms 3-5s
缓存 持久化 内存
配置 约定优先 灵活配置
生态 发展中 成熟
学习曲线 低 高

Turbopack vs Vite #

特性 Turbopack Vite
开发引擎 统一 esbuild
生产引擎 统一 Rollup
一致性 高 低
大型项目 快 慢
CommonJS 原生支持 需配置
生态 发展中 成熟

Turbopack vs esbuild #

特性 Turbopack esbuild
定位 打包器 打包器/压缩器
缓存 持久化 无
HMR 支持 无
框架集成 Next.js 无
Tree-shaking 支持 基础

Turbopack 的架构设计 #

整体架构 #

text 
┌─────────────────────────────────────────────────────────────┐
│                      Turbopack 架构                          │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    CLI Layer                         │   │
│  │  turbo dev / turbo build / turbo watch              │   │
│  └─────────────────────────────────────────────────────┘   │
│                           │                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                  Core Layer                          │   │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐   │   │
│  │  │ Resolver│ │ Parser  │ │ Bundler │ │ Emitter │   │   │
│  │  └─────────┘ └─────────┘ └─────────┘ └─────────┘   │   │
│  └─────────────────────────────────────────────────────┘   │
│                           │                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                  Cache Layer                         │   │
│  │  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐   │   │
│  │  │ Memory Cache│ │ Disk Cache  │ │ Remote Cache│   │   │
│  │  └─────────────┘ └─────────────┘ └─────────────┘   │   │
│  └─────────────────────────────────────────────────────┘   │
│                           │                                  │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                  Plugin Layer                        │   │
│  │  Webpack Plugin Compatibility Layer                  │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

核心模块 #

rust 
pub struct Turbopack {
    resolver: Resolver,
    parser: Parser,
    transformer: Transformer,
    bundler: Bundler,
    emitter: Emitter,
    cache: CacheManager,
}

impl Turbopack {
    pub async fn build(&mut self, entry: &str) -> Result<Output> {
        let module_graph = self.resolver.resolve(entry)?;
        let parsed = self.parser.parse_all(&module_graph)?;
        let transformed = self.transformer.transform_all(parsed)?;
        let bundled = self.bundler.bundle(transformed)?;
        self.emitter.emit(bundled)
    }
}

Turbopack 的应用场景 #

1. Next.js 开发 #

Turbopack 与 Next.js 深度集成：

javascript 
// next.config.js
module.exports = {
  experimental: {
    turbo: {
      resolveExtensions: ['.tsx', '.ts', '.jsx', '.js'],
    },
  },
}
bash 
# 使用 Turbopack 启动开发服务器
next dev --turbo

2. 大型项目 #

适合拥有数千模块的项目：

text 
large-project/
├── src/
│   ├── pages/          # 100+ 页面
│   ├── components/     # 500+ 组件
│   ├── hooks/          # 100+ hooks
│   ├── utils/          # 200+ 工具函数
│   └── styles/         # 样式文件
├── public/
└── package.json

3. 快速原型开发 #

毫秒级启动，适合快速迭代：

bash 
# 创建新项目
npx create-next-app@latest --turbo

# 启动开发
cd my-app
npm run dev -- --turbo

Turbopack 的性能数据 #

官方基准测试 #

项目规模 Webpack Vite Turbopack
3000 模块冷启动 30s 2.5s 0.8s
3000 模块 HMR 4s 200ms 10ms
30000 模块冷启动 5min 15s 2s
30000 模块 HMR 15s 1s 50ms

实际项目案例 #

text 
Next.js 官网 (3000+ 模块):
├── Webpack 冷启动: 32s
├── Vite 冷启动: 2.8s
└── Turbopack 冷启动: 0.7s

TikTok Web (10000+ 模块):
├── Webpack 冷启动: 90s
├── Vite 冷启动: 8s
└── Turbopack 冷启动: 1.5s

Turbopack 的核心概念 #

模块图（Module Graph） #

text 
┌─────────────────────────────────────────────────────────────┐
│                      Module Graph                            │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   main.js                                                    │
│      │                                                       │
│      ├── app.tsx                                             │
│      │      │                                                │
│      │      ├── header.tsx                                   │
│      │      │      │                                         │
│      │      │      └── logo.png                              │
│      │      │                                                │
│      │      └── footer.tsx                                   │
│      │                                                       │
│      └── styles.css                                          │
│                                                              │
└─────────────────────────────────────────────────────────────┘

任务图（Task Graph） #

text 
┌─────────────────────────────────────────────────────────────┐
│                      Task Graph                              │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│   Parse ──► Transform ──► Bundle ──► Emit                   │
│      │          │           │          │                    │
│      ▼          ▼           ▼          ▼                    │
│   [cached]  [cached]    [running]   [pending]              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

缓存系统 #

rust 
pub enum CacheLevel {
    Memory,     // 内存缓存，最快
    Disk,       // 磁盘缓存，持久化
    Remote,     // 远程缓存，团队共享
}

pub struct CacheEntry {
    key: CacheKey,
    value: Vec<u8>,
    dependencies: Vec<CacheKey>,
    timestamp: u64,
}

Turbopack 的支持范围 #

语言支持 #

语言 支持程度
JavaScript ✅ 完全支持
TypeScript ✅ 原生支持
JSX ✅ 完全支持
TSX ✅ 完全支持
CSS ✅ 完全支持
SCSS ✅ 支持
Less ✅ 支持
JSON ✅ 完全支持
WASM ✅ 支持

框架支持 #

框架 支持程度
Next.js ✅ 官方支持
React ✅ 完全支持
Vue ⚠️ 实验性
Svelte ⚠️ 实验性
Solid ⚠️ 实验性

Turbopack 的局限性 #

当前限制 #

  1. 生态不够成熟：插件系统仍在完善
  2. Webpack 插件兼容：部分插件不支持
  3. 自定义配置：不如 Webpack 灵活
  4. 生产构建：仍在优化中

适用场景建议 #

text 
推荐使用:
├── Next.js 项目
├── 新项目
├── 大型项目
└── 追求极致性能

暂不推荐:
├── 复杂 Webpack 插件依赖
├── 非 Next.js 框架（等待支持）
└── 需要高度自定义配置

学习路径 #

text 
入门阶段
├── 安装与配置
├── 基本使用
├── Next.js 集成
└── 开发服务器

进阶阶段
├── 配置详解
├── 核心特性
├── 缓存机制
└── 性能优化

高级阶段
├── 插件开发
├── 自定义配置
├── 迁移指南
└── 最佳实践

实战阶段
├── 大型项目实战
├── 性能调优
├── 团队协作
└── 生产部署

下一步 #

现在你已经了解了 Turbopack 的基本概念，接下来学习 基础使用 开始实际使用 Turbopack！

最后更新：2026-03-28