比Webpack快700倍的Turbopack，到底快在哪？

作者：CUGGZ 2022-10-27 08:31:31

Turbopack 建立在新的增量架構(gòu)上，以提供最快的開發(fā)體驗(yàn)。在大型應(yīng)用上，它的更新速度比 Vite 快 10 倍，比Webpack 快 700 倍。在更大的應(yīng)用上，通常會(huì)比 Vite 快 20 倍。

大家好，我是 CUGGZ。

10 月 25 日，Next.js 13 正式發(fā)布。同時(shí)，Vercel 還推出并開源了下一代打包工具：Turbopack。Turbopack 是針對 JavaScript 和 TypeScript 優(yōu)化的增量打包工具，由 Webpack 的創(chuàng)建者 Tobias Koppers 和 Next.js 團(tuán)隊(duì)使用 Rust 編寫。Turbopack 的推出吸引了眾多開發(fā)者的關(guān)注，下面就來看看 Turbopack 都有哪些優(yōu)勢！

Turbopack 的速度有多快？

由于 Turbopack 只打包開發(fā)所需的最少資源，因此啟動(dòng)時(shí)間非常快。在具有 3000 個(gè)模塊的應(yīng)用上，Turbopack 需要 1.8 秒即可啟動(dòng)，而 Vite 則需要 11.4 秒：

Turbopack 為什么這么快？

Turbopack 性能的秘訣有兩個(gè)：高度優(yōu)化的機(jī)器代碼和低層級(jí)增量計(jì)算引擎，可以緩存到單個(gè)函數(shù)的級(jí)別。它的架構(gòu)吸取了 Turborepo 和 Google 的 Bazel 等工具的經(jīng)驗(yàn)教訓(xùn)，它們都專注于使用緩存來避免重復(fù)執(zhí)行相同的工作。

Turbo 引擎工作原理

Turbopack 之所以如此之快，是因?yàn)樗⒃谝粋€(gè)可重用的 Rust 庫之上，該庫支持增量計(jì)算，稱為 Turbo 引擎。以下是它的工作原理。

在 Turbopack 驅(qū)動(dòng)的程序中，可以將某些函數(shù)標(biāo)記為“to be remembered”。當(dāng)這些函數(shù)被調(diào)用時(shí)，Turbo 引擎會(huì)記住它們被調(diào)用的內(nèi)容，以及它們返回的內(nèi)容。然后它將其保存在內(nèi)存緩存中。下面是一個(gè)簡化的示例：

我們首先在 api.ts? 和 sdk.ts? 這兩個(gè)文件中調(diào)用 readFile。然后打包這些文件，將它們拼接在一起，最后得到 fullBundle。所有這些函數(shù)調(diào)用的結(jié)果都保存在緩存中以備后用。

由于 sdk.ts? 的結(jié)果發(fā)生了變化，就需要再次打包，然后需要再次拼接。重要的是，api.ts? 并沒有改變。只需從緩存中讀取它的結(jié)果并將其傳遞給 concat。因此，這樣就通過不讀取并重新打包來節(jié)省了時(shí)間。

Turbo 引擎當(dāng)前將其緩存存儲(chǔ)在內(nèi)存中。這意味著緩存將與運(yùn)行它的進(jìn)程一樣長，這對于 Dev server 來說效果很好。將來，計(jì)劃將這個(gè)緩存持久化——要么保存到文件系統(tǒng)中，要么保存到像 Turborepo 這樣的遠(yuǎn)程緩存中。這意味著 Turbopack 可以記住跨運(yùn)行和機(jī)器完成的工作。

這種方法使 Turbopack 在計(jì)算應(yīng)用的增量更新方面非常快速，優(yōu)化了 Turbopack 以處理開發(fā)中的更新，這意味著 Dev server 將始終快速響應(yīng)更改。

按要求編譯

Turbo 引擎有助于在 Dev server 上提供極快的更新，但還有另一個(gè)重要指標(biāo)需要考慮——啟動(dòng)時(shí)間。Dev server 開始運(yùn)行的速度越快，開始工作的速度就越快。有兩種方法可以使流程更快：工作更快或做工作更少。為了啟動(dòng) Dev server，減少工作量的方法就是只編譯啟動(dòng)所需的代碼。

（1）頁面級(jí)編譯

