Rspack 1-0 發佈了!


Rspack 1.0 版本現已發佈

Rspack 是基於 Rust 編寫的下一代 JavaScript 打包工具, 兼容 webpack 的 API 和生態,並提供 10 倍於 webpack 的構建性能。

在 18 個月前,我們開源了 Rspack 0.1,並收到了大量來自社區的反饋和貢獻。在這期間,170 位貢獻者參與了 Rspack 開發,提交了超過 5000 個 pull request 和超過 2000 個 issues,幫助 Rspack 快速迭代了 80 個版本。同時,Rspack 的 npm 周下載量也突破了 10 萬 🎉

今天,Rspack 終於到達了一個嶄新的階段 —— 1.0。這意味着 Rspack 已經達到生產穩定,覆蓋了 webpack 絕大多數的 API 和功能,並已經做好支持更多用戶的準備。

誰在使用 Rspack

自 Rspack 開源以來,已經有衆多企業和開發者在生產環境使用 Rspack,Rspack 每週的 npm 下載量也突破了 10 萬。

在字節跳動內部,Rspack 的周下載量超過 40 萬,有超過 1000 個 Web 應用在使用 Rspack,包括 TikTok、抖音、飛書、Coze 等。這些項目接入 Rspack 後,顯著改進了構建耗時和迭代效率。這也幫助我們發現了 Rspack 早期的一些設計問題,促使我們改進架構,在遷移成本、性能和靈活性等方面做好權衡。

我們也看到更多的企業級用戶開始使用 Rspack,包括微軟、Amazon、阿里巴巴、Intuit、Bit.dev、Discord 等等。我們很高興 Rspack 能夠幫助這些企業用戶實現漸進式遷移,也期望未來與更多的企業和開發者建立合作和交流。

新特性

自 0.1 發佈以來,Rspack 推出了諸多重要的功能和優化,包括:

更極致的性能

作爲基於 Rust 實現的 Bundler,性能始終是 Rspack 的一個核心指標。從 Rspack 0.1 發佈以來,我們對 Rspack 做了大量的性能改進,優化各個場景下的性能表現,並支持了 lazy compilation 等核心功能,以保障 Rspack 在大型項目中有更佳的性能。

下圖是 Rspack 0.1 與 Rspack 1.0 在 benchmark 中的 build 性能對比。可以看到,Rspack 在實現大量新特性的同時,也顯著提升了構建性能:

值得注意的是,Rspack 當前的架構和代碼實現仍有許多優化空間。在 1.0 發佈後,我們計劃繼續將 Rspack 的性能提升數倍 🚀,從而更好地支持大型應用開發。

更好的兼容性

在 0.1 剛發佈的時候,Rspack 尚未實現許多的 webpack API 和 Hooks,只能兼容有限的 webpack 插件和 loaders,這使我們需要 fork 一些社區庫來適配 Rspack,例如早期的 @rspack/plugin-html、@rspack/plugin-minify 和 @rspack/plugin-node-polyfill。

隨着 API 支持的日益完善,Rspack 適配了越來越多的 webpack 插件和 loaders。目前,Rspack 已經兼容了社區幾乎所有的 loader。在下載量最高的 50 個 webpack 插件 中,80% 以上都可以在 Rspack 中使用,或是找到替代方案。

在此基礎上,Rspack 支持了更多的庫和框架,包括 React、Preact、Vue、Solid、Svelte、NestJS 等。我們也感謝社區衆多插件的維護者主動適配 Rspack,如 unplugin 和 node-polyfill-webpack-plugin 等。這裏尤其要感謝 Alexander Akait,他作爲 webpack 的主要維護者之一,幫助我們支持了許多 webpack loaders 和插件。

我們也期望未來能夠支持和創造更多的社區插件,使 webpack 和 Rspack 的生態更加繁榮。

更小的包體積

生產構建的包體積一直是 Rspack 最爲關注的核心指標。自 0.1 發佈以來,Rspack 逐步對齊了 webpack 的各個產物優化能力,實現了完整的 split chunks、tree shaking、scope hoisting、mangle exports 等重要特性。

當一個項目從 webpack 遷移到 Rspack 後,這些優化能夠保障,在提升開發體驗的同時,產物的包體積仍與 webpack 處於同一水平。在部分場景下,Rspack 的產物體積已經略優於 webpack。

