字節(jié)跳動(dòng) Rspack 家族再添一員，全家族一覽！

作者：CUGGZ 2024-01-29 00:54:26

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

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

圖片

Rspack

圖片

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

圖片

Rspack 的特點(diǎn)如下：

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

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

圖片

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

Rsbuild

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

圖片

Rsbuild 具備以下特性：

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

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

圖片

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

Rspress

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

圖片

Rspress 的特性如下：

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

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

圖片

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

Rsdoctor

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

圖片

Rsdoctor 的特性如下：

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

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

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

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

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

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

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

圖片