Arco Design 是一套設(shè)計系統(tǒng)，主要服務(wù)于字節(jié)跳動旗下中后臺產(chǎn)品的體驗設(shè)計和技術(shù)實現(xiàn)。它的目標(biāo)在于幫助設(shè)計師與開發(fā)者解放雙手、提升工作效率，并高質(zhì)量地打造符合業(yè)務(wù)規(guī)范的中后臺應(yīng)用。它擁有系統(tǒng)的設(shè)計規(guī)范和資源，提供了覆蓋 React、、Mobile 的原子組件。目前，Arco Design 擁有 60 多個精心制作的組件，支持開箱即用。

 

除了風(fēng)格配置*臺和物料*臺的定制化工具外，Arco Design 還提供了包括圖標(biāo)*臺、品牌庫、Arco Pro 最佳實踐的資源*臺。

 

Github：https://github.com/arco-design/arco-design

Arco Design Pro 是基于 Arco Design React 組件庫的開箱即用的中后臺前端解決方，它的特性如下：

• TypeScript - 代碼完全使用 TypeScript 書寫

• Arco Design - 由 ArcoDesign React 組件庫強力驅(qū)動

• Templates - 16+ 頁面模版，覆蓋表格、列表、表單、工作臺、可視化等場景。

• Themes - 基于「風(fēng)格配置*臺」豐富的主題市場，讓你的項目千變?nèi)f化。

• Dark Theme - 一鍵絲滑切換暗黑風(fēng)格

• Mock - 內(nèi)置 API 模擬方案

• Flexible - 靈活的多架構(gòu)方案，支持 next.js / vite / cra 等開發(fā)框架

• I18n - 內(nèi)置國際化多語言解決方案

• Config - 靈活配置頁面配色、布局等

 

本質(zhì)上，Arco Design Pro 是一套項目模版，市面上常見的中后臺項目模版一般都有固定的選型和架構(gòu)，這樣用戶如果想自己修改架構(gòu)，成本會比較大。所以 Arco Pro v2 版本設(shè)計了一套多架構(gòu)方案，能夠在最大化的代碼重用的基礎(chǔ)上，輸出多種架構(gòu)的 pro 模版。

 

Github：https://github.com/arco-design/arco-design-pro

Semi Design 是由抖音前端團隊，MED 團隊設(shè)計、開發(fā)并維護的設(shè)計系統(tǒng)。它作為全面、易用、優(yōu)質(zhì)的現(xiàn)代應(yīng)用 UI 解決方案，從字節(jié)跳動各業(yè)務(wù)線的復(fù)雜場景提煉而來，支撐*千計*臺產(chǎn)品，服務(wù)內(nèi)外部 10 萬+ 用戶。

 

Semi Design 采用了一套跨前端框架技術(shù)方案，F(xiàn)/A 分層設(shè)計，將每個組件的 拆分為兩部分：Foundation 和 Adapter，這使得我們可以通過僅重新實現(xiàn)適配器來跨框架重用 Foundation 代碼，例如 React、Vue、Angular、Svelte 或者 WebComponent，快速打造不同*臺上的通用組件庫。

 

Github：https://github.com/DouyinFE/semi-design

IconPark 圖標(biāo)庫是字節(jié)跳動開源的一個通過技術(shù)驅(qū)動矢量圖標(biāo)樣式的開源圖標(biāo)庫，可以實現(xiàn)根據(jù)單一SVG源文件變換出多種主題， 具備豐富的分類、更輕量的代碼和更靈活的使用場景；致力于構(gòu)建高質(zhì)量、統(tǒng)一化、可定義的圖標(biāo)資源，讓大多數(shù)人都能夠選擇適合自己的風(fēng)格圖標(biāo)。

 

Github：https://github.com/bytedance/IconPark

