Comparing Turbopack and Webpack

Webpack has been downloaded over 3 billion times, making it today's most common JavaScript bundler. However, we found that we'd hit the limits of what it could do with its JavaScript-based architecture.

We've built Turbopack as the successor of Webpack: much faster, but just as flexible and extensible.

Speed

Turbopack's incremental architecture outstrips Webpack's speed on several key metrics.

Dev server startup time

The main problem we found with Webpack was development server startup time. If you end up importing a lot of modules in a certain page and open that page in your browser, the initial compile will take a few seconds. If you change routes in your development environment, you have to wait for a similar compile again for your new page.

We designed Turbopack to be as lazy as possible, only doing work when it's requested. In a dev server, this means on incoming requests we do exactly the work the user asked for. No more unnecessary bundling of on demand loaded code before the user needs it. You can learn more in our core concepts docs.

This means that Turbopack's dev server starts up much faster than Webpack. Next.js 12, which uses Webpack under the hood, can start up a build server on a 1,000 module application in 3.6s. Turbopack starts up in 1.4s - 2.6x faster.

Turbopack

turbo

1.4s

Webpack

3.6s

React Components

1,000

Code updates

As we continued to optimize Webpack, we found a performance ceiling on how much faster we could make Fast Refresh. With around 2,000 components, the best number we could produce was 500ms. This mark was a tremendous feat in Next.js 12. Previously, that process would have taken around 10 seconds.

With Turbopack, we achieved the goal we were aiming for: Fast Refresh performance that stays near-constant, no matter your application size. Instead of scaling with your application size, it scales based on the size of the changes made.

In a 1,000 module application, Turbopack can react to file changes 7.7x faster than Webpack. In a 30,000 module application, this is 285.0x faster.

Turbopack

turbo

19ms

Webpack

146ms

React Components

1,000

Extensibility

Webpack has an extraordinary collection of plugins (opens in a new tab) to customize its behavior. Composing plugins lets you create custom toolchains which can support a huge variety of bundler features.

In its alpha state, Turbopack cannot currently be configured with plugins. In the future, we plan to make Turbopack just as extensible as Webpack - though likely with an altered API.