大家好，我是 Echa。

10 月 25 日，Next.js 13 正式发布。同时，Vercel 还推出并开源了下一代包装工具：Turbopack。Turbopack 是针对 JavaScript 和 TypeScript 优化的增量包装工具由 Webpack 的创建者 Tobias Koppers 和 Next.js 团队使用 Rust 编写。Turbopack 引起了许多开发者的注意，让我们来看看 Turbopack 优点是什么！

Turbopack 以新的增量架构为基础，提供最快的开发体验。在大型应用中，其更新速度比 Vite 快 10 倍，比Webpack 快 700 倍。在更大的应用中，通常比 Vite 快 20 倍。

由于 Turbopack 只包装开发所需的最少资源，所以启动时间很快。在具有 3000 在应用模块时，Turbopack 需要 1.8 秒可以启动，而 Vite 则需要 11.4 秒：

Turbopack 性能有两个秘密：高度优化的机器代码和低级增量计算引擎，可以缓存到单个函数的水平。它路由知识的架构被吸收了 Turborepo 和 Google 的 Bazel 他们都专注于使用缓存来避免重复执行相同的工作。

Turbopack 之所以这么快，是因为它是建立在可重用的基础上的 Rust 该库支持增量计算，称为 Turbo 引擎。以下是其工作原理。

在 Turbopack 在驱动程序中，可以函数可以标记为to be remembered”。当这些函数被调用时，Turbo 引擎会记住它们被调用和返回的内容。然后将其保存在内存缓存中。以下是一个简化的例子：

我们首先在 api.路由网ts 和 sdk.ts 调用这两个文件 readFile。然后打包这些文件，拼接在一起，最后得到 fullBundle。所有这些函数调用的结果都保存在缓存中备用。

由于 sdk.ts 如果结果发生变化，需要重新包装，然后重新拼接。重要的是，api.ts 没有改变。从缓存中读取它的结果并传递给它 concat。因此，通过不读取和重新打包来节省时间。

Turbo 发动机目前在内存中缓存。这意味着缓存将与运行过程一样长，这对 Dev server 效果很好。未来，该计划将缓存持久化——要么保存在文件系统中，要么保存在图像中 Turborepo 在这种远程缓存中。这意味着 Turbopack 记住机器完成的跨操作和工作。

这种方法使 Turbopack 在计算应用增量更新非常快，优化了 Turbopack 处理开发中的更新意味着 Dev server 将始终快速响应变化。

Turbo 有助于发动机 Dev server 它提供了快速更新，但还有另一个重要指标需要考虑——启动时间。Dev server 开始工作越快，开始工作越快。有两种方法可以使过程更快：工作更快或工作更少。为了启动 Dev server，减少工作量的方法是只编译启动所需的代码。

2-3 年前的 Next.js 版本在显示 Dev server 整个应用程序将以前编译过。从 Next.js 11 页面上的代码一开始只编译请求。这样会更好，但美。当导航到 /users 包装所有客户端和服务端模块、动态导入模块和引用模块 CSS 和图片。这意味着，如果页面的大部分隐藏在视图之外或选项卡后面，它仍然会被编译。

Turbopack 足够智能，只能编译要求的代码。这意味着如果浏览器要求， HTML，就只会编译 HTML，而不会编译 HTML 任何引用的内容。若需要浏览器 CSS，将只编译 CSS，不编译引用的图片，Turbopack 甚至知道不编译 source map，除非 Chrome DevTools 是打开的。通过要求级编译，要求数量减少，性能提高显著。

Turbopack是 基于 Rust 开发，每当 Next.js 团队将基于 JavaScript 工具转移到基础 Rust 当你使用工具时，你会看到巨大的改进。Next.js 替换了 JavaScript 编译器 Babel，提高编译速度 17 倍，替换了 Terser，提高压缩速度 6 同时减少了加载时间和宽带使用。

创建 Turbopack 只是为了提高 Next.js 希望它能取代速度 Webpack，成为下一代 Web 打包工具。那为什么不选择新一代的包装工具呢？ esbuild 和 swc，选择创建自己的包装工具？

通常有两种方法可以加快过程：减少工作量或并行工作。要打造最快的包装工具，就要用力拉动这两个杠杆。因此，决定为分布式和增量行为创增量行为 Turbo 构建引擎。Turbo 引擎像函数调用的调度程序一样工作，允许函数在所有可用内核上并行调用。Turbo 引擎还会缓存其调度函数的所有结果，这意味着它永远不需要执行两次相同的工作。简而言之，以最大的速度做最少的工作。

其他工具对少做工作采取不同的方式。比如，Vite 在开发模式下使用使用 ESM 尽量减少工作量。在底层，Vite 将 esbuild 用于许多任务。esbuild 这是一个非常快的包装器，它不会强迫我们使用原始的 ESM。但由于几个原因，决定不采用 esbuild：

增量计算 Rust 驱动的包装器可以比较大 esbuild 更好地执行。

Next.js 早期版本试图在开发模式下包装整个版本 Web 应用，这不是最好的。Next.js 现代版只包装 Dev server 请求页面。例如，如果转到localhost:3000，000， pages/index.jsx，以及它导入的模块。

这种更惰性的方法是快速的 Dev server 的关键。而 esbuild 没有惰性包装的概念——它是全有或全无的。Turbopack 应用程序导入和导出的最小图将根据收到的要求构建，并且只包装必要的最小代码。

此策略使 Turbopack 在首次启动 Dev server 速度极快。计算渲染页面所需的代码，然后将其发送到浏览器。在大规模应用中，这最终比原生更好 ESM 快得多。

这就是构建 Turbopack 的原因。

构建 Web 应用实践非常多样化。仅在 CSS 中，就有 SCSS、Less、CSS Module、PostCSS等。React、Vue 和 Svelte 框架需要自定义设置。

在构建包装工具时，我们希望它能在没有配置的情况下打开盒子并获得一些功能。目前，Turbopack 仍处于 alpha 在当前状态下，Turbopack 它不能配置，所以插件不能使用。

下面来看看 Turbopack 默认配置中的功能是开箱即用的，未来将通过插件配置：

Turbopack 优于以下两个关键指标 Vite。

Turbopack 的 Dev server 启动速度比 Vite 快得多。

Turbopack 增量架构超过了以下两个关键指标 Webpack 的速度。

Turbopack 的未来

到目前为止，Turbopack 可以在 Next.js v13 中使用。独立将在未来发布 CLI、插件 API，并支持其他框架，如 Svelte 和 Vue。

Turbopack 将用于 Next.js 13 Dev server。它会像闪电一样快 HMR 为原生提供动力和支持 React 以及服务端组件 TypeScript、JSX、CSS 等。Webpack 用户也可以期待使用 Turbopack 进入基于 Rust 未来增量迁移路径。期待在 Webpack 的创建者 Tobias Koppers 的带领下，Turbopack 成为 Web 下一代包装工具。