Turbopack #

什么是 Turbopack？ #

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

核心定位 #

text

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

为什么选择 Turbopack？ #

优势 #

text

✅ 极致性能
   - 比 Webpack 快 700 倍
   - 比 Vite 快 10 倍
   - 毫秒级 HMR

✅ 增量编译
   - 只编译变化的文件
   - 函数级缓存
   - 持久化存储

✅ 懒加载编译
   - 按需编译请求的模块
   - 大幅减少启动时间

✅ Next.js 集成
   - 官方深度集成
   - 开箱即用

快速开始 #

安装 #

bash

# 在 Next.js 项目中使用
npm run dev -- --turbo

基本使用 #

bash

# 开发模式
turbo dev

# 构建生产版本
turbo build

# 监听模式
turbo watch

文档结构 #

text

Turbopack 文档
├── 入门基础
│   ├── Turbopack 简介
│   └── 基础使用
│
├── 核心功能
│   ├── 配置详解
│   └── 核心特性
│
├── 进阶主题
│   ├── 高级主题
│   └── 迁移指南
│
└── 最佳实践
    └── 最佳实践

Turbopack vs 其他打包器 #

特性	Turbopack	Webpack	Vite
语言	Rust	JavaScript	JavaScript
冷启动	< 1s	30s+	2-3s
HMR	< 10ms	3-5s	200ms
缓存	持久化	内存	内存
开发生产一致性	✅ 高	✅ 高	⚠️ 低

学习路径 #

text

入门阶段
├── Turbopack 简介
├── 基础使用
└── Next.js 集成

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

高级阶段
├── 高级主题
├── 迁移指南
└── 最佳实践

下一步 #

现在你已经了解了 Turbopack 的基本概念，接下来学习 Turbopack 简介，深入了解 Turbopack 的详细原理！