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 當前的目標是:
-
幫助現有的 webpack 項目漸進地遷移到高性能的 bundler 上,使構建性能不再成爲項目迭代的瓶頸;
-
Rspack 不僅僅適用於瀏覽器和 Node.js 這種我們熟悉的環境中,它的目標是覆蓋所有運行 JavaScript 的場景,這意味着 Rspack 也可以很方便地支持 Deno、Electron、跨平臺、小程序等一切 JavaScript 可以運行的環境。
-
我們發現在單一的工具上兼顧「靈活性」和「開箱即用」是非常困難的事情。因此,在開源 Rspack 之後,我們開發了一套完整的 Rstack 工具鏈,包含 Rsbuild、Rspress、Rsdoctor 和 Rslib,它們分別面向不同的使用場景。例如,爲了解決 Rspack 配置複雜、上手成本高的問題,我們通過 Rsbuild 來提供開箱即用的開發體驗。
Rspack Stack
Rstack 是 "Rspack Stack" 的縮寫,代表以 Rspack 爲核心的一整套技術棧,包含以下工具:
-
Rspack 專注於實現底層的高性能 bundler,兼顧性能和靈活的配置。
-
Rsbuild 專注於構建 Web 應用,提供開箱即用的開發體驗。
-
Rslib 專注於構建 library,提供高質量的 ESM 和 CJS 產物。
-
Rspress 專注於生成靜態站點,支持 MDX 來搭建文檔站和博客。
-
Rsdoctor 專注於構建分析,幫助開發者解決構建相關的問題。
這些工具共同構成了 Rstack 技術棧。我們希望通過提供統一的 web 開發工具,爲開發者和用戶帶來一流的體驗。
兼容 webpack
Rspack 1.0 是對標 webpack v5 設計的,這幫助了大量使用 webpack 的項目平滑地遷移到 Rspack。在兼容 webpack 的同時,Rspack 1.0 也在擁抱現代 Web 標準、追求極致的構建性能:
-
對於 Web 標準,Rspack 持續在積極擁抱現代 Web 標準的演進,跟進最新的 TC39 和 Web 標準。例如, Rspack 已經支持了通過 new Worker() 引入 Web Worker、支持通過 Import Attributes 引入 JSON modules, 支持按照 CSS Module Scripts 規範引入 CSS 等。
-
對於性能,我們在 1.0 引入了許多的優化方式。例如,當 JavaScript 側未使用某個 hook 時,Rust 側就不會觸發到 JavaScript 側的相關通信;再比如,Rspack 對許多通信對象做了懶加載優化,即使通信的對象很大,如果 JavaScript 只消費其中的部分屬性,Rspack 也只會傳輸被消費的數據,將 Rust 和 JavaScript 的通信開銷降低到最低。此外,未來 Rspack 會考慮提供更加輕量的 hooks,以實現更加高效的 Rust 和 JavaScript 的通信。
在 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。 Rspack 將在 1.x 版本迭代 12~18 個月,並帶來更多的新特性和改進。
-
發佈 Rsbuild 1.0。 它基於 Rspack 1.0,並支持多環境構建。目前 Rsbuild 已發佈 1.0 RC,預計在 9 月發佈正式版。
-
發佈 Rsdoctor 1.0。 該版本將改進對 Vue 項目的支持,並提供適用於 CI / CD 環境的報告模式。
-
開發 Rslib 0.x。 Rslib 是基於 Rsbuild 的 library 構建工具,詳見 Rslib 倉庫。
-
開發 Rspress 2.0。 它將基於 React 19 實現,並改進一些過去不合理的設計,詳見 Rspress v2.0 planning。
下面是一些我們計劃在 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 的發展離不開廣大的社區貢獻者和社區夥伴,這裏特別要感謝:
-
NX team 對於 Rspack 的信任,在 Rspack 開源初期就集成了 Rspack。
-
Zack Chapple 和 Zephyr team 幫助 Rspack 進行項目推廣。
-
Unplugin team 積極地幫助 Rspack 進行集成,豐富了 Rspack 的插件生態。
-
Brandon Dail 在 Discord 裏使用了 Rspack,並幫助我們進行宣傳。
-
Kaffi Y 孜孜不倦地在 GitHub 和 Discord 裏幫助用戶、解答 Rspack 相關的問題。
-
所有參加字節跳動 Rspack Innovator project 的開發者,如 Dominus Kelvin,Yannik Peschke,Russell Canfield 提供了早期的反饋和建議。
-
所有從 0.x 版本開始使用 Rspack 的企業和用戶,他們寶貴的意見幫助了 Rspack 更好地進步。
在開源社區上,Rspack 獲得了 2024 年度 Breakthrough of the Year 獎項,這對於 Rspack 團隊是一個很大的鼓舞,感謝所有投票支持 Rspack 的開發者:
自 0.1 發佈後,我們和社區的多個團隊建立了深入的合作關係。例如:
-
在對齊 webpack 的過程中,我們和 webpack team 合作,優化 webpack 對於原生 CSS 和 ESM 產物的支持。在這個期間,Rspack 團隊向 webpack 提交了超過 100 個 commits,再次感謝 Alexander Akait 給予的 review 意見。
-
我們也與 SWC 團隊合作,貢獻了 Preact Refresh SWC 插件,並修復了若干個 SWC 的 transform 和 minify 的 bug,感謝 kdy 給予的 review 意見。
-
Rspack 積極擁抱 unplugin 的生態,完整支持了 unplugin API,感謝 sxzz 的 review 意見和 antfu 的非凡創造力。
同時我們也很欣喜地看到,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 導出的類型可能會發生變化,這是因爲:
-
TypeScript 自身不遵循 semver,它可能在 minor 版本引入一些不兼容變更,使得 Rspack 需要調整類型。
-
Rspack 可能會利用一些高版本 TypeScript 引入的特性,對一些使用低版本 TypeScript 的項目造成影響。
最後附上 Rspack 倉庫鏈接: https://github.com/web-infra-dev/rspack
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/4DHZ2kEpKO-tbt-ASKM46w