字節(jié) Rspack 家族再添一員，又一個全新構建工具來了！
最近，字節(jié)跳動的 Rspack 家族又來了一個新成員：Rslib。至此，Rspack 家族目前已經擁有了 5 個成員：Rspack、Rsbuild、Rspress、Rsdoctor、Rslib。本文就來看看這些工具都是什么，有什么特點！
Rslib
Rslib 是一個由 Rsbuild 驅動的庫構建工具，基于 Rsbuild 的配置和插件構建，提供最佳的 ESM 和CJS 輸出。
Rslib 解決了傳統(tǒng)打包工具（如Webpack和Rspack）在構建ESM包時可能引入過多運行時代碼的問題，這對包的使用者不夠友好。Rslib不僅繼承了webpack和Rspack構建的龐大生態(tài)系統(tǒng)中諸如代碼 tree shaking、代碼拆分、模塊聯(lián)邦等強大功能，還優(yōu)化了 ESM 輸出的質量。
Rslib 的特點如下：
- 開箱即用的配置：Rslib為庫開發(fā)提供了預配置的設置，支持TypeScript、JSX、Sass、Less、CSS Modules和Wasm的編譯。
- DTS生成：包括隔離聲明在內的類型定義文件（DTS）生成。
- 模塊聯(lián)邦：支持模塊聯(lián)邦功能，便于微前端等場景的應用。
- 資源壓縮：可以對資源進行壓縮，減小輸出文件的大小。
- 類型檢查：提供類型檢查功能，增強代碼的健壯性。
- PostCSS和Lightning CSS：集成PostCSS和Lightning CSS，方便進行CSS處理和優(yōu)化。
- 生態(tài)系統(tǒng)的優(yōu)勢：利用webpack和Rspack的強大生態(tài)系統(tǒng)，包括 tree shaking、代碼拆分等功能。
目前，Rslib 仍處于早期階段，正在積極開發(fā)中。計劃在 2024 年第三季度完成 Rslib 的核心功能，并使用 Rslib 構建 Rspack 和 Rsbuild；在 2024 年第四季度推出公開穩(wěn)定版本。
Github：https://github.com/web-infra-dev/rslib
Rspack
2023 年 3 月 10 日，由字節(jié)跳動 Web Infra 團隊孵化的基于 Rust 語言開發(fā)的 Web 構建工具 Rspack 正式發(fā)布。它擁有高性能、兼容 Webpack 生態(tài)、定制性強等多種優(yōu)點，旨在打造高性能的前端工具鏈。
創(chuàng)建 Rspack 的原因是要解決在 ByteDance 維護構建工具時遇到的各種性能問題。由于 ByteDance 內部存在許多巨石應用，它們都具有復雜的構建配置，生產環(huán)境構建需要耗費十幾分鐘，甚至超過半小時；開發(fā)環(huán)境的耗時也超過十幾分鐘。在 Webpack 上嘗試了多種方法來優(yōu)化這些巨石應用，但是效果甚微。意識到在 Webpack 上的優(yōu)化已經難以為繼，必須要從底層改造，才能適應需求。因此決定自研 Rspack。
Rspack 的特點如下：
- 啟動速度極快：基于 Rust，項目啟動速度極快，帶給你極致的開發(fā)體驗。
- 閃電般的 HMR：內置增量編譯機制，HMR 速度極快，完全勝任大型項目的開發(fā)。
- 兼容 webpack：針對 webpack 的架構和生態(tài)進行兼容，無需從頭搭建生態(tài)。
- 內置常見構建能力：對 Typescript、JSX、CSS、CSS Modules、Sass 等提供開箱即用的支持。
- 默認生產優(yōu)化：默認內置多種優(yōu)化策略，如 Tree Shaking、代碼壓縮等等。
- 框架無關：不和任何前端框架綁定，保證足夠的靈活性。
Github：https://github.com/web-infra-dev/rspack
Rsbuild
Rsbuild 是基于 Rspack 的 Web 構建工具，是一個增強版的 Rspack CLI，更易用、更開箱即用。作為 Rspack 團隊對 Web 構建最佳實踐的探索，Rsbuild 提供從 Webpack 到 Rspack的 順暢遷移方案，大幅減少配置需求，提升構建速度達 10 倍。
Rsbuild 具備以下特性：
- 易于配置：Rsbuild 的目標之一，是為 Rspack 用戶提供開箱即用的構建能力，使開發(fā)者能夠在零配置的情況下開發(fā) web 項目。同時，Rsbuild 提供一套語義化的構建配置，以降低 Rspack 配置的學習成本。
- 性能優(yōu)先：Rsbuild 集成了社區(qū)中基于 Rust 的高性能工具，包括 Rspack 和 SWC，以提供一流的構建速度和開發(fā)體驗。與基于 Webpack 的 Create React App 和 Vue CLI 等工具相比，Rsbuild 提供了 5 ~ 10 倍的構建性能，以及更輕量的依賴體積。
- 插件生態(tài)：Rsbuild 內置一個輕量級的插件系統(tǒng)，提供一系列高質量的官方插件。此外，Rsbuild 兼容大部分的 webpack 插件和所有的 Rspack 插件，這意味著你可以在 Rsbuild 中使用社區(qū)或公司內沉淀的現(xiàn)有插件，而不需要重寫相關代碼。
- 產物穩(wěn)定：Rsbuild 設計時充分考慮了構建產物的穩(wěn)定性，它的開發(fā)環(huán)境產物和生產構建產物具備較高的一致性，并自動完成語法降級和 polyfill 注入。Rsbuild 也提供插件來進行類型檢查和產物語法檢查，以避免線上代碼的質量問題和兼容性問題。
- 框架無關：Rsbuild 不與前端 UI 框架耦合，并通過插件來支持 React、Vue 3、Vue 2、Svelte、Solid、Lit 等框架，未來也計劃支持社區(qū)中更多的 UI 框架。
Rsbuild 的構建性能與原生 Rspack 處于同一水平。由于 Rsbuild 內置了更多開箱即用的功能，因此性能數據會略微低于 Rspack。
構建 1000 個 React 組件的時間
Github：https://github.com/web-infra-dev/rsbuild
Rspress
Rspress 是基于 Rspack 的靜態(tài)站點生成器，依托React框架進行高效渲染。內置便捷的文檔主題，助力迅速搭建專業(yè)文檔站點。同時，支持個性化主題定制，滿足多樣化的靜態(tài)站需求，如博客站、產品主頁等。
Rspress 的特性如下：
- 極高的編譯性能：核心編譯模塊基于 Rust 前端工具鏈完成，帶來更加極致的開發(fā)體驗。
- 支持 MDX 編寫內容：MDX 是一種強大的內容編寫方式，你可以在 Markdown 中使用 React 組件。
- 內置全文搜索：構建時自動為你生成全文搜索索引，提供開箱即用的全文搜索能力。
- 更簡單的 I18n 方案：通過內置的 I18n 方案，可以輕松的為文檔或者組件提供多語言支持。
- **靜態(tài)站點生成：**生產環(huán)境下，會自動構建為靜態(tài) HTML 文件，你可以輕松的部署到任何地方。
- 提供多種自定義能力：通過其擴展機制，你可以輕松的擴展主題 UI 和構
以 Rspress 官網文檔的內容為例，Rspress、Docusaurus 和 Nextra 三者的性能對比情況如下：
Github：https://github.com/web-infra-dev/rspress
Rsdoctor
Rsdoctor 是一個全面診斷和分析 Webpack 和 Rspack 構建過程與產物的工具，提供編譯耗時細節(jié)和行為展示，以及防止代碼劣化的 Bundle Diff 功能。
Rsdoctor 的特性如下：
- 編譯可視化：Rsdoctor 將編譯行為及耗時進行可視化展示，方便開發(fā)同學查看構建問題。
- 多種分析能力：支持構建產物、構建時分析能力：
- 構建產物支持資源列表及模塊依賴等。
- 構建時分析支持 Loader、Plugin、Resolver 構建過程分析。
- 支持 Rspack 的 builtin:swc-loader 分析。
- 構建規(guī)則支持重復包檢測及 ES Version Check 檢查等。
- 支持自定義規(guī)則：除了內置構建掃描規(guī)則外，還支持用戶根據 Rsdoctor 的構建數據添加自定義構建掃描規(guī)則。
- 框架無關：支持所有基于 Webpack 或 Rspack 構建的項目。
通過概覽頁能夠知道項目配置、診斷信息、編譯信息、產物情況。
診斷模塊：
編譯分析：
- loader 分析
- Plugin 分析
- Resolve 分析
產物分析:
Bundle Diff：
Github：https://github.com/web-infra-dev/rsdoctor。
