turbopack

weekly downloads1K

versionv0.0.1

licenseunknown

categorybuild-tool

Overview

Turbopack is a Rust-based incremental bundler designed specifically for JavaScript and TypeScript applications, developed by Vercel as the successor to webpack. Unlike traditional JavaScript-based bundlers, Turbopack leverages Rust's performance characteristics and an incremental computation model that only reprocesses changed code, caching results at the function level to minimize redundant work.

The bundler is tightly integrated into Next.js 13+ and focuses on optimizing the development experience through features like lazy bundling (only bundling what the dev server requests), fast Hot Module Replacement, and live environment variable reloading. It uses SWC (Speedy Web Compiler) for JavaScript and TypeScript compilation, which provides significant performance improvements over traditional Babel-based toolchains.

As of 2024-2025, Turbopack has matured significantly, passing 100% of the Next.js development test suite and supporting all Next.js example applications. Vercel uses it in production for developing vercel.com, and the top 300 npm packages used in Next.js applications have been verified to work with Turbopack. While it was initially positioned as a webpack replacement with bold performance claims (700x faster), real-world adoption has focused primarily on Next.js projects where it's built-in and officially supported.

Currently, Turbopack is not a standalone bundler you'd use outside of Next.js like webpack or Rollup. It's designed as a Next.js-specific tool, and the npm package exists primarily as a dependency of the Next.js framework rather than a general-purpose bundler developers install directly.

Quick Start

typescript

// next.config.js - Enable Turbopack in Next.js 13+
module.exports = {
  experimental: {
    turbo: {
      // Configure loader options
      loaders: {
        '.svg': ['@svgr/webpack'],
      },
      // Resolve aliases
      resolveAlias: {
        '@components': './components',
        '@utils': './lib/utils',
      },
      // Resolve extensions
      resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
    },
  },
};

// package.json - Run Next.js dev server with Turbopack
// {
//   "scripts": {
//     "dev": "next dev --turbo",
//     "build": "next build",
//     "start": "next start"
//   }
// }

// pages/index.tsx - Standard Next.js page, no Turbopack-specific code needed
import { useState } from 'react';
import styles from '../styles/Home.module.css';

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div className={styles.container}>
      <h1>Turbopack HMR Demo</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      {/* Changes to this file will hot reload instantly */}
    </div>
  );
}

Use Cases

Large-scale Next.js applications: Projects with hundreds or thousands of modules where webpack's HMR becomes slow. Turbopack's incremental computation shines in codebases where most changes only affect a small portion of the dependency graph.

Monorepo Next.js development: Teams working in monorepos with shared packages benefit from Turbopack's unified graph approach, which handles both client and server bundles without managing separate compiler instances.

Next.js projects with frequent environment variable changes: Applications that require different environment configurations during development (microservices, multi-tenant apps) benefit from live environment variable reloading without restarting the dev server.

TypeScript-heavy Next.js applications: Projects with extensive TypeScript codebases leverage SWC's performance for compilation, reducing the time spent on type stripping and transformation during development.

Teams migrating from webpack to faster tooling: Next.js projects experiencing slow webpack builds can enable Turbopack to improve iteration speed, particularly for initial dev server startup and hot reload times.

Pros & Cons

Pros

+Significantly faster HMR and initial compilation in large Next.js projects due to Rust implementation and incremental computation
+Lazy bundling reduces memory usage and startup time by only processing requested modules
+Native integration with Next.js provides seamless setup without configuration
+Live environment variable reloading eliminates manual dev server restarts
+Passes 100% of Next.js development test suite, indicating production readiness for Next.js use cases

Cons

−Currently only usable within Next.js, not a general-purpose bundler for non-Next.js projects
−Limited ecosystem of plugins and customization compared to mature webpack ecosystem
−Performance claims have been disputed by other tool maintainers and depend heavily on project characteristics
−Still relatively new with potential for breaking changes and undiscovered edge cases
−No production bundling support yet (Next.js still uses webpack for production builds in many cases)

Alternatives

esbuildv0.27.3

An extremely fast JavaScript and CSS bundler and minifier.

build-tool

105.3M / week

parcelv2.16.4

Blazing fast, zero configuration web application bundler

build-tool

259K / week

rollupv4.57.1

Next-generation ES module bundler

build-toolmodulesbundler

67.9M / week

vitev7.3.1

Native-ESM powered web dev build tool

build-toolfrontendframework

53.5M / week

webpackv5.105.2

Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.

build-tool

37.6M / week

Install

bash

npm install turbopack

bash

pnpm add turbopack

bash

bun add turbopack

Overview

Quick Start

typescript

// next.config.js - Enable Turbopack in Next.js 13+
module.exports = {
  experimental: {
    turbo: {
      // Configure loader options
      loaders: {
        '.svg': ['@svgr/webpack'],
      },
      // Resolve aliases
      resolveAlias: {
        '@components': './components',
        '@utils': './lib/utils',
      },
      // Resolve extensions
      resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
    },
  },
};

// package.json - Run Next.js dev server with Turbopack
// {
//   "scripts": {
//     "dev": "next dev --turbo",
//     "build": "next build",
//     "start": "next start"
//   }
// }

// pages/index.tsx - Standard Next.js page, no Turbopack-specific code needed
import { useState } from 'react';
import styles from '../styles/Home.module.css';

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div className={styles.container}>
      <h1>Turbopack HMR Demo</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      {/* Changes to this file will hot reload instantly */}
    </div>
  );
}

Use Cases

Pros & Cons

Pros

+Significantly faster HMR and initial compilation in large Next.js projects due to Rust implementation and incremental computation
+Lazy bundling reduces memory usage and startup time by only processing requested modules
+Native integration with Next.js provides seamless setup without configuration
+Live environment variable reloading eliminates manual dev server restarts
+Passes 100% of Next.js development test suite, indicating production readiness for Next.js use cases

Cons

−Currently only usable within Next.js, not a general-purpose bundler for non-Next.js projects
−Limited ecosystem of plugins and customization compared to mature webpack ecosystem
−Performance claims have been disputed by other tool maintainers and depend heavily on project characteristics
−Still relatively new with potential for breaking changes and undiscovered edge cases
−No production bundling support yet (Next.js still uses webpack for production builds in many cases)