Turbopack — Rust-Powered Incremental Bundler for JavaScript and TypeScript

Introduction

Turbopack is a Rust-based incremental bundler built by the creators of Webpack. It ships as the default development bundler in Next.js and aims to provide near-instant hot module replacement regardless of application size. The project leverages Turbo Engine, a computation graph that caches work at the function level.

What Turbopack Does

• Bundles JavaScript, TypeScript, JSX, TSX, CSS, CSS Modules, and static assets for development and production builds
• Provides incremental compilation so only changed modules are rebuilt, keeping HMR fast on large codebases
• Integrates natively with Next.js as the development server bundler
• Supports React Server Components, server actions, and the Next.js App Router out of the box
• Handles module resolution compatible with Node.js, including package.json exports and imports fields

Architecture Overview

Turbopack is built on the Turbo Engine, a Rust-based incremental computation framework. Every transformation (parsing, transpiling, bundling) is modeled as a function in a dependency graph. Results are cached at fine granularity so that when a file changes, only the minimal set of dependent computations re-execute. The engine uses a demand-driven model: it only computes what the browser actually requests.

Self-Hosting & Configuration

• No standalone install needed; Turbopack ships inside Next.js 13+ and is activated with the --turbopack flag
• For standalone use outside Next.js, the CLI is available via npx turbopack
• Configure loader rules, aliases, and resolve options in next.config.js under the turbo key
• Environment variables and .env files are supported the same way as standard Next.js
• Turbopack respects tsconfig.json paths and compilerOptions for TypeScript resolution

Key Features

• Written in Rust for native performance with memory safety guarantees
• Function-level caching via the Turbo Engine means sub-second HMR even on projects with thousands of modules
• Supports source maps, React Fast Refresh, and error overlays during development
• Compatible with most Webpack loaders through a compatibility layer
• Designed to scale: benchmarks show consistent performance as project size grows linearly

Comparison with Similar Tools

• Webpack — the predecessor Turbopack aims to replace; JavaScript-based, slower on large projects but has a vast plugin ecosystem
• Vite — uses esbuild for pre-bundling and native ESM for dev; different architecture but similar speed goals
• esbuild — extremely fast Go-based bundler; lower-level with less framework integration
• Rspack — Rust-based Webpack-compatible bundler by ByteDance; closer to Webpack's plugin API
• Parcel — zero-config bundler with a Rust core; focuses on out-of-the-box simplicity

FAQ

Q: Can I use Turbopack without Next.js? A: Yes, there is a standalone turbopack CLI, though it is less mature than the Next.js integration. Most users currently access Turbopack through Next.js.

Q: Does Turbopack support all Webpack plugins? A: Not yet. Turbopack has a compatibility layer for common loaders, but the full Webpack plugin API is not replicated. Check the Next.js docs for the current compatibility list.

Q: Is Turbopack production-ready? A: Turbopack is stable for development builds in Next.js. Production bundling support has been added in recent Next.js versions, though Webpack remains the default for production in some configurations.

Q: How does Turbopack compare to Vite in speed? A: Both are fast for development. Turbopack's incremental caching architecture is designed to maintain constant-time updates as projects grow, while Vite relies on native ESM and esbuild pre-bundling.

Sources

• https://github.com/vercel/turborepo/tree/main/crates/turbopack
• https://turbo.build/pack/docs