大家好，我是Echa。
好消息，2023年3月16号位元組跳動 Web Infra 團隊宣布 Modern.js v2 正式釋出。位元組跳動Web Infra 團隊從2021年10月27号發起 Modern.js 正式開源起，距離現在開發維護疊代已經505天時間。Web Infra 團隊 神一般的存在，非常了不起，也是咱們國人自主研發的Web 架構，也是國人的驕傲，好架構必須分享給大家。下面給大家詳細介紹 Modern.js 和 v2 版本更新内容。在這篇文章裡，我們會和大家一起聊一聊 Modern.js 在過去一年多時間裡的變化。
全文大綱
- Modern.js 介紹
- Modern.js 三個解決方案
- 回顧2022 Modern.js 更新内容
- Modern.js v2 正式釋出更新内容
Modern.js 介紹
官網：https://modernjs.dev/
Github：https://github.com/web-infra-dev/modern.js
Modem.js 的由來
不知道關注小編的粉絲們，還記得2021年10 月 27 日舉辦的稀土開發者大會上，位元組跳動 Web Infra 正式發起 Modern.js 開源項目，希望推動現代 Web 開發範式的普及，發展完整的現代 Web 工程體系，突破應用開發效率的瓶頸。
傳統的 Web 開發是“伺服器端為中心”的開發範式，近年來，已經越來越多的轉移到“用戶端為中心”的現代 Web 開發範式，開發門檻不斷降低，效率不斷提升。産品研發可以更少的關注底層技術細節，更專注在使用者需求和市場價值上。而傳統的前端技術棧難以解決“開發者體驗”和“使用者體驗”的沖突，越來越成為提效的瓶頸。
位元組跳動 Web Infra 一直在位元組内部支援 “現代 Web 開發” 的實踐，發展了完整的位元組前端研發體系，Modern.js 項目就是來自其中的現代 Web 工程體系。
Modern.js 将以往海量的前端工程模闆，收斂成三大工程類型：應用、子產品、Monorepo，每種類型都隻需要同一套模闆、同一套工程方案。其中“應用”工程方案又被稱作 “MWA”（現代 Web 應用），基于一套用戶端為中心、前後端一體化的應用開發架構，實作了強大的 “Universal App” 模式。即一套應用源代碼，能同時在用戶端、伺服器端、編譯時裡運作，能以靜态 Web（SPA、MPA、SSG）、動态 Web（SSR、SPR）、微前端、桌面應用、小程式等不同模式運作，同時支援低門檻、全功能、一體化的 BFF （針對特定界面的伺服器端 API）開發。
“MWA” 是 Serverless 優先的，内置産品級 Web Server。它能在開發、調試、部署、運作等所有環節做到盡可能“無伺服器化”，同時確定“開發者體驗”和“使用者體驗”，讓更多“前端開發者”成為獨立、全面的“應用開發者”和“産品開發者”。Modern.js 也原生支援微前端、Electron 桌面應用、Monorepo 等研發場景。
Modern.js 從最初就設計為 ESM 優先，在“編譯時”環節能更好的支援 Unbundled 開發、非 JS 語言的編譯器等第三代 JS 工具的發展。在“運作時”環節，Modern.js 提供開箱即用的應用架構，提供在“應用”工程方案、“子產品”工程方案裡都能無縫使用的 Runtime API 标準庫。在“編寫時”環節，Modern.js 鼓勵盡可能讓機器來生成源碼的智能程式設計。位元組跳動 Web Infra 負責人表示：“希望 Modern.js 項目能幫助業界更快更好的發展基于前端技術的成熟 GUI 應用軟體研發體系，讓前端技術棧的開發者們能夠‘責任越大，能力越強’。”
Modern.js 是位元組跳動 Web 工程體系的開源版本，它提供多個解決方案，來幫助開發者解決不同研發場景下的問題。
生态
Modern.js 生态提供了以下解決方案：
- Rspack: 基于 Rust 的高性能子產品打包工具。Rspack 詳細介紹請見：Rspack v0.1.0 正式釋出
- Garfish: 一站式微前端解決方案。
- Reduck: 基于 Redux 的狀态管理庫。
Modern.js 官網
Modern.js 四個解決方案
作為 Modern.js 工程體系的一部分，以上每個解決方案都可以被單獨使用，并且各自部署了獨立的文檔站點。開發者可以按需選擇其中的一個或多個解決方案來使用。
Modern.js 是一個 Web 工程體系，包含以下解決方案：
- Modern.js Framework: 基于 React 的漸進式 Web 開發架構。
- Modern.js Module: 簡單、高性能的 npm 包開發方案。
- Modern.js Doc: 現代文檔站解決方案。
- Modern.js Builder: 面向 Web 開發場景的建構引擎。
快速上手
- 使用 Modern.js Framework 來開發一個 Web 應用。
- 使用 Modern.js Module 來開發一個 npm 包。
- 使用 Modern.js Doc 來開發一個文檔站點。
- 使用 Modern.js Builder 來為你的 Web 架構提供建構能力。
Modern.js 架構
- 開箱即用的雙建構工具支援：Webpack、Rspack(已支援在 Rspack 模式下使用架構的 70% 功能和配置項，幾分鐘即可平滑遷移)
- 漸進式設計：可以通過 modern new 按需開啟功能，支援不同規模項目開發訴求
- 插件系統：包括 CLI 插件、Server 插件、Runtime 插件
- 嵌套路由：基于 React Router v6，進行了資源加載、共享布局和資料擷取方面的優化
- 支援流式渲染（Streaming SSR ）
如下圖：
Modern.js 架構 詳細介紹
Modern.js Module
- 建構：基于 esbuild + swc，并擴充插件機制。支援 bundle/bundleless，支援對類型檔案的 bundle 處理和檔案裡的别名處理
- 調試：基于 Storybook
- 測試：內建 Jest
- 版本管理：基于 Changeset
- 擴充能力：包含豐富 Hooks 的插件機制，支援擴充調試能力
如下圖：
Modern.js Module Tools 子產品工具解決方案
Modern.js Doc
- 基于 Rspack 建構
- 支援 MDX
- 全文搜尋：基于 FlexSearch
- 國際化
- 自定義主題
- 插件機制
如下圖：
Modern.js Builder
- Rust 建構：輕松切換到 Rspack 建構工具，編譯飛快。
- 深度優化：自動優化靜态資源，産物性能有保障。
- 開箱即用：基于位元組跳動數千個應用的實踐經驗，各種能力開箱即用。
- 易于配置：以零配置啟動，然後一切皆可配置。
- 可插拔：自帶輕量級插件系統，滿足你的定制訴求。
- 多種産物：支援建構出運作在 Node.js、Web Worker 等環境的産物。
如下圖：
回顧2022更新内容
2022 年 7 ~ 8 月更新内容：
Modern.js 7 ~ 8 月的最新版本為 v1.17.0，本雙月的主要更新有：
- 支援 React 18：完成架構和插件對 React 18 的适配。
- 包版本統一：Modern.js 所有組成包的版本号進行統一，提供更新指令。
- 子產品工程支援 bundle 建構：子產品工程類型的項目，支援對産物做 bundle 建構。
- Reduck v1.1：釋出 Reduck v1.1，使用文檔全面更新。
- 其他更新：新增指令和配置、新增 afterLambdaRegisted hook。用于使用 Express 架構時，在 BFF 函數注冊路由之後執行。可以用來添加錯誤處理邏輯，新增路由等。SSR 産物添加 Sourcemap，優化服務端調試 SSR 代碼的體驗。Web Server 支援按入口設定響應頭，使用方式請參考文檔。
2022 年 9 ~ 10 月更新内容：
Modern.js 9 ~ 10 月的最新版本為 v1.21.0，本雙月的主要更新有：
- 支援 pnpm v7：完成架構對 pnpm v7 的支援。
- 服務端增加 Typescript 作為 ts 檔案編譯器。
- 其他更新：配置更新、底層依賴更新、
功能預告
Modern.js 團隊目前除了正常開發維護 Modern 1.0 外，正在全力打造 Modern.js 2.0。
Modern.js 2.0 将帶來新的建構體系，除了支援使用穩定的 webpack 進行建構，還即将支援将底層建構工具切換為自研的 Rust bundler，提供更流暢的編譯速度。
Modern.js 2.0 将基于 React-Router v6 推薦嵌套路由作為新的路由方式；将預設支援 React 18 并提供 Streaming SSR 的支援，使使用者體驗更加流暢。
Modern.js v2 正式釋出更新内容：支援 Rspack 建構
不認識 Rspack 是基于rust 研發的打包工具，請詳見：Rspack v0.1.0 正式釋出
Modern.js 是位元組跳動 Web Infra 團隊開源的一套 Web 工程體系。在開源以來的一年多時間裡，Modern.js 保持穩定的疊代節奏，數十位貢獻者參與了開發，累計送出 2000+ 個 Pull Request，并支援了 Rspack 建構、嵌套路由、流式渲染等新特性。
背景
首先介紹一下我們為什麼要做 Modern.js v2 版本，主要有以下幾個原因：
- 下沉更多能力：在位元組跳動内部，Web Infra 團隊整合了多個 Web 開發架構和解決方案，收斂技術棧，将通用能力下沉到底層的 Modern.js 工程體系中。
- 擁抱 Rust 生态：随着社群中更多的前端工具鍊基于 Rust 重寫，Modern.js 正在積極擁抱這一變化，将底層工具逐漸替換為 Rust 實作。
- 底層依賴更新：為了對 Modern.js 的底層依賴進行大版本更新，包括 React v18、React Router v6 等，進而引入流式渲染、嵌套路由等新能力。
- 定位調整：從 2021 年開源以來，社群中的夥伴們給予我們很多有價值的回報，這幫助我們對 Modern.js 的定位和架構進行更多地思考。
以上因素促使我們完成了 Modern.js v2 版本。
定位
在 v2 版本中，我們重新明确了 Modern.js 的定位：Modern.js 是位元組跳動 Web 工程體系的開源版本，它提供多個解決方案，來幫助開發者解決不同研發場景下的問題。
Modern.js 解決方案
作為 Modern.js 工程體系的一部分，以上每個解決方案都可以被單獨使用，并且各自部署了獨立的文檔站點。開發者可以按需選擇其中的一個或多個解決方案來使用。
在代碼層面，這三個解決方案按照統一的研發規範疊代，并複用同一套插件機制，是以，它們提供的研發體驗也較為一緻。大家如果對内部實作感興趣，可以在 GitHub 上的 Modern.js 倉庫 中找到它們的源代碼。
Rspack 構模組化式
Modern.js v2 提供開箱即用的雙建構工具支援，開發者可以在成熟的 Webpack 和更快的 Rspack 之間進行切換。大家對 Rspack 可能還不太了解，Rspack 是由位元組跳動開源的 Web 建構工具，基于 Rust 語言開發，具有高性能、可定制、相容 Webpack 生态等特性。
Rspack Logo
相較于 Webpack，Rspack 的建構性能有明顯提升，除了 Rust 帶來的語言優勢，這也來自于它的并行架構和增量編譯等特性。經過 benchmark 驗證，Rspack 可以給 Modern.js 項目帶來 5 ～ 10 倍編譯性能的提升。
Rspack Benchmark
Modern.js 已支援在 Rspack 模式下使用架構的 70% 功能和配置項，包括伺服器端渲染（SSR），靜态站點生成（SSG）、嵌套路由、CSS Modules 和 Tailwind CSS 等功能。除了功能，Modern.js 在 Rspack 模式下的配置項也與 Webpack 模式基本一緻，在我們的實際驗證中，一個小型項目花幾分鐘就可以平滑切換到 Rspack 模式。
目前，Rspack 項目以及 Modern.js 的 Rspack 模式仍在快速疊代中。在未來幾個月内，我們将逐漸對齊 Webpack 模式和 Rspack 模式的絕大多數功能和配置，使更多項目能從 Webpack 平滑地過渡到 Rspack。
今天針對Modern.js v2 正式釋出 就詳細介紹到這裡。
最後
一台電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;
一 個靈感,一段程式,推動科技進步,促進社會發展。
創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，後面會不定期更新幹貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。