Rolldown 1.0.0-beta.1 發布了。
Rolldown 是使用 Rust 開發的 Rollup 替代品,它提供與 Rollup 兼容的應用程序接口和插件接口,但在功能范圍上更類似于 esbuild。
作為一款現代化的打包工具,Rolldown 為開發者提供了更高效、便捷的開發體驗。
Rolldown 是尤雨溪公司投資的 Vite 基建開源項目,采用 Rust 從零開始構建了一個 API 與 Rollup 兼容的 JavaScript 打包器。
下文來自Rolldown 官方博客:《我們為什么需要打包器?》
01. 打包有用論
現代瀏覽器普遍支持原生 ESM 模塊和 HTTP/2,所以部分開發者提倡即使在生產環境中,也采用非打包方案(unbundled)來發布 Web 應用。
但 Rolldown 團隊認為,這種方案只適用小型應用,對于關注用戶體驗的性能敏感型應用,打包器仍不可或缺。
現代前端開發中,試圖跳過構建步驟仍然不切實際。即使在完善的非打包部署模型中,構建步驟通常也無法避免。
舉個栗子,Rails 8 默認的基于導入映射方案:所有 JS 資源仍需要構建,以便對資源指紋識別,并生成導入映射和模塊預加載指令。這只是通過 importmap-rails 來“曲線救國”,從而不直接使用 JS 打包器。
此外,對于下列需求,非打包方案存在缺陷:
使用現代 JS 特性,比如 ES6+、TS 或 JSX。
使用打包器專屬的優化,比如 tree-shaking(樹搖)、代碼分割或壓縮。
使用依賴構建的庫或框架。
發布源碼未打包的 npm 依賴,導致請求過多。
JS 打包無用論的主要論點是構建時增加了復雜性,減慢了開發反饋循環。
02. 三大優化
本質上,打包器的存在是因為 Web 應用的獨特限制:它們需要通過網絡按需交付。
打包器可以通過三大方案來提高 Web 應用的性能:
1、減少網絡請求和 waterfall(瀑布量)。 2、減少通過網絡發送的總字節數。 3、提高 JS 的執行性能。
03. 減少網絡請求
首先,使用 HTTP/2 協議并不意味著可以不再關心請求數量。
盡管 HTTP/2 理論上支持無限多路復用,但瀏覽器/服務器對每個連接最大并發流數量的默認限制大約為 100。
每個網絡請求在服務器和客戶端上都有固定開銷,比如請求頭處理、TLS 加密、多路復用等。更多請求意味著更多服務器負載,而實際并發性受限于服務器提供模塊文件的速度。
即使使用 HTTP/2,包含數千個未打包模塊的應用仍然會導致嚴重的網絡瓶頸。
深度導入鏈還會導致網絡瀑布(waterfall),即瀏覽器需要多次網絡往返才能獲取整個模塊圖。
這可以在通過 modulepreload 指令來稍微緩解,但是生成這些指令需要工具支持,并且在
標簽中使用數千個 modulepreload 指令會導致 HTML 本身膨脹,這又是另一個性能問題。打包可以通過將數千個模塊組合成服務器和瀏覽器都可以輕松處理的最佳數量的 chunk(組件塊),減少此類開銷。
打包還可以拍平導入鏈深度來減少 waterfall,并且可以提供生成 modulepreload 指令所需的數據。
本質上,打包將組合模塊圖的工作移到構建時,而不是為每個訪問者帶來運行時成本。這使得大型應用在網絡較差時,初次訪問的加載速度也能顯著加快。
3.1 緩存策略的權衡
打包無用論的另一個觀點是,非打包方案允許單獨緩存每個模塊,減少更新應用時緩存失效的數量。
然而,如上所述,這樣做的代價是降低了初始加載速度。
次優的打包配置可能會導致級聯塊哈希驗證,導致用戶在應用更新時必須重新下載應用的主要內容。
但這問題不大:打包器還可以利用導入映射和高級分塊控制,限制哈希無效并提高緩存命中率。
Vite / Rolldown 計劃會提供改進的、緩存更友好的默認分塊策略。
04. 減少總字節數
打包還可以減少網絡發送的 JS 體積。
首先,打包可以將多個模塊提升到同一作用域,移除其中所有 import / export 語句。
其次,tree-shaking(消除死代碼)是一種能且僅能通過靜態分析源碼來執行的構建時優化。
原生 ESM 會及早加載和執行所有內容,因此即使你只使用大模塊的單個導出,也必須下載并執行整個模塊。智能打包器可以從最終打包中移除未使用的 export,節省大量字節。
最后,在打包代碼上執行壓縮和 gzip 時,比單個模塊效率更高。
綜上所述,打包既可以減少用戶下載的代碼,也可以減少服務器使用的帶寬。
05. 提高 JS 執行性能
JS 是一種解釋型語言,現代 JS 引擎通常采用先進的 JIT 編譯來提升運行速度。然而,解析和編譯 JS 的成本也不低。
發送更少的 JS 代碼不僅可以節省帶寬,還意味著在瀏覽器中編譯和執行的 JS 更少,應用的啟動時間更短。
一些打包器/壓縮器還可以執行諸如常量折疊/AOT(及早執行)之類的優化,使打包代碼比手寫的源碼更高效。
高潮總結
由于 Web 應用依賴于網絡交付,前端目前仍然需要一個高性能的打包器。
打包器起碼有三大方案來優化性能,Rolldown 以 Vite 用戶為起點,可以提供更加一致的打包體驗,同時性能又比肩 esbuild + rollup。
來源:尤大為什么要投資打包器,Rolldown 公測版發布
閱讀更多
前端開始“銹化”?Vue團隊開源JS打包工具:基于Rust、速度極快、尤雨溪主導 最受歡迎前端框架——Vue創始人尤雨溪成立新公司VoidZero:聲稱打造下一代JavaScript工具鏈、已融資3200萬
Vue誕生10年,創始人尤雨溪推動“銹化”——通過Rust提升Web基礎設施性能
相關來源
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
-
javascript
+關注
關注
0文章
519瀏覽量
53879 -
Rust
+關注
關注
1文章
229瀏覽量
6614
原文標題:這款“銹化”的開源JS打包工具發布1.0 Beta——性能強勁、尤雨溪主導
文章出處:【微信號:OSC開源社區,微信公眾號:OSC開源社區】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
相關推薦
評論