xgplayer（西瓜播放器）是一款帶解析器、能節(jié)省流量的HTML5視頻播放器。它基于“一切皆組件化”的原則，設(shè)計了一個獨立、可拆卸的 UI 組件。更重要的是，它不僅在 UI 層面靈活，而且在功能上也大膽創(chuàng)新：它擺脫了視頻加載、緩沖和對視頻格式的依賴。特別是對于 mp4，它可以實現(xiàn)階段性加載，這對于不支持流媒體的 mp4 來說意義重大。這意味著無縫切換，清晰度控制，以及視頻保存。此外，它還集成了對 FLV、HLS 和 dash 的按需和實時支持。

 

Github：https://github.com/bytedance/xgplayer

ByteMD 是一個使用 Svelte 構(gòu)建的 Markdown 編輯器組件。它還可以用于其他庫/框架，例如 React、Vue 和 Angular。其具有以下特性：

• 輕量級且與框架無關(guān)：ByteMD 是使用 Svelte 構(gòu)建的。它編譯為普通 JS DOM 操作，無需導(dǎo)入任何 UI 框架運行時包，這使得它輕量級，并且可以輕松適應(yīng)其他庫/框架。

• 易于擴展：ByteMD 有一個插件系統(tǒng)來擴展基本的 Markdown 語法，這使得可以輕松添加附加功能，例如代碼語法突出顯示、數(shù)學(xué)方程和Mermaid流程圖。如果這些插件不能滿足您的需求，您也可以編寫自己的插件。

• 默認安全：ByteMD 已正確處理和等跨站腳本 (XSS)攻擊。無需引入額外的 DOM 清理步驟。

• SSR 兼容：ByteMD 可以在服務(wù)端渲染（SSR）環(huán)境中使用，無需額外配置。SSR 在某些情況下被廣泛使用，因為它具有更好的 SEO 和在慢速網(wǎng)絡(luò)連接中快速獲取內(nèi)容的時間。

 

Github：https://github.com/bytedance/bytemd

VChart 是 VisActor 可視化體系中的圖表組件庫，基于可視化語法庫 VGrammar 進行圖表邏輯封裝，基于可視化渲染引擎 VRender 進行組件封裝。核心能力如下：

• 一碼多端：自動適配桌面、H5、多個小程序環(huán)境

• 面向敘事：綜合應(yīng)用標(biāo)注、動畫、流程控制、敘事模板等一系列增強功能進行敘事可視化創(chuàng)作。

• 場景沉淀：面向最終用戶沉淀可視化能力，解放開發(fā)者生產(chǎn)力

 

Github：https://github.com/VisActor/VChart

VTable 是 VisActor 可視化體系中的表格組件庫，基于可視化渲染引擎 VRender 進行封裝。核心能力如下：

• 性能極致：支持百萬級數(shù)據(jù)快速運算與渲染

• 多維分析：多維數(shù)據(jù)自動分析與呈現(xiàn)

• 表現(xiàn)力強：提供靈活強大的圖形能力，無縫融合VChart

 

Github：https://github.com/VisActor/VTable

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

 

Rspack 的特點如下：

• 啟動速度極快：基于 Rust，項目啟動速度極快，帶給你極致的開發(fā)體驗。

• 閃電般的 HMR：內(nèi)置增量編譯機制，HMR 速度極快，完全勝任大型項目的開發(fā)。

• 兼容 webpack：針對 webpack 的架構(gòu)和生態(tài)進行兼容，無需從頭搭建生態(tài)。

• 內(nèi)置常見構(gòu)建能力：對 Typescript、JSX、CSS、CSS Modules、Sass 等提供開箱即用的支持。

• 默認生產(chǎn)優(yōu)化：默認內(nèi)置多種優(yōu)化策略，如 Tree Shaking、代碼壓縮等等。

• 框架無關(guān)：不和任何前端框架綁定，保證足夠的靈活性。

 

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

