01. 打包有用論

現(xiàn)代瀏覽器普遍支持原生 ESM 模塊和 HTTP/2，所以部分開(kāi)發(fā)者提倡即使在生產(chǎn)環(huán)境中，也采用非打包方案（unbundled）來(lái)發(fā)布 Web 應(yīng)用。

但 Rolldown 團(tuán)隊(duì)認(rèn)為，這種方案只適用小型應(yīng)用，對(duì)于關(guān)注用戶(hù)體驗(yàn)的性能敏感型應(yīng)用，打包器仍不可或缺。

現(xiàn)代前端開(kāi)發(fā)中，試圖跳過(guò)構(gòu)建步驟仍然不切實(shí)際。即使在完善的非打包部署模型中，構(gòu)建步驟通常也無(wú)法避免。

舉個(gè)栗子，Rails 8 默認(rèn)的基于導(dǎo)入映射方案：所有 JS 資源仍需要構(gòu)建，以便對(duì)資源指紋識(shí)別，并生成導(dǎo)入映射和模塊預(yù)加載指令。這只是通過(guò) importmap-rails 來(lái)“曲線救國(guó)”，從而不直接使用 JS 打包器。

此外，對(duì)于下列需求，非打包方案存在缺陷：

使用現(xiàn)代 JS 特性，比如 ES6+、TS 或 JSX。

使用打包器專(zhuān)屬的優(yōu)化，比如 tree-shaking（樹(shù)搖）、代碼分割或壓縮。

使用依賴(lài)構(gòu)建的庫(kù)或框架。

發(fā)布源碼未打包的 npm 依賴(lài)，導(dǎo)致請(qǐng)求過(guò)多。

JS 打包無(wú)用論的主要論點(diǎn)是構(gòu)建時(shí)增加了復(fù)雜性，減慢了開(kāi)發(fā)反饋循環(huán)。

02. 三大優(yōu)化

本質(zhì)上，打包器的存在是因?yàn)?Web 應(yīng)用的獨(dú)特限制：它們需要通過(guò)網(wǎng)絡(luò)按需交付。

打包器可以通過(guò)三大方案來(lái)提高 Web 應(yīng)用的性能：

1、減少網(wǎng)絡(luò)請(qǐng)求和 waterfall（瀑布量）。 2、減少通過(guò)網(wǎng)絡(luò)發(fā)送的總字節(jié)數(shù)。 3、提高 JS 的執(zhí)行性能。

03. 減少網(wǎng)絡(luò)請(qǐng)求

首先，使用 HTTP/2 協(xié)議并不意味著可以不再關(guān)心請(qǐng)求數(shù)量。

盡管 HTTP/2 理論上支持無(wú)限多路復(fù)用，但瀏覽器/服務(wù)器對(duì)每個(gè)連接最大并發(fā)流數(shù)量的默認(rèn)限制大約為 100。

每個(gè)網(wǎng)絡(luò)請(qǐng)求在服務(wù)器和客戶(hù)端上都有固定開(kāi)銷(xiāo)，比如請(qǐng)求頭處理、TLS 加密、多路復(fù)用等。更多請(qǐng)求意味著更多服務(wù)器負(fù)載，而實(shí)際并發(fā)性受限于服務(wù)器提供模塊文件的速度。

即使使用 HTTP/2，包含數(shù)千個(gè)未打包模塊的應(yīng)用仍然會(huì)導(dǎo)致嚴(yán)重的網(wǎng)絡(luò)瓶頸。

深度導(dǎo)入鏈還會(huì)導(dǎo)致網(wǎng)絡(luò)瀑布（waterfall），即瀏覽器需要多次網(wǎng)絡(luò)往返才能獲取整個(gè)模塊圖。

這可以在通過(guò) modulepreload 指令來(lái)稍微緩解，但是生成這些指令需要工具支持，并且在標(biāo)簽中使用數(shù)千個(gè) modulepreload 指令會(huì)導(dǎo)致 HTML 本身膨脹，這又是另一個(gè)性能問(wèn)題。

打包可以通過(guò)將數(shù)千個(gè)模塊組合成服務(wù)器和瀏覽器都可以輕松處理的最佳數(shù)量的 chunk（組件塊），減少此類(lèi)開(kāi)銷(xiāo)。

打包還可以拍平導(dǎo)入鏈深度來(lái)減少 waterfall，并且可以提供生成 modulepreload 指令所需的數(shù)據(jù)。

