字節跳動最熱門的 15 個前端開源計畫

2024-02-17碼農

作為國內知名的互聯網公司，字節跳動在前端領域做出了很多開源貢獻。本文就來盤點字節跳動開源的 15 個前端計畫，你用過幾個？

Arco Dsign

Arco Design 是一套設計系統，主要服務於字節跳動旗下中後台產品的體驗設計和技術實作。它的目標在於幫助設計師與開發者解放雙手、提升工作效率，並高品質地打造符合業務規範的中後台套用。它擁有系統的設計規範和資源，提供了覆蓋 React、Vue、Mobile 的原子元件。目前，Arco Design 擁有 60 多個精心制作的元件，支持開箱即用。

除了風格配置平台和物料平台的客製化工具外，Arco Design 還提供了包括圖示平台、品牌庫、Arco Pro 最佳實踐的資源平台。 Github： https://github.com/arco-design/arco-design

Arco Design Pro

Arco Design Pro 是基於 Arco Design React 元件庫的開箱即用的中後台前端解決方，它的特性如下：

TypeScript - 程式碼完全使用 TypeScript 書寫

Arco Design - 由 ArcoDesign React 元件庫強力驅動

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

Themes - 基於「風格配置平台」豐富的主題市場，讓你的計畫千變萬化。

Dark Theme - 一鍵絲滑切換暗黑風格

Mock - 內建 API 模擬方案

Flexible - 靈活的多架構方案，支持 next.js / vite / cra 等開發框架

I18n - 內建國際化多語言解決方案

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

本質上，Arco Design Pro 是一套計畫模版，市面上常見的中後台計畫模版一般都有固定的選型和架構，這樣使用者如果想自己修改架構，成本會比較大。所以 Arco Pro v2 版本設計了一套多架構方案，能夠在最大化的程式碼重用的基礎上，輸出多種架構的 pro 模版。 Github： https://github.com/arco-design/arco-design-pro

Semi Design

Semi Design 是由抖音前端團隊，MED 產品設計團隊設計、開發並維護的設計系統。它作為全面、易用、優質的現代套用 UI 解決方案，從字節跳動各業務線的復雜場景提煉而來，支撐近千計平台產品，服務內外部 10 萬+ 使用者。

Semi Design 采用了一套跨前端框架技術方案，F/A 分層設計，將每個元件的 JavaScript 拆分為兩部份：Foundation 和 Adapter，這使得我們可以透過僅重新實作介面卡來跨框架重用 Foundation 程式碼，例如 React、Vue、Angular、Svelte 或者 WebComponent，快速打造不同平台上的通用元件庫。 Github： https://github.com/DouyinFE/semi-design

IconPark

IconPark 圖示庫是字節跳動開源的一個透過技術驅動向量圖示樣式的開源圖示庫，可以實作根據單一SVG原始檔變換出多種主題，具備豐富的分類、更輕量的程式碼和更靈活的使用場景；致力於構建高品質、統一化、可定義的圖示資源，讓大多數人都能夠選擇適合自己的風格圖示。

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

xgplayer

xgplayer（西瓜播放器）是一款帶解析器、能節省流量的HTML5視訊播放器。它基於「一切皆元件化」的原則，設計了一個獨立、可拆卸的 UI 元件。更重要的是，它不僅在 UI 層面靈活，而且在功能上也大膽創新：它擺脫了視訊載入、緩沖和對視訊格式的依賴。特別是對於 mp4，它可以實作階段性載入，這對於不支持串流媒體的 mp4 來說意義重大。這意味著無縫切換，解析度控制，以及視訊保存。此外，它還整合了對 FLV、HLS 和 dash 的按需和即時支持。

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

bytemd

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

輕量級且與框架無關 ：ByteMD 是使用 Svelte 構建的。它編譯為普通 JS DOM 操作，無需匯入任何 UI 框架執行時包，這使得它輕量級，並且可以輕松適應其他庫/框架。

易於擴充套件 ：ByteMD 有一個外掛程式系統來擴充套件基本的 Markdown 語法，這使得可以輕松添加附加功能，例如程式碼語法突出顯示、數學方程式和Mermaid流程圖。如果這些外掛程式不能滿足您的需求，您也可以編寫自己的外掛程式。

預設安全 ：ByteMD 已正確處理和等跨站指令碼 (XSS)攻擊。無需引入額外的 DOM 清理步驟。