2-3 年前的 Next.js 版本在顯示 Dev server 之前會(huì)編譯整個(gè)應(yīng)用。從 Next.js 11 開始就只編譯請求的頁面上的代碼。這樣會(huì)更好，但并不完美。當(dāng)導(dǎo)航到 /users 時(shí)，將打包所有客戶端和服務(wù)端模塊、動(dòng)態(tài)導(dǎo)入的模塊以及引用的 CSS 和圖片。這意味著如果頁面的很大一部分隱藏在視圖之外，或者隱藏在選項(xiàng)卡后面，仍然會(huì)編譯它。

（2）請求級(jí)編譯

Turbopack 足夠智能，可以只編譯請求的代碼。這意味著如果瀏覽器請求 HTML，就只會(huì)編譯 HTML，而不會(huì)編譯 HTML 引用的任何內(nèi)容。如果瀏覽器需要 CSS，將只編譯 CSS，而不編譯其引用的圖片，Turbopack 甚至知道不編譯 source map，除非 Chrome DevTools 是打開的。通過請求級(jí)編譯，減少了請求的數(shù)量，性能改進(jìn)顯著。

為什么基于 Rust 開發(fā)？

Turbopack是基于 Rust 開發(fā)的，每當(dāng) Next.js 團(tuán)隊(duì)將基于 JavaScript 的工具轉(zhuǎn)移到基于 Rust 的工具時(shí)，都會(huì)看到巨大的改進(jìn)。Next.js 替換了 JavaScript 編譯器 Babel，使編譯速度提高達(dá) 17 倍，替換了 Terser，使壓縮速度提高了 6 倍，同時(shí)還減少了加載時(shí)間和寬帶使用。

為什么選擇 Turbopack？

創(chuàng)建 Turbopack 就是為了提高 Next.js 的速度，希望它能夠取代 Webpack，成為下一代 Web 打包工具。那為什么不選擇新一代打包工具 esbuild 和 swc，而是選擇創(chuàng)建自己的打包工具呢？

增量計(jì)算

通常，有兩種方法可以加快進(jìn)程：減少工作量或并行工作。想要打造最快的打包工具，就要用力拉動(dòng)這兩個(gè)杠桿。因此決定為分布式和增量行為創(chuàng)建一個(gè)可重用的 Turbo 構(gòu)建引擎。Turbo 引擎就像函數(shù)調(diào)用的調(diào)度程序一樣工作，允許在所有可用內(nèi)核上并行調(diào)用函數(shù)。Turbo 引擎還會(huì)緩存它調(diào)度的所有函數(shù)的結(jié)果，這意味著它永遠(yuǎn)不需要執(zhí)行兩次相同的工作。簡而言之，它會(huì)以最大速度做最少的工作。

其他工具對“做更少的工作”采取不同的方式。比如，Vite 通過在開發(fā)模式下使用原生 ESM 將工作量降至最低。在底層，Vite 將 esbuild 用于許多任務(wù)。esbuild 是一個(gè)非常快的打包器，它不會(huì)強(qiáng)迫我們使用原生 ESM。但出于幾個(gè)原因，決定不采用 esbuild：

esbuild 的代碼針對一項(xiàng)任務(wù)進(jìn)行了超優(yōu)化 - 快速打包，因此沒有 HMR（熱更新）；

esbuild 是一個(gè)非常快的打包工具，但它并沒有做太多的緩存。這意味著會(huì)做很多重復(fù)的工作；

而具有增量計(jì)算的 Rust 驅(qū)動(dòng)的打包器在更大的規(guī)模上可以比 esbuild 更好地執(zhí)行。

惰性打包

Next.js 的早期版本試圖在開發(fā)模式下打包整個(gè) Web 應(yīng)用，這并不是最優(yōu)的。Next.js 的現(xiàn)代版本僅打包 Dev server 請求的頁面。例如，如果轉(zhuǎn)到localhost:3000?，它將僅打包 pages/index.jsx，以及它導(dǎo)入的模塊。

這種更“惰性”的方法是快速 Dev server 的關(guān)鍵。而 esbuild 沒有“惰性”打包的概念——它是全有或全無的。Turbopack 的開發(fā)模式會(huì)根據(jù)收到的請求構(gòu)建應(yīng)用導(dǎo)入和導(dǎo)出的最小圖，并且只打包必要的最少代碼。

