Using Turbopack with Next.js 13: Taking a Look at Webpack’s Successor

Turbopack has positioned itself as the successor to Webpack and promises incredible speed improvements to the bundling and optimization process in Javascript/Typescript applications. Written in Rust, Turbopack represents the natural evolution of the once-revolutionary Webpack. As developers seek faster, more efficient ways to bundle JavaScript and TypeScript, Turbopack emerges as a powerful, incremental bundler ready to take the stage.

In this article, we’ll explore the seamless integration of Turbopack with Next.js 13, the latest iteration of the popular React framework.

What is Turbopack?

Turbopack is an incremental bundling tool optimized for Javascript and Typescript. What sets Turbopack apart is its core implementation in the Rust programming language, known for its performance and memory safety. This ensures that Turbopack can handle bundling tasks with remarkable efficiency and reliability.

As of the time this article is written, Turbopack is currently in beta and not ready for production use.

Turbopack Features

Turbopack boasts a rich set of features that make it a compelling choice for developers looking to optimize their JavaScript/TypeScript bundling process. Here’s an overview of Turbopack’s key features:

1. Incremental Bundling: Turbopack is designed with incremental bundling at its core. This approach drastically reduces build times, making it ideal for large projects.
2. Out-of-the-Box Compatibility: Turbopack offers comprehensive support for a wide range of web technologies, including TypeScript, JSX, CSS, CSS Modules, and WebAssembly. Developers can start using these technologies without the need for complex configurations.
3. Lightning-Fast HMR (Hot Module Replacement): Turbopack ensures that Hot Module Replacement remains speedy, even as your app’s size grows. This feature is crucial for maintaining a smooth development experience by instantly updating modules without a full page reload.
4. Native Support for React Server Components: For projects using React Server Components, Turbopack provides native support. This ensures seamless integration and efficient bundling for React-based applications.
5. Simultaneous Multiple Environment Targets: Turbopack allows developers to build and optimize for multiple environments concurrently, such as the Browser, Server, Edge, Server-Side Rendering (SSR), and React Server Components. This versatility simplifies the development of complex web applications.
6. Next.js Support: Next.js 13 comes with built-in support for Turbopack.

Turbopack’s Architecture

Here is an overview of the fundamental principles and architectural concepts that power Turbopack’s impressive speed improvements. Here’s a summary of the contents:

1. The Turbo Engine: Turbopack’s speed is attributed to the Turbo engine, which enables incremental computation.
2. Function-Level Caching: In a Turbo engine-powered program, specific functions can be marked as ‘to be remembered.’ When these functions are called, the Turbo engine remembers their input and output, saving them in an in-memory cache.
3. The Cache: The Turbo engine stores its cache in memory, making it ideal for development servers. However, there are plans to persist this cache, allowing it to remember work done across runs and machines.
4. Compiling by Request: Turbopack enhances startup time by compiling only the necessary code to get started. It distinguishes between page-level compilation and request-level compilation, ensuring that only the required code is compiled, reducing unnecessary work and improving performance.

Turbopack vs. Webpack

Turbopack boasts significantly faster performance while maintaining flexibility and extensibility. Turbopack’s standout feature is its incremental architecture, which outperforms Webpack on various key metrics. For exact numbers, visit the Turbopack documentation.

Turbopack’s dev server starts up much faster, making it an ideal choice for rapid development. Additionally, Turbopack excels in handling code updates, with Fast Refresh performance that remains consistently fast regardless of application size. Overall, Turbopack presents a compelling alternative to Webpack, especially for developers seeking improved speed and performance in their development workflow.

Using Turbopack with Next.js 13

Turbopack was written by the creators of Webpack and Next.js so it is no surprise that Next.js 13 has built-in support. However, Turbopack is not enabled by default. To enable Turbopack, simply add '--turbo' to the script that runs the development server:

// package.json
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

That’s all it takes to leverage Turbopack’s incredibly fast updates and quick startup time on your dev server!

FAQs