• Pack
  • Docs
  • Comparisons
  • Turbopack vs. Vite

Turbopack vs Vite

Vite is an incredibly fast (non-)bundler that the web development community is extremely excited about - and so are we. Vite has raised the bar for web development and shown us what is possible for the future of the Web. If we were going to build a bundler, it had to perform at least as good as the (already impressive) Vite to validate our efforts. We're proud to say that we achieved that.

Want to know more about Turbopack's benchmarking process and philosophy? Learn more about Turbopack's benchmarking suite.

Speed

Turbopack can outperform Vite on several key metrics.

Dev server startup time

Vite is a non-bundler, which means it doesn't bundle your code at all. It sends each module directly to the browser. This means the browser does the hard work of handling dependencies between modules.

On the surface, this seems like an unfair fight. Turbopack bundles your application, meaning that a lot more work needs doing before sending the code to the browser.

But it turns out that Turbopack can handle this faster than the browser can. By pre-bundling, we can save a lot of time over Vite's Native ESM system. You can learn more about this in our Why Turbopack section.

This means that Turbopack's dev server starts up much faster than Vite's. On a 1,000 module application, Vite takes 4.8s to start up. Turbopack starts up in 1.1s - 4.2x faster.

In large applications, this differential stays consistent. In a 30,000 module application, Turbopack starts up 4.9x faster than Vite.

Turbopack

turbo

Turbopack

1.1s

Vite

4.8s

Code updates

Vite is extremely fast in development because of its speedy Fast Refresh capabilities. When you update a file, Vite uses its Native ESM system to to send the updated module to the browser - and performs a little bit of magic to integrate that into the existing module graph.

In Turbopack, we discovered that for Fast Refresh, we don't really need to do bundling work at all. We can send updates in a similar style to Vite. In fact - a little bit more efficently: Turbopack sends changed modules directly through the WebSocket without doing any bundling at all.

In a 1,000 module application, Turbopack can react to file changes 5.7x faster than Vite.

Turbopack

turbo

Turbopack

15ms

Vite

87ms

Last updated on 2022-10-31T23:08:56.000Z