此策略使 Turbopack 在首次啟動(dòng) Dev server 時(shí)速度極快。只需計(jì)算渲染頁面所需的代碼，然后在單個(gè)塊中將其發(fā)送到瀏覽器。在大規(guī)模應(yīng)用中，這最終比原生 ESM 快得多。

這就是構(gòu)建 Turbopack 的原因。

Turbopack 的功能

構(gòu)建 Web 應(yīng)用的實(shí)踐非常多樣化。僅在 CSS 中，就有 SCSS、Less、CSS Module、PostCSS等。React、Vue 和 Svelte 等框架需要自定義設(shè)置。

在構(gòu)建打包工具時(shí)，我們希望它能開箱即用，無需配置，可以通過插件獲得一些功能。目前，Turbopack 仍處于 alpha 階段，在當(dāng)前狀態(tài)下，Turbopack 還不能配置，所以插件也還不可用。

下面來看一下 Turbopack 默認(rèn)配置中哪些功能是開箱即用的以及未來將通過插件配置的功能：

JavaScript：支持所有 ESNext 功能、Browserslist 和頂層 await；
TypeScript：開箱即用地支持 TypeScript，包括解析路徑和baseUrl；
Imports：支持 require、import、動(dòng)態(tài)導(dǎo)入等；
Dev Server：優(yōu)化的 Dev Server 支持熱更新 (HMR) 和快速刷新；
CSS：支持全局 CSS、CSS Module、postcss-nested 和 @import；
靜態(tài)資源：支持 /public 目錄、JSON 導(dǎo)入和通過 ESM 導(dǎo)入資源；
環(huán)境變量：通過 .env、.env.local 等支持環(huán)境變量。

Turbopack vs Vite vs Webpack

Turbopack vs Vite

Turbopack 在以下兩個(gè)關(guān)鍵指標(biāo)上的表現(xiàn)優(yōu)于 Vite。

（1）Dev server 啟動(dòng)時(shí)間

Turbopack 的 Dev server 啟動(dòng)速度比 Vite 快得多。在 1000 個(gè)模塊的應(yīng)用中，Vite 需要 4.8 秒才能啟動(dòng)。Turbopack 啟動(dòng)僅需 0.9 秒，快了5.5倍。在大型應(yīng)用中，這種差異將保持一致。在 30000 個(gè)模塊的應(yīng)用中， Turbopack 的啟動(dòng)速度比 Vite 快了 5.4 倍。

（2）代碼更新

當(dāng)文件更改時(shí)，它需要將更改呈現(xiàn)給瀏覽器。它做到的越快，反饋循環(huán)就越緊密，發(fā)布的速度就越快。在 1000 個(gè)模塊的應(yīng)用中，Turbopack 對文件更改的速度比 Vite 快 5.8 倍。

Turbopack vs Webpack

Turbopack 的增量架構(gòu)在以下兩個(gè)關(guān)鍵指標(biāo)上超過了 Webpack 的速度。

（1）Dev server 啟動(dòng)時(shí)間

Turbopack 的 Dev server 啟動(dòng)速度比 Webpack 快得多。Next.js 12 底層使用了 Webpack，可以在 3.4 秒內(nèi)在 1000 個(gè)模塊的應(yīng)用上啟動(dòng) build server。Turbopack 的啟動(dòng)速度快了 0.9 秒 - 3.9倍。

（2）代碼更新

在 Dev server 上執(zhí)行的最常見操作就是更改文件。當(dāng)文件更改時(shí)，它需要將更改呈現(xiàn)給瀏覽器。它做到的越快，反饋循環(huán)就越緊密，發(fā)布的速度就越快。在 1000 個(gè)模塊的應(yīng)用中，Turbopack 對文件更改的反應(yīng)速度比 Webpack 快 8.9 倍：

Turbopack 的未來

到目前為止，Turbopack 可以在 Next.js v13 中使用。未來將發(fā)布獨(dú)立的 CLI、插件 API，并支持其他框架，如 Svelte 和 Vue。

Turbopack 將用于 Next.js 13 Dev server。它將為閃電般快速的 HMR 提供動(dòng)力，并將原生支持 React 服務(wù)端組件，以及 TypeScript、JSX、CSS 等。Webpack 用戶還可以期待使用 Turbopack 進(jìn)入基于 Rust 的未來的增量遷移路徑。

期待在 Webpack 的創(chuàng)建者 Tobias Koppers 的帶領(lǐng)下，Turbopack 成為 Web 的下一代打包工具。