比 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

相关文章
|
5天前
|
缓存 Rust
第9期 新一代快速打包工具 Turbopack
第9期 新一代快速打包工具 Turbopack
97 0
|
5天前
|
缓存 Rust 前端开发
比Webpack快700倍的Turbopack,到底快在哪?
比Webpack快700倍的Turbopack,到底快在哪?
|
5天前
|
前端开发 JavaScript 开发者
如何在Vite和Webpack之间选择合适的构建工具?
【4月更文挑战第14天】选择Vite或Webpack取决于项目需求、团队熟悉度和场景。Vite适合快速开发,小到中型项目,Vue.js技术栈,有较简单的配置和快速冷启动。而Webpack在大型项目中占优,提供深度优化,丰富的插件生态系统,适合复杂构建需求和React项目。考虑因素还包括学习曲线和社区支持,最佳工具应满足项目当前及未来需求。
14 2
|
5天前
|
JavaScript 前端开发 API
轻松掌握构建工具:Webpack、Gulp、Grunt 和 Rollup 的使用技巧(下)
轻松掌握构建工具:Webpack、Gulp、Grunt 和 Rollup 的使用技巧(下)
轻松掌握构建工具:Webpack、Gulp、Grunt 和 Rollup 的使用技巧(下)
|
5天前
|
JSON JavaScript 前端开发
轻松掌握构建工具:Webpack、Gulp、Grunt 和 Rollup 的使用技巧(上)
轻松掌握构建工具:Webpack、Gulp、Grunt 和 Rollup 的使用技巧(上)
轻松掌握构建工具:Webpack、Gulp、Grunt 和 Rollup 的使用技巧(上)
|
5天前
|
Rust 前端开发 JavaScript
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
|
5天前
|
JSON 资源调度 JavaScript
|
11月前
|
缓存 JavaScript 前端开发
vite相较于webpack的优势
vite相较于webpack的优势
197 1
|
11月前
|
存储 缓存 资源调度
2022 前端包管理方案-pnpm 和 corepack
2022 前端包管理方案-pnpm 和 corepack
243 0
|
11月前
|
前端开发 JavaScript 开发者
前端工程化打包工具之Snowpack
Snowpack是一个非常流行的前端工程化打包工具,它可以帮助开发者快速构建具有可重用性和可维护性的前端项目,并且提供了完善的依赖管理和打包机制。
184 1