例如,我們在一個真實的中型 web 應用中進行驗證,與 Rspack 0.1 相比,Rspack 1.0 的產物體積從 6600KB 優化至 5900KB,與 webpack 持平。未來,Rspack 也會繼續探索更先進的包體積優化方案。

支持模塊聯邦 2.0

Module Federation 是一種 Micro-Frontend 架構模式,在前端生態中得到廣泛應用。Rspack 團隊和 Module Federation 團隊一起合作開發了 Module Federation 2.0。新版本提供了動態 TS 類型提示、Runtime 插件機制、devtools、平臺部署協議等功能,使得 Module Federation 可以更好地支持基於微前端架構的大型應用。

此外,Rspack 也保留着對 Module Federation 1.0 的兼容和支持,使 webpack 項目能夠更輕鬆地遷移。

穩定的 API 和新官網

在 1.0 中,我們改進了 configuration、JavaScript API、plugin API 的穩定性,這保證了上層的工具和框架能夠更加輕鬆地與 Rspack 集成。同時,我們還完善了官網的指南和 API 文檔。

Rspack 1.0 還包含一個全新的文檔首頁,感謝設計師 Emily Jackson 和團隊成員 Zack Jackson 爲此付出的努力。

爲什麼是 Rspack

近兩年,社區中湧現出多個基於 Rust 的 bundler,它們的性能表現都相當優異。Rspack 在確保卓越性能的同時,也在靈活度、兼容性等方面做到了社區領先。

Rspack 當前的目標是:

Rspack Stack

Rstack 是 "Rspack Stack" 的縮寫,代表以 Rspack 爲核心的一整套技術棧,包含以下工具:

這些工具共同構成了 Rstack 技術棧。我們希望通過提供統一的 web 開發工具,爲開發者和用戶帶來一流的體驗。

兼容 webpack

Rspack 1.0 是對標 webpack v5 設計的,這幫助了大量使用 webpack 的項目平滑地遷移到 Rspack。在兼容 webpack 的同時,Rspack 1.0 也在擁抱現代 Web 標準、追求極致的構建性能:

在 Rspack 未來的 major 版本中,將基於 webpack API 進行演進,使其更符合現代 web 開發的需求。

如何使用 1.0

如果你正在使用 Rspack 0.7 或更早的版本,請留意 1.0 版本包含一些不兼容更新,爲此我們準備了詳細的文檔來幫助升級,請參考:從 Rspack 0.x 遷移。

如果你還未使用過 Rspack,請參考 快速上手 來接入 Rspack,也歡迎爲 Rspack GitHub 倉庫 點亮一顆 Star 🌟。

下一步

Rspack 1.0 是一個全新的起點,在本次發佈後,Rspack 團隊將聚焦於以下目標:

下面是一些我們計劃在 Rspack 1.x 支持的關鍵能力:

更快的 HMR

Rspack 目前能夠滿足大部分項目的性能訴求,但是仍然存在較大的性能優化空間。在開發環境,Rspack 內部的 make 階段已經實現了接近常量級別的增量構建,在 seal 階段仍然有一些計算會隨着項目規模的增加而變慢。未來 Rspack 會對 seal 階段的各個計算進行增量化改造,從而將 HMR 耗時控制在常量級別。

可移植的緩存

Rspack 緩存能力的演進路線,是依次實現 memory cache、persistent cache 和 portable cache。目前 Rspack 已經實現了 memory cache,它帶來了出色的 HMR 性能。下一步,我們將在此基礎上實現 persistent cache ,這將解決大型項目冷啓動耗時較長的問題,功能上對齊 webpack。

在這之後,我們計劃進一步實現 portable cache,這意味着 Rspack 的構建緩存不僅是持久化的,同時也可以被移植到任何不同的環境和機器,這將幫助團隊更好地利用緩存,併爲分佈式構建奠定基礎。

基於 TypeScript 的優化

目前 Rspack 在處理 TypeScript 模塊時,會先通過 loader 將其轉換爲 JavaScript 再處理。這雖然提供了充足的靈活性,但是也阻礙了進一步的產物優化。例如,開發者需要使用 enum 替代 const enum,但是 enum 本身難以進行常量優化,未來我們考慮重新將 TypeScript 作爲 Rspack 的一等公民,充分利用 TypeScript 的靜態信息,提供更高級的編譯產物優化(如 基於 type 的 property renaming)。