Rsbuild 是基于 Rspack 的 Web 構(gòu)建工具，是一個增強版的 Rspack CLI，更易用、更開箱即用。作為 Rspack 團隊對 Web 構(gòu)建最佳實踐的探索，Rsbuild 提供從 Webpack 到 Rspack 的順暢遷移方案，大幅減少配置需求，提升構(gòu)建速度達 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 也提供插件來進行類型檢查和產(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。

 

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

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

 

Rspress 的特性如下：

• 極高的編譯性能：核心編譯模塊基于 Rust 前端工具鏈完成，帶來更加極致的開發(fā)體驗。

• 支持 MDX 編寫內(nèi)容：MDX 是一種強大的內(nèi)容編寫方式，你可以在 Markdown 中使用 React 組件。

• 內(nèi)置全文搜索：構(gòu)建時自動為你生成全文搜索索引，提供開箱即用的全文搜索能力。

• 更簡單的 I18n 方案：通過內(nèi)置的 I18n 方案，可以輕松的為文檔或者組件提供多語言支持。

• 靜態(tài)站點生成：生產(chǎn)環(huán)境下，會自動構(gòu)建為靜態(tài) HTML 文件，你可以輕松的部署到任何地方。

• 提供多種自定義能力：通過其擴展機制，你可以輕松的擴展主題 UI 和構(gòu)

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

 

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

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

 

Rsdoctor 的特性如下：

• 編譯可視化：Rsdoctor 將編譯行為及耗時進行可視化展示，方便開發(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 檢查等。

• 支持自定義規(guī)則：除了內(nèi)置構(gòu)建掃描規(guī)則外，還支持用戶根據(jù) Rsdoctor 的構(gòu)建數(shù)據(jù)添加自定義構(gòu)建掃描規(guī)則。

• 框架無關(guān)：支持所有基于 Webpack 或 Rspack 構(gòu)建的項目。

 

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

Oxlint 是 OXC 工具集的其中一個工具，用于捕獲錯誤或無用的代碼，作用和 ESLint 類似?，F(xiàn)階段，oxlint 無意完全取代 ESLint；當(dāng) ESLint 的緩慢成為工作流程中的瓶頸時，它可以作為增強功能。

OXC 是字節(jié)跳動出品的一個用 Rust 編寫的 JavaScript 高性能工具集合，該項目的重點在于構(gòu)建 JavaScript 的基本編譯器工具：解析器、linter、格式化程序、轉(zhuǎn)譯器、壓縮器和解析器。此外，OXC 還為 Rspack、Rolldown 和 Ezno 等新興 JavaScript 工具提供支持。

 

Oxlint 的特新如下：

• 比 ESLint 快 50 - 100 倍，并隨 CPU 核心數(shù)量不斷擴展。

• 超過 200 條規(guī)則，且正在不斷增加，來自 eslint、typescript、eslint-plugin-react、eslint-plugin-jest、eslint-plugin-unicorn 和 eslint-plugin-jsx-a11y。

• 支持.eslintignore。

• 支持ESLint 注釋禁用。

 

Github：https://github.com/oxc-project/oxc

Modern.js 是字節(jié)跳動 Web 工程體系的開源版本，它提供多個解決方案，來幫助開發(fā)者解決不同研發(fā)場景下的問題。目前 Modern.js 包含兩個解決方案，分別面向 Web 應(yīng)用開發(fā)場景 和 npm 包開發(fā)場景：

• Modern.js Framework：基于 React 的漸進式 Web 開發(fā)框架

• Modern.js Module：易用、高性能的 npm 包開發(fā)方案

Modern.js 框架是一個基于 React 的漸進式 Web 開發(fā)框架。在字節(jié)跳動內(nèi)部，將 Modern.js 封裝為上層框架，并支撐了數(shù)千個 Web 應(yīng)用的研發(fā)。Modern.js 能為開發(fā)者提供極致的開發(fā)體驗，讓應(yīng)用擁有更好的用戶體驗。

在開發(fā) React 應(yīng)用過程中，開發(fā)者通常需要去為某些功能去設(shè)計實現(xiàn)方案，或是使用其他的庫、框架來解決這些問題。Modern.js 支持 React 應(yīng)用所需要的所有配置和工具，并內(nèi)置額外的功能和優(yōu)化。開發(fā)者可以使用 React 構(gòu)建應(yīng)用的 UI，然后逐步采用 Modern.js 的功能來解決常見的應(yīng)用需求，如路由、數(shù)據(jù)獲取、狀態(tài)管理等。

 

Modern.js 框架主要包含以下特性：

• Rust 構(gòu)建：提供雙構(gòu)建工具支持，輕松切換到 Rspack 構(gòu)建工具，編譯飛快。

• 漸進式：使用最精簡的模板創(chuàng)建項目，通過生成器逐步開啟插件功能，定制解決方案。

• 一體化：開發(fā)與生產(chǎn)環(huán)境 Web 唯一，CSR 和 SSR 同構(gòu)開發(fā)，函數(shù)即接口的 API 服務(wù)調(diào)用。

• 開箱即用：默認 TS 支持，內(nèi)置構(gòu)建、ESLint、調(diào)試工具，全功能可測試。

• 周邊生態(tài)：自研狀態(tài)管理、微前端、模塊打包、Monorepo 方案等周邊需求。

• 多種路由模式：包含自控路由、基于文件約定的路由（嵌套路由）等。

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

Garfish 是一套微前端解決方案，主要用于解決現(xiàn)代 web 應(yīng)用在前端生態(tài)繁榮和 web 應(yīng)用日益復(fù)雜化兩大背景下帶來的跨團隊協(xié)作、技術(shù)體系多樣化、web 應(yīng)用日益復(fù)雜化等問題：從架構(gòu)層面出發(fā)將多個獨立交付的前端應(yīng)用組成整體，這些前端應(yīng)用能夠「獨立開發(fā)」、「獨立測試」、「獨立部署」，但是最終在用戶看來仍然是內(nèi)聚的單個產(chǎn)品。

 

Garfish 的特性如下：

• 豐富高效的產(chǎn)品特征

  • Garfish 微前端子應(yīng)用支持任意多種框架、技術(shù)體系接入

  • Garfish 微前端子應(yīng)用支持「獨立開發(fā)」、「獨立測試」、「獨立部署」

  • 強大的預(yù)加載能力，自動記錄用戶應(yīng)用加載習(xí)慣增加加載權(quán)重，應(yīng)用切換時間極大縮短

  • 支持依賴共享，極大程度的降低整體的包體積，減少依賴的重復(fù)加載

  • 支持?jǐn)?shù)據(jù)收集，有效的感知到應(yīng)用在運行期間的狀態(tài)

  • 支持多實例能力，可在頁面中同時運行多個子應(yīng)用提升了業(yè)務(wù)的拆分力度

  • 提供了高效可用的調(diào)試工具，協(xié)助用戶在微前端模式下帶來的與傳統(tǒng)研發(fā)模式不同帶來的開發(fā)體驗問題

• 高擴展性的核心模塊

  • 通過 Loader 核心模塊支持 HTML entry、JS entry 的支持，接入微前端應(yīng)用簡單易用

  • Router 模塊提供了路由驅(qū)動、主子路由隔離，用戶僅需要配置路由表應(yīng)用即可完成自主的渲染和銷毀，用戶無需關(guān)心內(nèi)部邏輯

  • Sandbox 模塊為應(yīng)用的 Runtime 提供運行時隔離能力，能有效隔離 JS、Style 對應(yīng)用的副作用影響

  • Store 提供了一套簡單的通信數(shù)據(jù)交換機制

• 高度可擴展的插件系統(tǒng)

  • 提供業(yè)務(wù)插件滿足業(yè)務(wù)方的各種定制需求

 

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

 

喜歡的話點點贊收藏一下謝謝