---
title: Turbopack vs. Vite
description: Compare Turbopack vs. Vite
---

import { DocsBenchmarksGraph } from '../../../../components/pages/pack-home/DocsBenchmarksGraph';
import { DocsBenchmarkStat } from '../../../../components/pages/pack-home/DocsBenchmarkStat';
import BenchmarksCallout from './BenchmarksCallout';
import Callout from '../../../../components/Callout'

# Comparing Turbopack and Vite

[Vite](https://vitejs.dev/) 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.

<BenchmarksCallout />

## 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](/pack/docs/why-turbopack#bundling-vs-native-esm) section.

This means that Turbopack's dev server starts up much faster than Vite's. On a 1,000 module application, Vite takes <DocsBenchmarkStat stat="vite-cold-1000" /> to start up. Turbopack starts up in <DocsBenchmarkStat stat="turbopack-cold-1000" /> - **<DocsBenchmarkStat stat="turbopack-cold-vs-vite" /> faster**.

In large applications, this differential stays consistent. In a 30,000 module application, Turbopack starts up <DocsBenchmarkStat stat="turbopack-cold-vs-vite-30000" /> faster than Vite.

Note that Vite is using the official [SWC plugin](https://github.com/vitejs/vite-plugin-react-swc) for these benchmarks, which is not the default configuration.

<DocsBenchmarksGraph category="cold" bars={[
  {
    label: 'Turbopack',
    turbo: true,
    key: 'next13'
  },
  {
    label: 'Vite',
    key: 'vite',
    swc: true
  }
]} />

### 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 **<DocsBenchmarkStat stat="turbopack-update-vs-vite" /> faster** than Vite.

<DocsBenchmarksGraph category="file_change" bars={[
  {
    label: 'Turbopack',
    turbo: true,
    key: 'next13'
  },
  {
    label: 'Vite',
    key: 'vite',
    swc: true
  }
]} />
