比 Vite 快 10 倍的构建工具:Turbopack!

简介: Vercel 的使命是提供代码创造者在灵感迸发瞬间所需的速度和可靠性。去年,我们专注于提升 Next.js 打包 App 的速度。

Vercel 的使命是提供代码创造者在灵感迸发瞬间所需的速度和可靠性。去年,我们专注于提升 Next.js 打包 App 的速度。

每次我们从基于 JavaScript 的工具转移到基于 Rust 的工具时,我们都能看到巨大的改进。我们迁移了 Babel,提升了 17 倍的速度。我们替换了 Terser,压缩的速度提高了 6 倍,从而减少了加载时间和带宽的使用。

还有一个障碍:Webpack。Webpack 已被下载超过 30 亿次。它已经成为构建 Web 的不可分割的一部分,但现在是时候加速,无限制扩展了!

今天,我们推出Turbopack[1]:Webpack 的接班人。

由 Webpack 的创始人 Tobias Koppers 牵头创立,Turbopack 将会是 Web 下一代的打包工具。我们将使用高性能的工具来构建它,在未来对所有的框架开放。

在 Next 中尝试 Turbopack 的 Alpha 版本:next dev --turbo


Turbopack 有多快


Turbopack 建立在新的增量体系结构上,以获得最快的开发体验。在大型应用中,它展示出了10 倍于 Vite 的速度,700 倍于 Webpack 的速度。在更大的应用中,差异更加巨大 —— 通常比 Vite 快 20 倍

Turbopack 在开发环境只打包需要的最小资产,所以启动飞快。在一个 3000 个模块的应用里,Turbopack 只花了 1.8 秒启动,Vite 花了 11.4 秒。

文档[2]里查看关于 Turbopack 打包和查看 benchmarks 的信息。


为什么 Turbopack 这么快?


Turbopack 的架构吸取了 Turborepo 和 Google 的 Bazel 等工具的经验教训,两个工具都专注于使用缓存,永远不会重复相同的工作。

Turbopack 是建立在 Turbo 之上的,Turbo 是基于 Rust 的开源、增量记忆化框架。Turbo 可以缓存程序中任何函数的结果。当程序再次运行时,函数将不会重新运行,除非它的参数改变了。这种粒度的架构使您的程序能够在函数级别跳过大量工作。

增量响应式系统,又有 Rust 的速度加持?Turbopack 是不可阻挡的!

Turbo 的讲解[3]里学习更多。


Turbo 的未来


首先,Turbopack 将用于 Next.js 的开发服务器。它将为闪电般快速的 HMR 提供动力,并天然支持 React Server Component,Typescript,JSX,CSS 等也一样。

Turbopack 最终也会赋能 Next.js 的生产环境构建,无论是本地还是云端。我们会在你的整个团队里共享 Turbo 的缓存,用Vercel Remote Caching[4]

Webpack 用户还可以期望未来可以增量迁移到 Rust-based 的 Turbopack 特性。

我们对 Turbo 生态系统的未来感到更加兴奋,我们推动它来帮助你更快速的迭代,在灵感到来时更好的创造。


参考资料

[1]

Turbopack: https://turbo.build/

[2]

文档: https://turbo.build/pack/docs/core-concepts

[3]

Turbo 的讲解: https://turbo.build/pack/docs/core-concepts

[4]

Vercel Remote Caching: https://vercel.com/docs/concepts/monorepos/remote-caching

相关文章
|
7月前
|
缓存 Rust
第9期 新一代快速打包工具 Turbopack
第9期 新一代快速打包工具 Turbopack
258 0
|
1月前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
在现代前端开发中,工程化是提高开发效率和项目质量的关键。UniApp 结合 Webpack 和 Vite,提供强大的工程化支持。Webpack 功能强大,支持复杂项目的构建;Vite 则利用现代浏览器的 ESM 特性,提供快速的开发体验。开发者可根据项目需求选择合适的工具,显著提升开发效率和项目质量。
|
2月前
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
28 3
|
4月前
|
JSON 前端开发 算法
vite打包优化vite-plugin-compression的使用
【8月更文挑战第4天】vite打包优化vite-plugin-compression的使用
548 4
|
7月前
|
前端开发 JavaScript 开发者
如何在Vite和Webpack之间选择合适的构建工具?
【4月更文挑战第14天】选择Vite或Webpack取决于项目需求、团队熟悉度和场景。Vite适合快速开发,小到中型项目,Vue.js技术栈,有较简单的配置和快速冷启动。而Webpack在大型项目中占优,提供深度优化,丰富的插件生态系统,适合复杂构建需求和React项目。考虑因素还包括学习曲线和社区支持,最佳工具应满足项目当前及未来需求。
83 2
|
7月前
|
Rust 前端开发 JavaScript
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
341 0
|
7月前
|
前端开发 JavaScript 开发者
前端工程化实践:Webpack、Rollup等构建工具比较
在现代 Web 开发中,前端工程化已经成为了不可或缺的一部分。而构建工具作为前端工程化的重要组成部分,可以帮助开发者更高效地完成项目构建和管理。本文将比较两种主流的构建工具 Webpack 和 Rollup,并探讨它们的优缺点以及适用场景。
|
7月前
|
前端开发 测试技术
前端工程化实践与构建工具比较:Webpack、Rollup等
在当今互联网时代,前端开发已经成为了最热门和最重要的职业之一。而随着前端技术的不断发展,前端工程化已经成为了必不可少的一部分。本篇文章将会介绍前端工程化的实践,并比较常用的构建工具Webpack和Rollup的优缺点,帮助读者更好地掌握前端工程化和构建工具的使用。
|
7月前
|
JSON 资源调度 JavaScript
|
缓存 JavaScript 前端开发
vite相较于webpack的优势
vite相较于webpack的优势
253 1