比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 是針對(duì) JavaScript 和 TypeScript 優(yōu)化的增量打包工具，由 Webpack 的創(chuàng)建者 Tobias Koppers 和 Next.js 團(tuán)隊(duì)使用 Rust 編寫。Turbopack 的推出吸引了眾多開發(fā)者的關(guān)注，下面就來(lái)看看 Turbopack 都有哪些優(yōu)勢(shì)！

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)，它們都專注于使用緩存來(lái)避免重復(fù)執(zhí)行相同的工作。

Turbo 引擎工作原理

Turbopack 之所以如此之快，是因?yàn)樗⒃谝粋€(gè)可重用的 Rust 庫(kù)之上，該庫(kù)支持增量計(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è)簡(jiǎn)化的示例：

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

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

Turbo 引擎當(dāng)前將其緩存存儲(chǔ)在內(nèi)存中。這意味著緩存將與運(yùn)行它的進(jìn)程一樣長(zhǎng)，這對(duì)于 Dev server 來(lái)說(shuō)效果很好。將來(lái)，計(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）頁(yè)面級(jí)編譯

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

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

Turbopack 足夠智能，可以只編譯請(qǐng)求的代碼。這意味著如果瀏覽器請(qǐng)求 HTML，就只會(huì)編譯 HTML，而不會(huì)編譯 HTML 引用的任何內(nèi)容。如果瀏覽器需要 CSS，將只編譯 CSS，而不編譯其引用的圖片，Turbopack 甚至知道不編譯 source map，除非 Chrome DevTools 是打開的。通過(guò)請(qǐng)求級(jí)編譯，減少了請(qǐng)求的數(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í)行兩次相同的工作。簡(jiǎn)而言之，它會(huì)以最大速度做最少的工作。

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

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

esbuild 是一個(gè)非常快的打包工具，但它并沒(méi)有做太多的緩存。這意味著會(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 請(qǐng)求的頁(yè)面。例如，如果轉(zhuǎn)到localhost:3000?，它將僅打包 pages/index.jsx，以及它導(dǎo)入的模塊。

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

此策略使 Turbopack 在首次啟動(dòng) Dev server 時(shí)速度極快。只需計(jì)算渲染頁(yè)面所需的代碼，然后在單個(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í)，我們希望它能開箱即用，無(wú)需配置，可以通過(guò)插件獲得一些功能。目前，Turbopack 仍處于 alpha 階段，在當(dāng)前狀態(tài)下，Turbopack 還不能配置，所以插件也還不可用。

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

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)入和通過(guò) ESM 導(dǎo)入資源；
環(huán)境變量：通過(guò) .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 對(duì)文件更改的速度比 Vite 快 5.8 倍。

Turbopack vs Webpack

Turbopack 的增量架構(gòu)在以下兩個(gè)關(guān)鍵指標(biāo)上超過(guò)了 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 對(duì)文件更改的反應(yīng)速度比 Webpack 快 8.9 倍：

Turbopack 的未來(lái)

到目前為止，Turbopack 可以在 Next.js v13 中使用。未來(lái)將發(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 的未來(lái)的增量遷移路徑。

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