↑點選藍字 關注我們
▲OSC源創會年終盛典
報名和紅薯面基！
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 應用的效能：
03. 減少網路請求
首先，使用 HTTP/2 協議並不意味著可以 不再關心 請求數量。
儘管 HTTP/2 理論上 支援無限多路複用，但瀏覽器/伺服器對每個連線 最大併發流數量 的預設限制大約為 100。
每個網路請求在伺服器和客戶端上都有固定開銷，比如請求頭處理、TLS 加密、多路複用等。更多請求意味著更多伺服器負載，而實際併發性受限於伺服器提供模組檔案的速度。
即使使用 HTTP/2，包含數千個未打包模組的應用仍然會導致嚴重的網路瓶頸。
深度匯入鏈還會導致網路瀑布（waterfall），即瀏覽器需要多次網路往返才能獲取整個模組圖。
這可以在透過 modulepreload 指令來稍微緩解，但是生成這些指令需要工具支援，並且在 <head> 標籤中使用數千個 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。
閱讀更多
相關來源
END
熱門文章
↓分享、在看與點贊~Orz
