比 Webpack 快700倍的全新開(kāi)源打包工具 - Turbopack
Turbopack 是一個(gè)可以取代 Webpack 的新開(kāi)源打包工具，使用 Rust 編寫(xiě)，號(hào)稱比 Webpack 快700倍?。?！
著名的基于 React 的服務(wù)端框架 Next.js 的開(kāi)發(fā)者 Vercel 于10月26日舉行了 Next.js Conf 2022 活動(dòng)，發(fā)布了 Next.js 的最新版本 Next.js 13，以及 Rust 制作的快速打包工具 Turbopack。
打包工具是一種將大量的 JavaScript、TypeScript 和其他代碼打包成一體的工具。對(duì)于使用大量庫(kù)和組件的團(tuán)隊(duì)開(kāi)發(fā)的大型 Web 應(yīng)用程序來(lái)說(shuō)，它是必不可少的。
此次發(fā)布的 Turbopack 是由 Webpack（最出名的打包工具）的開(kāi)發(fā)者 Tobias Koppers 和其他參與 Vercel 的人共同開(kāi)發(fā)的，該公司解釋說(shuō)，Turbopack 是 Webpack 的繼承者。
Turbopack 的特點(diǎn)包括：它是一個(gè)用 Rust 編寫(xiě)的本地應(yīng)用程序，并且在執(zhí)行后有一個(gè)重用內(nèi)容的機(jī)制，這使得即使是大型的應(yīng)用程序也可以更快地啟動(dòng)和運(yùn)行。
在 Next.js 13 中，Turbopack 將成為默認(rèn)的打包工具。
基于 JavaScript 的工具面臨性能限制
曾幾何時(shí)，用 JavaScript 編寫(xiě)這些工具是很自然的事情，Babel、tercer 和 Webpack 等工具就是這樣創(chuàng)建的。
然而，隨著前端應(yīng)用程序的規(guī)模和復(fù)雜性的增加，使用這些基于 JavaScript 的工具進(jìn)行編譯開(kāi)始遇到性能問(wèn)題。
因此，在我們上次的活動(dòng)中，我們已經(jīng)開(kāi)始遷移到基于 Rust 的原生工具。首先，我們從 Babel 遷移并將編譯速度提高了 17 倍，接下來(lái)，通過(guò)替換 tercer，壓縮速度提高了 6 倍。
Turbopack - Webpack 的繼承者
打包工具 Webpack 已被下載超過(guò)30億次，是我們打包構(gòu)建過(guò)程中不可或缺的部分。Webpack 開(kāi)發(fā)人員 Tobias Koppers 加入 Vercel，組建了一支世界一流的工程師團(tuán)隊(duì)，以創(chuàng)建下一代打包工具 - Turbopack，該團(tuán)隊(duì)吸取了 Webpack 10 年的經(jīng)驗(yàn)教訓(xùn)，結(jié)合了 Turborepo 和 Google 的 Bazel 在增量計(jì)算方面的創(chuàng)新，并創(chuàng)建了一個(gè)可以支持未來(lái)幾十年計(jì)算的架構(gòu)。
對(duì)于大型應(yīng)用，Turbopack 比 Vite 快 10 倍，比 Webpack 快 700 倍，更大的應(yīng)用程序?qū)⑹共町惛蟆?/p>
這種加速不僅在更新代碼時(shí)很有用，而且在建立本地開(kāi)發(fā)服務(wù)器時(shí)也很有用。
讓我們看一個(gè)例子：即使是處理一個(gè)具有 3000 個(gè)模塊的大型應(yīng)用程序，Turbopack 也能在 1.8 秒內(nèi)啟動(dòng)，比以前版本的 Next.js 和其他流行工具都更快。
增強(qiáng)本地和云端構(gòu)建
Turbopack 的性能得益于其高度優(yōu)化的機(jī)器代碼和用 Rust 開(kāi)發(fā)的低級(jí)增量引擎，Turbopack 對(duì)一個(gè)任務(wù)執(zhí)行一次就不再執(zhí)行。
Turbopack 最初將專注于本地開(kāi)發(fā)體驗(yàn)，包括 React Fast Refresh（注意：即使在應(yīng)用程序運(yùn)行時(shí)也能編輯組件），但最終將專注于加強(qiáng) Next.js 在本地和云端構(gòu)建。
與 Tuborepo 類(lèi)似，你可以在你的團(tuán)隊(duì)中共享已經(jīng)完成的工作，不僅在本地機(jī)器上，而且在你的整個(gè)組織中。
請(qǐng)務(wù)必升級(jí)到 Next.js 13 并運(yùn)行 next dev --turbo 來(lái)試用 Turbopack 的 alpha 版本。
快速使用
到今天為止，Turbopack 可以在 Next.js v13 中使用，未來(lái)將發(fā)布獨(dú)立的 CLI、插件 API，并支持其他框架，如 Svelte 和 Vue?，F(xiàn)在，請(qǐng)按照以下說(shuō)明開(kāi)始：
使用 Turbopack 創(chuàng)建 Next.js v13 項(xiàng)目：
npx create-next-app --example with-turbopack
啟動(dòng) Next.js 開(kāi)發(fā)服務(wù)器（使用 Turbopack）：
npm run dev
# 或者 yarn dev
Next.js v13 開(kāi)發(fā)服務(wù)器現(xiàn)在由 Turbopack 提供支持！啟動(dòng)和更新都應(yīng)該是近乎即時(shí)的，應(yīng)用程序越大，改進(jìn)就越大。
核心概念
讓我們深入了解Turbopack的內(nèi)部結(jié)構(gòu)，弄清楚它為什么這么快。
Turbo引擎
Turbopack 之所以這么快，是因?yàn)樗⒃谝粋€(gè)可重復(fù)使用的 Rust 庫(kù)上，這個(gè)庫(kù)可以實(shí)現(xiàn)增量計(jì)算，也就是 Turbo 引擎。以下是它的工作原理。
函數(shù)級(jí)緩存
在 Turbo 引擎驅(qū)動(dòng)的程序中，你可以將某些函數(shù)標(biāo)記為"要記住的"，當(dāng)這些函數(shù)被調(diào)用時(shí)，Turbo 引擎會(huì)記住它們被調(diào)用的內(nèi)容，以及它們返回的內(nèi)容。然后，它會(huì)將其保存在內(nèi)存中緩存起來(lái)。
下面是一個(gè)簡(jiǎn)化的例子，說(shuō)明這在 builder 中可能是什么樣子。
我們首先在兩個(gè)文件 api.ts 和 sdk.ts 上調(diào)用 readFile，然后我們把這些文件打包，把它們串聯(lián)起來(lái)，最后得到fullBundle，所有這些函數(shù)調(diào)用的結(jié)果都被保存在緩存中供以后使用。
讓我們想象一下，我們是在一個(gè)開(kāi)發(fā)服務(wù)器上運(yùn)行。你把 sdk.ts 文件保存在你的機(jī)器上，Turbopack 接收到文件系統(tǒng)事件，并知道它需要重新計(jì)算。
由于 sdk.ts 的結(jié)果已經(jīng)改變，我們需要再次打包它，然后需要再次串聯(lián)。
重要的是 api.ts 沒(méi)有改變，我們可以從緩存中讀取它的結(jié)果，并將其傳遞給 concat，所以我們不用再讀它和重新打包它，從而節(jié)省了時(shí)間。
現(xiàn)在想象一下，在一個(gè)真正的 bundler 中，有成千上萬(wàn)的文件需要讀取和轉(zhuǎn)換需要執(zhí)行，和上面一樣的你可以通過(guò)記住函數(shù)調(diào)用的結(jié)果和不重做以前做過(guò)的工作來(lái)節(jié)省大量的工作。
緩存
目前，Turbo 引擎將其緩存存儲(chǔ)在內(nèi)存中，這意味著緩存的時(shí)間與運(yùn)行它的進(jìn)程一樣長(zhǎng) -- 這對(duì)開(kāi)發(fā)服務(wù)器來(lái)說(shuō)是很好的。當(dāng)你在 Next v13 中運(yùn)行 next dev --turbo 時(shí)，你將啟動(dòng) Turbo 引擎的緩存，當(dāng)你取消你的開(kāi)發(fā)服務(wù)器時(shí)，緩存會(huì)被清空。
在未來(lái)，我們計(jì)劃將這個(gè)緩存持久化--要么保存在文件系統(tǒng)中，要么保存在像 Turborepo 那樣的遠(yuǎn)程緩存中，這將意味著 Turbopack 可以在不同的運(yùn)行和機(jī)器上記住所做的工作。
這種方法使得 Turbopack 在計(jì)算應(yīng)用程序的增量更新時(shí)非?？?，這優(yōu)化了 Turbopack 在開(kāi)發(fā)中處理更新的能力，意味著你的開(kāi)發(fā)服務(wù)器將始終對(duì)變化作出迅速的反應(yīng)。
在未來(lái)，持久性緩存將為更快的生產(chǎn)構(gòu)建打開(kāi)大門(mén)。通過(guò)記住跨運(yùn)行的工作，新的生產(chǎn)構(gòu)建可以只重建已更改的文件 - 可能會(huì)導(dǎo)致巨大的時(shí)間節(jié)省。
按要求編譯
Turbo 引擎有助于在你的開(kāi)發(fā)服務(wù)器上提供極快的更新，但還有一個(gè)重要的指標(biāo)需要考慮 - 啟動(dòng)時(shí)間，你的開(kāi)發(fā)服務(wù)器開(kāi)始運(yùn)行得越快，你就能越快地開(kāi)始工作。
有兩種方法可以使一個(gè)進(jìn)程更快，工作更快，或者做更少的工作。對(duì)于啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器來(lái)說(shuō)，減少工作的方法是只編譯啟動(dòng)所需的代碼。
頁(yè)級(jí)編譯
2-3年前的 Next.js 版本在顯示你的開(kāi)發(fā)服務(wù)器之前，習(xí)慣于編譯整個(gè)應(yīng)用程序，在 Next.js[11] 中，我們開(kāi)始只編譯你請(qǐng)求的頁(yè)面上的代碼。
這樣做比較好，但并不完美。當(dāng)你導(dǎo)航到 /users 時(shí)，我們會(huì)打包所有的客戶端和服務(wù)器模塊、動(dòng)態(tài)導(dǎo)入的模塊，以及引用的 CSS 和圖片，這意味著如果你的頁(yè)面有很大一部分被隱藏起來(lái)，或者隱藏在標(biāo)簽后面，我們?nèi)匀粫?huì)編譯它。
請(qǐng)求級(jí)編譯
Turbopack 足夠聰明，只編譯你要求的代碼，這意味著，如果瀏覽器要求使用 HTML，我們只編譯 HTML，而不編譯 HTML 所引用的任何東西。如果瀏覽器需要一些 CSS，我們將只編譯 CSS，不編譯引用的圖片。
如果我們使用本地 ESM，我們會(huì)得到類(lèi)似的行為，除了 Native ESM 會(huì)產(chǎn)生大量對(duì)服務(wù)器的請(qǐng)求。使用請(qǐng)求級(jí)編譯，我們既可以減少請(qǐng)求的數(shù)量，又可以使用本地速度來(lái)編譯它們，這提供了明顯的性能改進(jìn)。
Git 倉(cāng)庫(kù)：https://github.com/vercel/turbo