穩定的 Rust API

目前,上層工具可以使用 JS API 來集成 Rspack,這提供了良好的擴展性。但是 Rust 和 JavaScript 存在通信開銷,這在一定程度上限制了 Rspack 的性能。我們也提供了 SWC Wasm plugin 以支持擴展,但是 Wasm 的性能相比 native 語言仍然有一定差距,爲了給上層工具提供更靈活的接入方式和更好的性能,我們計劃開放 Rspack 的 Rust API 用於集成。

React Server Components 支持

在字節跳動內部,我們已經基於 Rspack 實驗性地支持了 RSC(React Server Components),並在一個大型 web 項目中得到驗證。未來 Rspack 將會爲 RSC 提供一等公民的支持,提供更多的核心能力來幫助實現 RSC。例如,目前 Rspack 已經支持 layer 特性,能夠在單次打包時構建出多種環境的產物。

改進 ESM 產物

ESM 是 JavaScript 模塊的標準,目前,我們正在改進 Rspack 和 webpack 對 ESM 產物的支持,並實現基於 Rspack 的 library 構建工具—— Rslib。這將幫助開發者更好地使用 Rspack 來構建 npm 包,並享受 ESM 帶來的靜態分析能力和 tree shaking 支持。

致謝

Rspack 的發展離不開廣大的社區貢獻者和社區夥伴,這裏特別要感謝:

在開源社區上,Rspack 獲得了 2024 年度 Breakthrough of the Year 獎項,這對於 Rspack 團隊是一個很大的鼓舞,感謝所有投票支持 Rspack 的開發者:

自 0.1 發佈後,我們和社區的多個團隊建立了深入的合作關係。例如:

同時我們也很欣喜地看到,Rspack 正在被應用或集成到更廣泛的生態上,包括 Bazel、Storybook、Electron 等。

最後,再次感謝所有爲 Rspack 生態貢獻過的開發者 ❤️:

常見問題

發佈 1.0 意味着什麼?

1.0 的發佈,意味着 Rspack 實現了 webpack 的核心功能,API 達到穩定。在未來 12~18 個月內,我們會保證 Rspack 1.x API 的穩定性,開發者可以放心地基於 Rspack API 開發上層的框架和工具。在 1.x 的迭代期間,我們仍然可能會發現一些 Rspack 不合理的設計,我們將通過 future flags 的方式,實現漸進式地升級。

什麼時候發佈 Rsbuild 1.0?

我們正在進行 Rsbuild 1.0 發佈的準備工作,並計劃於 9 月上旬正式發佈。

在發佈 Rspack 1.0 的同時,我們也已經發布了 Rsbuild 1.0 RC 版本,後續 Rsbuild 將不再引入不兼容更新。請參考 https://rsbuild.dev/guide/migration/rsbuild-0-x 升級到 Rsbuild 1.0 RC。

Rspack 遵循語義化版本嗎?

Rspack 遵循語義化版本(semver),不會在 minor 或 patch release 中引入 public API 的不兼容變更,注意有以下一些特例:

如果你的項目對語義化版本有着嚴格的要求,可以將 Rspack 固定到 minor 版本。

實驗性特性

Rspack 提供了一些實驗性特性,這些特性可以通過 experiments 配置項使用。在 minor release 中,Rspack 可能對這些實驗性特性的 public API 做一些調整,並在更新日誌中對這些變動進行詳細的說明。因此,如果你使用了實驗性特性,請留意 minor 版本的更新日誌。

SWC 相關特性

Rspack 基於 SWC 實現,而 SWC 目前處於 pre-1.0 階段。爲了及時地跟進 SWC 的修復和優化,我們會定期升級 SWC 版本,這可能會包含 SWC 的一些不兼容變更,或是導致低版本的 SWC Wasm 插件不可用。在這種情況下,我們會發布 Rspack 的 minor 版本,並在更新日誌中說明。

TS 類型

在 minor 版本中,Rspack 導出的類型可能會發生變化,這是因爲:

最後附上 Rspack 倉庫鏈接: https://github.com/web-infra-dev/rspack

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/4DHZ2kEpKO-tbt-ASKM46w