本質(zhì)上，打包將組合模塊圖的工作移到構(gòu)建時(shí)，而不是為每個(gè)訪問(wèn)者帶來(lái)運(yùn)行時(shí)成本。這使得大型應(yīng)用在網(wǎng)絡(luò)較差時(shí)，初次訪問(wèn)的加載速度也能顯著加快。

3.1 緩存策略的權(quán)衡

打包無(wú)用論的另一個(gè)觀點(diǎn)是，非打包方案允許單獨(dú)緩存每個(gè)模塊，減少更新應(yīng)用時(shí)緩存失效的數(shù)量。

然而，如上所述，這樣做的代價(jià)是降低了初始加載速度。

次優(yōu)的打包配置可能會(huì)導(dǎo)致級(jí)聯(lián)塊哈希驗(yàn)證，導(dǎo)致用戶(hù)在應(yīng)用更新時(shí)必須重新下載應(yīng)用的主要內(nèi)容。

但這問(wèn)題不大：打包器還可以利用導(dǎo)入映射和高級(jí)分塊控制，限制哈希無(wú)效并提高緩存命中率。

Vite / Rolldown 計(jì)劃會(huì)提供改進(jìn)的、緩存更友好的默認(rèn)分塊策略。

04. 減少總字節(jié)數(shù)

打包還可以減少網(wǎng)絡(luò)發(fā)送的 JS 體積。

首先，打包可以將多個(gè)模塊提升到同一作用域，移除其中所有 import / export 語(yǔ)句。

其次，tree-shaking（消除死代碼）是一種能且僅能通過(guò)靜態(tài)分析源碼來(lái)執(zhí)行的構(gòu)建時(shí)優(yōu)化。

原生 ESM 會(huì)及早加載和執(zhí)行所有內(nèi)容，因此即使你只使用大模塊的單個(gè)導(dǎo)出，也必須下載并執(zhí)行整個(gè)模塊。智能打包器可以從最終打包中移除未使用的 export，節(jié)省大量字節(jié)。

最后，在打包代碼上執(zhí)行壓縮和 gzip 時(shí)，比單個(gè)模塊效率更高。

綜上所述，打包既可以減少用戶(hù)下載的代碼，也可以減少服務(wù)器使用的帶寬。

05. 提高 JS 執(zhí)行性能

JS 是一種解釋型語(yǔ)言，現(xiàn)代 JS 引擎通常采用先進(jìn)的 JIT 編譯來(lái)提升運(yùn)行速度。然而，解析和編譯 JS 的成本也不低。

發(fā)送更少的 JS 代碼不僅可以節(jié)省帶寬，還意味著在瀏覽器中編譯和執(zhí)行的 JS 更少，應(yīng)用的啟動(dòng)時(shí)間更短。

一些打包器/壓縮器還可以執(zhí)行諸如常量折疊/AOT（及早執(zhí)行）之類(lèi)的優(yōu)化，使打包代碼比手寫(xiě)的源碼更高效。

高潮總結(jié)

由于 Web 應(yīng)用依賴(lài)于網(wǎng)絡(luò)交付，前端目前仍然需要一個(gè)高性能的打包器。

打包器起碼有三大方案來(lái)優(yōu)化性能，Rolldown 以 Vite 用戶(hù)為起點(diǎn)，可以提供更加一致的打包體驗(yàn)，同時(shí)性能又比肩 esbuild + rollup。

來(lái)源：尤大為什么要投資打包器，Rolldown 公測(cè)版發(fā)布

閱讀更多

前端開(kāi)始“銹化”？Vue團(tuán)隊(duì)開(kāi)源JS打包工具：基于Rust、速度極快、尤雨溪主導(dǎo) 最受歡迎前端框架——Vue創(chuàng)始人尤雨溪成立新公司VoidZero：聲稱(chēng)打造下一代JavaScript工具鏈、已融資3200萬(wàn)

Vue誕生10年，創(chuàng)始人尤雨溪推動(dòng)“銹化”——通過(guò)Rust提升Web基礎(chǔ)設(shè)施性能

相關(guān)來(lái)源

https://x.com/rolldown_rs/status/1871953492979617976 https://github.com/rolldown/rolldown/releases/tag/v1.0.0-beta.1 https://rolldown.rs/guide/in-depth/why-bundlers https://mp.weixin.qq.com/s/okYoOQXN9Emo1kjfNXqpnQ https://mp.weixin.qq.com/s/i3MdBCwCBCG2Wue0ud1h7w