SSR 相容 ：ByteMD 可以在伺服端渲染（SSR）環境中使用，無需額外配置。SSR 在某些情況下被廣泛使用，因為它具有更好的 SEO 和在慢速網路連線中快速獲取內容的時間。

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

VChart

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

一碼多端 ：自動適配桌面、H5、多個小程式環境

面向敘事 ：綜合套用標註、動畫、流程控制、敘事樣版等一系列增強功能進行敘事視覺化創作。

場景沈澱 ：面向終端使用者沈澱視覺化能力，解放開發者生產力

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

VTable

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

效能極致：支持百萬級數據快速運算與渲染

多維分析：多維數據自動分析與呈現

表現力強：提供靈活強大的圖形能力，無縫融合VChart

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

Rspack

Rspack 是由字節跳動 Web Infra 團隊孵化的基於 Rust 語言開發的 Web 構建工具。它擁有高效能、相容 Webpack 生態、客製性強等多種優點，旨在打造高效能的前端工具鏈。

Rspack 的特點如下：

啟動速度極快：基於 Rust，計畫啟動速度極快，帶給你極致的開發體驗。

閃電般的 HMR：內建增量編譯機制，HMR 速度極快，完全勝任大型計畫的開發。

相容 webpack：針對 webpack 的架構和生態進行相容，無需從頭搭建生態。

內建常見構建能力：對 Typescript、JSX、CSS、CSS Modules、Sass 等提供開箱即用的支持。

預設生產最佳化：預設內建多種最佳化策略，如 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 使用者提供開箱即用的構建能力，使開發者能夠在零配置的情況下開發 web 計畫。同時，Rsbuild 提供一套語意化的構建配置，以降低 Rspack 配置的學習成本。

效能優先 ：Rsbuild 整合了社群中基於 Rust 的高效能工具，包括 Rspack 和 SWC ，以提供一流的構建速度和開發體驗。與基於 Webpack 的 Create React App 和 Vue CLI 等工具相比，Rsbuild 提供了 5 ~ 10 倍的構建效能，以及更輕量的依賴體積。

外掛程式生態 ：Rsbuild 內建一個輕量級的外掛程式系統，提供一系列高品質的官方外掛程式。此外，Rsbuild 相容大部份的 webpack 外掛程式和所有的 Rspack 外掛程式，這意味著你可以在 Rsbuild 中使用社群或公司內沈澱的現有外掛程式，而不需要重寫相關程式碼。

產物穩定 ：Rsbuild 設計時充分考慮了構建產物的穩定性，它的開發環境產物和生產構建產物具備較高的一致性，並自動完成語法降級和 polyfill 註入。Rsbuild 也提供外掛程式來進行型別檢查和產物語法檢查，以避免線上程式碼的品質問題和相容性問題。

框架無關 ：Rsbuild 不與前端 UI 框架耦合，並透過外掛程式來支持 React、Vue 3、Vue 2、Svelte、Solid、Lit 等框架，未來也計劃支持社群中更多的 UI 框架。

Rsbuild 的構建效能與原生 Rspack 處於同一水平。由於 Rsbuild 內建了更多開箱即用的功能，因此效能數據會略微低於 Rspack。

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

Rspress

Rspress 是基於 Rspack 的靜態站點生成器，依托React框架進行高效渲染。內建便捷的文件主題，助力迅速搭建專業文件站點。同時，支持個人化主題客製，滿足多樣化的靜態站需求，如部落格站、產品主頁等。

Rspress 的特性如下：

極高的編譯效能 ：核心編譯模組基於 Rust 前端工具鏈完成，帶來更加極致的開發體驗。

支持 MDX 編寫內容 ：MDX 是一種強大的內容編寫方式，你可以在 Markdown 中使用 React 元件。

內建全文搜尋 ：構建時自動為你生成全文搜尋索引，提供開箱即用的全文搜尋能力。

更簡單的 I18n 方案 ：透過內建的 I18n 方案，可以輕松的為文件或者元件提供多語言支持。

靜態站點生成 ：生產環境下，會自動構建為靜態 HTML 檔，你可以輕松的部署到任何地方。

提供多種自訂能力 ：透過其擴充套件機制，你可以輕松的擴充套件主題 UI 和構

以 Rspress 官網文件的內容為例，Rspress、Docusaurus 和 Nextra 三者的效能對比情況如下：

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

Rsdoctor

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

Rsdoctor 的特性如下：

