Turbopack 体验

内容加载中…

Turbopack 是由 Vercel 公司（也就是维护 next.js 项目背后的公司）出品的打包工具，适用于 JavaScript 和 TypeScript 项目，底层使用 Rust 语言编写。 Turbopack 被 vercel 公司定义为 webpack 的后继，而不是替代品。

Turbopack 的速度

Turbopack 宣称在大型应用上，打包的速度比 Vite 快 10 倍，比 Webpack 快 700 倍。

Turbopack 的机制

而这种速度的实现机制是由 Rust 的高效率和 Turbopack 主打的增量打包引擎共同实现的。 Rust 是系统级的编程语言，以高效著称，对标 c/c++，但是更安全，不容易发生内存泄露。 Turbopack 主打的增量打包引擎，可以把已经打包好的代码进行缓存，后面只打包新加入的代码，这个缓存级别可以达到单个函数级。

与 Vite 的区别

与 Vite 不同的是，Turbopack 的打包过程都在开发时期，而 Vite 利用了浏览器原生的模块化，不会在开发时对依赖进行打包。 Vite 底层使用了 esbuild，Turbopack 底层使用了自己研发 Turbo 引擎，区别是 esbuild 本身不支持缓存和 HMR（热更替）。

创建 Next.js 项目

接下来我们体验一下 turbopack 的打包速度，因为 turbopack 现在还是 alpha 阶段，并没有独立出来，而是集成在 Next.js 项目中了，那我们按照官方的教程，来创建一个 Next.js 项目，看一下 Turbopack 到底有多快。运行 npx create-next-app --example with-turbopack 来创建示例项目：

npx create-next-app --example with-turbopack

它会要求输入项目的名字

体验启动的打包

之后，我们可以使用 yarn dev 来启动项目，可以感受一下它的启动速度：

yarn dev

这个示例项目几乎就是一个成品的 UI 库，可能就是专门为了演示 turbopack 对稍微大型一点的项目的打包速度，几乎可以拿来改改当成自己的 UI 库了，这可能就是公司财力雄厚的缘故。 我们也可以运行 yarn build 感受一下打包 build 的速度：

yarn build

小结

好了，这个就是 turbopack 的体验。如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！