最近，字節(jié)跳動的 Rspack 家族又新增了一員：Rsdoctor。至此，Rspack 家族目前已經(jīng)擁有了 4 個成員：Rspack、Rsbuild、Rspress、Rsdoctor。本文就來看看這些工具都是什么，有什么特點！

圖片

Rspack

2023 年 3 月 10 日，由字節(jié)跳動 Web Infra 團(tuán)隊孵化的基于 Rust 語言開發(fā)的 Web 構(gòu)建工具 Rspack 正式發(fā)布。它擁有高性能、兼容 Webpack 生態(tài)、定制性強(qiáng)等多種優(yōu)點，旨在打造高性能的前端工具鏈。

圖片

創(chuàng)建 Rspack 的原因是要解決在 ByteDance 維護(hù)構(gòu)建工具時遇到的各種性能問題。由于 ByteDance 內(nèi)部存在許多巨石應(yīng)用，它們都具有復(fù)雜的構(gòu)建配置，生產(chǎn)環(huán)境構(gòu)建需要耗費十幾分鐘，甚至超過半小時；開發(fā)環(huán)境的耗時也超過十幾分鐘。在 Webpack 上嘗試了多種方法來優(yōu)化這些巨石應(yīng)用，但是效果甚微。意識到在 Webpack 上的優(yōu)化已經(jīng)難以為繼，必須要從底層改造，才能適應(yīng)需求。因此決定自研 Rspack。

圖片

Rspack 的特點如下：

• 啟動速度極快：基于 Rust，項目啟動速度極快，帶給你極致的開發(fā)體驗。
• 閃電般的 HMR：內(nèi)置增量編譯機(jī)制，HMR 速度極快，完全勝任大型項目的開發(fā)。
• 兼容 webpack：針對 webpack 的架構(gòu)和生態(tài)進(jìn)行兼容，無需從頭搭建生態(tài)。
• 內(nèi)置常見構(gòu)建能力：對 Typescript、JSX、CSS、CSS Modules、Sass 等提供開箱即用的支持。
• 默認(rèn)生產(chǎn)優(yōu)化：默認(rèn)內(nèi)置多種優(yōu)化策略，如 Tree Shaking、代碼壓縮等等。
• 框架無關(guān)：不和任何前端框架綁定，保證足夠的靈活性。

自 Rspack 發(fā)布之后，受到了社區(qū)的廣泛好評，很多用戶表示遷移到 Rspack 之后，構(gòu)建性能得到了大幅提升。

圖片

圖片

Github：https://github.com/web-infra-dev/rspack

Rsbuild

Rsbuild 是基于 Rspack 的 Web 構(gòu)建工具，是一個增強(qiáng)版的 Rspack CLI，更易用、更開箱即用。作為 Rspack 團(tuán)隊對 Web 構(gòu)建最佳實踐的探索，Rsbuild 提供從 Webpack 到 Rspack的 順暢遷移方案，大幅減少配置需求，提升構(gòu)建速度達(dá) 10 倍。

圖片

Rsbuild 具備以下特性：

• 易于配置：Rsbuild 的目標(biāo)之一，是為 Rspack 用戶提供開箱即用的構(gòu)建能力，使開發(fā)者能夠在零配置的情況下開發(fā) web 項目。同時，Rsbuild 提供一套語義化的構(gòu)建配置，以降低 Rspack 配置的學(xué)習(xí)成本。
• 性能優(yōu)先：Rsbuild 集成了社區(qū)中基于 Rust 的高性能工具，包括 Rspack 和 SWC，以提供一流的構(gòu)建速度和開發(fā)體驗。與基于 Webpack 的 Create React App 和 Vue CLI 等工具相比，Rsbuild 提供了 5 ~ 10 倍的構(gòu)建性能，以及更輕量的依賴體積。
• 插件生態(tài)：Rsbuild 內(nèi)置一個輕量級的插件系統(tǒng)，提供一系列高質(zhì)量的官方插件。此外，Rsbuild 兼容大部分的 webpack 插件和所有的 Rspack 插件，這意味著你可以在 Rsbuild 中使用社區(qū)或公司內(nèi)沉淀的現(xiàn)有插件，而不需要重寫相關(guān)代碼。
• 產(chǎn)物穩(wěn)定：Rsbuild 設(shè)計時充分考慮了構(gòu)建產(chǎn)物的穩(wěn)定性，它的開發(fā)環(huán)境產(chǎn)物和生產(chǎn)構(gòu)建產(chǎn)物具備較高的一致性，并自動完成語法降級和 polyfill 注入。Rsbuild 也提供插件來進(jìn)行類型檢查和產(chǎn)物語法檢查，以避免線上代碼的質(zhì)量問題和兼容性問題。
• 框架無關(guān)：Rsbuild 不與前端 UI 框架耦合，并通過插件來支持 React、Vue 3、Vue 2、Svelte、Solid、Lit 等框架，未來也計劃支持社區(qū)中更多的 UI 框架。

