Turbopack vs Vite

Vite 是一个性能卓越无需进行代码构建的工具，我们与 Web 开发社区都对它感到无比兴奋。Vite 更进一步展示未来 Web 开发体验的更多可能性。如果我们要开发一个构建工具，肯定要用 Vite 来证明我们所打造的工具性能更为出色。我们很高兴我们确实做到了这点。

若要了解更多关于 Turbopack 的性能对比与测试方法，您可查阅性能测试章节。

速度

Turbopack 在多项关键指标上性能优于 Vite。

Vite 是无需进行代码构建的，它直接将模块发送给浏览器，也就是说浏览器要处理大量模块依赖。

从表面上看，这不像是一场公平的竞争。Turbopack 会构建你的应用代码，意味着在将代码发送至浏览器前需要处理大量任务。

不过 Turbopack 处理模块依赖要比浏览器快多了。通过预构建，我们可以比 Vite 使用的原生 ESM 节省更多时间。你可以访问 Why Turbopack 章节了解更多详情。

这意味着 Turbopack 的开发服务器要快于 Vite。对于有 1,000 个模块的应用，Vite 需要 4.8s 启动，而 Turbopack 仅需 1.1s —— 快出 4.2x。

对于模块较多的应用，这个差异保持不变。在模块数达到 30,000 时，Turbopack 启动速度可达到 4.9x 快于 Vite。

Turbopack

turbo

1.1s

Vite

4.8s

Vite 丝滑的开发体验得益于它的快速刷新能力。当你更新一个文件时，Vite 使用原生 ESM 系统向浏览器发送一个更新的模块，并通过一些方式将其整合到现有的模块依赖图。

而在 Turbopack 上，我们发现我们并不需要一开始就构建所有的代码。我们更新代码的方式和 Vite 相似，但是效率会更高一点：Turbopack 通过 WebSocket 发送更新的模块，并且不需要进行任何构建。

对于有 1,000 个模块应用，Turbopack 的文件更新可达到 5.7x 快于 Vite 。

Turbopack

turbo

15ms

Vite

87ms