編譯視覺化 ：Rsdoctor 將編譯行為及耗時進行視覺化展示，方便開發同學檢視構建問題。

多種分析能力 ：支持構建產物、構建分時析能力：

構建產物支持資源列表及模組依賴等。

構建分時析支持 Loader、Plugin、Resolver 構建過程分析。

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

構建規則支持重復包檢測及 ES Version Check 檢查等。

支持自訂規則 ：除了內建構建掃描規則外，還支持使用者根據 Rsdoctor 的構建數據添加自訂構建掃描規則。

框架無關 ：支持所有基於 Webpack 或 Rspack 構建的計畫。

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

Oxlint

Oxlint 是 OXC 工具集的其中一個工具，用於捕獲錯誤或無用的程式碼，作用和 ESLint 類似。現階段，oxlint 無意完全取代 ESLint ；當 ESLint 的緩慢成為工作流程中的瓶頸時，它可以作為增強功能。

OXC 是字節跳動出品的一個用 Rust 編寫的 JavaScript 高效能工具集合，該計畫的重點在於構建 JavaScript 的基本編譯器工具： 解析器、linter、格式化程式、轉譯器、壓縮器 和 解析器 。此外，OXC 還為 Rspack、Rolldown 和 Ezno 等新興 JavaScript 工具提供支持。

Oxlint 的特新如下：

比 ESLint 快 50 - 100 倍，並隨 CPU 核心數量不斷擴充套件。

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

支持.eslintignore。

支持ESLint 註釋禁用。

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

Mordern.js

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

Modern.js Framework：基於 React 的漸進式 Web 開發框架

Modern.js Module：易用、高效能的 npm 包開發方案

Modern.js 框架是一個基於 React 的漸進式 Web 開發框架。在字節跳動內部，將 Modern.js 封裝為上層框架，並支撐了數千個 Web 套用的研發。Modern.js 能為開發者提供極致的開發體驗，讓套用擁有更好的使用者體驗。

在開發 React 套用過程中，開發者通常需要去為某些功能去設計實作方案，或是使用其他的庫、框架來解決這些問題。Modern.js 支持 React 套用所需要的所有配置和工具，並內建額外的功能和最佳化。開發者可以使用 React 構建套用的 UI，然後逐步采用 Modern.js 的功能來解決常見的套用需求，如路由、數據獲取、狀態管理等。

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

Rust 構建 ：提供雙構建工具支持，輕松切換到 Rspack 構建工具，編譯飛快。

漸進式 ：使用最精簡的樣版建立計畫，透過生成器逐步開啟外掛程式功能，客製解決方案。

一體化 ：開發與生產環境 Web Server 唯一，CSR 和 SSR 同構開發，函式即介面的 API 服務呼叫。

開箱即用 ：預設 TS 支持，內建構建、ESLint、偵錯工具，全功能可測試。

周邊生態 ：自研狀態管理、微前端、模組打包、Monorepo 方案等周邊需求。

多種路由模式 ：包含自控路由、基於檔約定的路由（巢狀路由）等。

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

Garfish

Garfish 是一套微前端解決方案，主要用於解決現代 web 套用在前端生態繁榮和 web 套用日益復混成兩大背景下帶來的跨團隊協作、技術體系多樣化、web 套用日益復混成等問題：從架構層面出發將多個獨立交付的前端套用組成整體，這些前端套用能夠「 獨立開發 」、「 獨立測試 」、「 獨立部署 」，但是最終在使用者看來仍然是 內聚的單個產品 。

Garfish 的特性如下：

豐富高效的產品特征

Garfish 微前端子套用支持任意多種框架、技術體系接入

Garfish 微前端子套用支持「獨立開發」、「獨立測試」、「獨立部署」

強大的預載入能力，自動記錄使用者套用載入習慣增加載入權重，套用切換時間極大縮短

支持依賴共享，極大程度的降低整體的包體積，減少依賴的重復載入

支持數據收集，有效的感知到套用在執行期間的狀態

支持多例項能力，可在頁面中同時執行多個子套用提升了業務的拆分力度

提供了高效可用的偵錯工具，協助使用者在微前端模式下帶來的與傳統研發模式不同帶來的開發體驗問題

高擴充套件性的核心模組

透過 Loader 核心模組支持 HTML entry、JS entry 的支持，接入微前端套用簡單易用

Router 模組提供了路由驅動、主子路由隔離，使用者僅需要配置路由表套用即可完成自主的渲染和銷毀，使用者無需關心內部邏輯