Rsbuild 的構(gòu)建性能與原生 Rspack 處于同一水平。由于 Rsbuild 內(nèi)置了更多開箱即用的功能，因此性能數(shù)據(jù)會略微低于 Rspack。

圖片

構(gòu)建 1000 個 React 組件的時間Github：https://github.com/web-infra-dev/rsbuild

Rspress

Rspress 是基于 Rspack 的靜態(tài)站點生成器，依托React框架進(jìn)行高效渲染。內(nèi)置便捷的文檔主題，助力迅速搭建專業(yè)文檔站點。同時，支持個性化主題定制，滿足多樣化的靜態(tài)站需求，如博客站、產(chǎn)品主頁等。

圖片

Rspress 的特性如下：

• 極高的編譯性能：核心編譯模塊基于 Rust 前端工具鏈完成，帶來更加極致的開發(fā)體驗。
• 支持 MDX 編寫內(nèi)容：MDX 是一種強(qiáng)大的內(nèi)容編寫方式，你可以在 Markdown 中使用 React 組件。
• 內(nèi)置全文搜索：構(gòu)建時自動為你生成全文搜索索引，提供開箱即用的全文搜索能力。
• 更簡單的 I18n 方案：通過內(nèi)置的 I18n 方案，可以輕松的為文檔或者組件提供多語言支持。
• **靜態(tài)站點生成：**生產(chǎn)環(huán)境下，會自動構(gòu)建為靜態(tài) HTML 文件，你可以輕松的部署到任何地方。
• 提供多種自定義能力：通過其擴(kuò)展機(jī)制，你可以輕松的擴(kuò)展主題 UI 和構(gòu)

以 Rspress 官網(wǎng)文檔的內(nèi)容為例，Rspress、Docusaurus 和 Nextra 三者的性能對比情況如下：

圖片

Github：https://github.com/web-infra-dev/rspress

Rsdoctor

Rsdoctor 是一個全面診斷和分析 Webpack 和 Rspack 構(gòu)建過程與產(chǎn)物的工具，提供編譯耗時細(xì)節(jié)和行為展示，以及防止代碼劣化的 Bundle Diff 功能。

圖片

Rsdoctor 的特性如下：

• 編譯可視化：Rsdoctor 將編譯行為及耗時進(jìn)行可視化展示，方便開發(fā)同學(xué)查看構(gòu)建問題。
• 多種分析能力：支持構(gòu)建產(chǎn)物、構(gòu)建時分析能力：

構(gòu)建產(chǎn)物支持資源列表及模塊依賴等。

構(gòu)建時分析支持 Loader、Plugin、Resolver 構(gòu)建過程分析。

支持 Rspack 的 builtin:swc-loader 分析。

構(gòu)建規(guī)則支持重復(fù)包檢測及 ES Version Check 檢查等。

• 支持自定義規(guī)則：除了內(nèi)置構(gòu)建掃描規(guī)則外，還支持用戶根據(jù) Rsdoctor 的構(gòu)建數(shù)據(jù)添加自定義構(gòu)建掃描規(guī)則。
• 框架無關(guān)：支持所有基于 Webpack 或 Rspack 構(gòu)建的項目。

通過概覽頁能夠知道項目配置、診斷信息、編譯信息、產(chǎn)物情況。

圖片

診斷模塊：

圖片

編譯分析：

• loader 分析

圖片

• Plugin 分析

圖片

• Resolve 分析

圖片

產(chǎn)物分析:

圖片

Bundle Diff：

圖片

Github：https://github.com/web-infra-dev/rsdoctor