Umi 4 現在可以在 npm 上使用了！詳見：umijs.org。
距離上一篇文章和大家介紹 Umi 4 RC 的發布已過去 5 個月，這段時間我們基本都保持了一周一個 RC 的節奏，目前是 RC.24。同時基於 Umi 4 的螞蟻內網框架也已在 2 個月前發布，目前上線近 100 應用，Umi 4 的主體功能已非常穩定，這也是第一次我們先在內網發布後在社區正式發布。
Umi 4 有什麼新功能？
相比 Umi 2 到 Umi 3，Umi 4 有着更宏大的目標，開發時間也長了很多，同時帶來的變化是巨大的。
多構建引擎。Umi 4 同時支持 Vite 和 Webpack 兩種構建方式，並儘量確保他們之間功能的一致性，讓開發者可以通過一行配置進行切換。可能有些同學會喜歡 dev 用 vite，build 用 webpack 這樣的組合。同時我們也在探索包括 ESMi 在內的其他構建方案的探索。
export default { vite: {}}
默認快。默認快是多維度的，我們通過 MFSU V3 + Webpack 5 緩存解 Dev 時編譯慢的問題；內網還有通過 Webpack 5 物理緩存和 CD 平台結合解 Build 時編譯慢的問題；有使用 esbuild 做 js 和 css 的壓縮器、配置和 MOCK 文件的讀取、jest 的 transformer，讓除構建之外的其他環節也飛快；此外還有運行時速度也有考慮。
MFSU V3。Umi 3 的 MFSU 大家可能多少有接觸過，雖然有用，但 DX 不夠好。用的時候會遇到一些坑，以至於很多同學都掌握了一項特殊技能，遇到問題時 rm -rf src/.umi。大家可能會遇到 monorepo 不支持、熱更新導致 Tab 卡死、請求多導致頁面打開慢、一些語法不支持的問題。以上問題在 MFSU V3 中全解！基於此，我們非常有信心地在 Umi 4 中默認開啟 MFSU 功能。當然，如果你不喜歡，會保留手動配置 mfsu: false 關閉的口子。同時，MFSU V3 還可脫離 Umi 獨立使用。
Umi Max。這是內部 Bigfish 框架的對外版本，解我們自己的問題，同時也給社區另一個集中化框架的選擇，定位是中後台框架，包含了中後台相關的大量最佳實踐的插件。如果有定製需求，大家可以參考他來實現內網框架的定製，比如快手團隊就有基於 Umi 4 的框架定製，還有 Alita 也是基於 Umi 定製的面向移動端的框架。
$ npm i @umijs/max -D
React Router 6。我們升級了路由方案到 React Router 6，喜憂參半。好消息是，React Router 6 是 Remix 的基礎庫，面向框架層做了很多優化，路由實現層更優雅，Umi 得以刪除大量路由渲染的代碼；壞消息是，帶來不少 Break Change，比如之前父路由渲染子路由用 children，得換成。
- { props.children }+ <Outlet />
支持 Vue。Umi 4 中提供了 Vue 支持，記得我在 Umi 2 時畫過一張架構圖，其中就有 Vue 的一環，Umi 3 時也有過嘗試，但那會 Vue 3 還不太成熟，接入時遇到不少坑，這個坑今天總算是補上了。此功能由社區同學操刀，只需裝載一個 preset 即可切換到 Vue。
export default { presets: ['@umijs/preset-vue'],};
默認最快的 CSR 請求。項目構建快解的是 DX 問題，但同時也應該關注 UX。Client Loader 的目的是讓應用加載默認快，避免 React 項目經典的 Render-Then-Fetch 的加載瀑布流問題。效果見下圖，示例項目的從 9s 降到 6s，這 6s 還是之前截的圖，上了 Preload 功能之後其實已更快。
export default function() { // 使用請求數據 useClientLoaderData()}// 聲明請求export function clientLoader() {}
白盒穩定的 Lint。Umi 4 里內置了我們精挑細選的 lint 規則，只有質量類不開可能會導致項目問題的規則，不包含風格類的規則，不包含 TypeScript 中 type-aware 類的規則，這類規則需要跑整個項目，會導致性能問題；同時，我們通過 @rushstack/eslint-pach 的方式鎖定了 config 里找 plugin 的規則，確保規則是長期穩定的。
SSR。Umi 4 重寫了 SSR 功能，目前此功能還在 beta 階段，請勿將其用於生產環境。Umi 4 的 SSR 有以下特點，1）server 代碼的構建基於 esbuild，所以極快，2）請求的處理類似 next.js 的 getServerSideProps 和 remix 的 loader，只在服務端跑，3）基於 react 18 的 suspense 和 renderToPipeableStream。實現原因，部署層目前僅實現了 vercel 的 adapter。這裡有個簡單的 Todos 示例：https://test-vercel-chencheng.vercel.app/
export default { ssr: { platform: 'vercel' }}
API 路由。Umi 4 約定 src/api 目錄下存放的 Serverless Function 格式的文件即為 API 路由。這部分路由會打包成不同平台支持的 Serverless Function 產物。場景比如帶 token 的 API 調用、動態數據源、基於 Notion API 的 Blog、Hackernews Clone 等等。基於此，Umi 能做的事的邊界就大了很多。不再只是寫寫中後台，實現靜態頁面。
export default { apiRoute: {},}
微生成器。此概念來自 Modern.js。Modern.js 引入很多新概念，其中「微生成器」還是非常貼切的。他包含兩個功能，1）小型腳手架，2）功能的開啟與關閉。Umi 3 雖然也有 generate 命令，但只包含功能 1。Umi 4 拓展了下 generate（alias 為 g）命令。除了支持更多類型的小型腳手架生成，還支持功能的開啟與關閉，以及比如 Monorepo、react 和 antd 版本等的功能切換。
$ npx umi g? Pick generator type › - Use arrow-keys. Return to submit.❯ 創建頁面 -- Create a umi page by page name 創建組件 -- . 創建 mock 代碼 -- . 創建 model 代碼 -- . 啟用 Prettier -- Setup Prettier Configurations 啟用 Jest -- Setup Jest Configuration 啟用 E2E 測試 -- . 啟用 Tailwind CSS -- Setup Tailwind CSS configuration 啟用 SSR -- . 啟用 Low Import 研發模式 -- . 啟用權限方案 -- . 啟用 Monaco 編輯器 -- . 關閉 Dva 數據流 -- Configuration, Dependencies, and Model Files for Dva 關閉 MFSU -- . 切換為 Monorepo 項目 -- . 切換 React 為 18 -- . 切換 Antd 為 5 -- .
除此之外，我們還有非常多小而美的 DX 改進。
自動 https。Umi 4 的 https dev server 的實現基於 mkcert，啟動過程中會基於 hosts 自動生成對應的 key 和 cert。開發者除了安裝前置的 mkcert，其他無需關心。
瀏覽器里的構建進度條。如果首次構建沒有完成就在瀏覽器里打開，你會看到一個構建進度條，支持 webpack 多實例，支持 MFSU，完成初始構建後會自動跳轉到項目頁。
Terminal 中的日誌。有些開發者會更希望在命令行里看到項目里通過 console 輸出的日誌，比如我。因為命令行日誌不會隨着刷新而失效，大家可能都經歷過一些一閃而過的頁面，想截屏都難；同時命令行日誌還可以做物理存儲，導出後可以方便他人排查。此功能復刻自 https://github.com/patak-dev/vite-plugin-terminal。
import { terminal } from 'umi';terminal.log(`Some info from the app`);
然後就可以在命令行中看到日誌，
umi.js 產物調試。不知大家是否會有這樣的需求，開發項目時發現一些比較複雜的問題時，需要調整構建產物的代碼。而 Bigfish 基於 webpack-dev-server，在 dev 階段所有文件都存於內存中，沒有物理文件的形式，並不方便直接修改後驗證效果。如果大家用 Umi 4，可以把 umi.js 等產物文件保存到項目根目錄，然後可以直接修改即生效。
項目級插件：plugin.ts。為進一步降低項目中使用插件的門檻，Bigfish 4 中約定項目根目錄下的 plugin.ts 為插件，開發者可在此直接調用插件 API，無需註冊，支持 TypeScript。有了這個文件，我們可以在項目級做很多事。比如，
import { IApi } from 'umi';export default (api: IApi) => { // 比如修改 HTML api.modifyHTML($ => { return $; }); // 比如在入口的 umi.ts 中添加代碼 api.addEntryCodeAhead(() => [`console.log('entry code ahead')`]); api.addEntryCode(() => [`console.log('entry code')`]); // 比如在構建完成時做額外的事 api.onBuildComplete((opts) => {}); // 比如在啟動階段做額外的事 api.onStart((opts) => {}); // 比如校驗每個 JavaScript/TypeScript 代碼 api.onCheckCode((args) => {}); // 比如動態修改路由 api.modifyRoutes((routes) => {});}
deadCode 檢測。項目中通常會有未使用的文件或導出，Umi 4 中通過配置 deadCode: {} 即可在 build 階段做檢測。如有發現，會有類似信息拋出。
Warning: There are 3 unused files: 1. /mock/a.ts 2. /mock/b.ts 3. /pages/index.module.less Please be careful if you want to remove them (¬º-°)¬.
Umi UI 捲土重來？日常排查問題時，很多 Umi 框架的內部狀態是看不到的，比如插件啟用情況、appData 元數據、修改過的最終配置、修改過的最終 webpack 配置、修改過的最終路由、MFSU 的 module graph 信息等。Umi 4 提供了 /__umi/ 路由，dev 階段可用，效果見下圖。定位是開發輔助，大家也可以理解為是「丐版 Umi UI」。
我可以做什麼？
Umi 4 發布之後，我可以做什麼？
① 升級項目到 Umi 4② 使用 Umi 4 開啟新項目③ 參與貢獻④ 訂閱 NewsLetter⑤ 交流反饋群
Ant Design Pro 已完成到 Umi 4 的升級，不日將發布新版本。
除了使用 Umi，也非常歡迎大家參與貢獻 Umi。你的貢獻會直接影響到螞蟻 10000+ 應用和 3000+ 開發者，以及非常多社區的項目和同學。感興趣的同學可認領入門任務，1 個 PR 即可加入 Umi Contributor 群，和來自五湖四海的朋友們暢聊前沿技術。
我們新增了 NewsLetter 服務，如果大家希望即時了解 Umi 的最新進展，可在新官網 umijs.org 右下角進行訂閱。
交流反饋群詳見「feedback.umijs.org」。
下一步？
Umi 4 發布後，Umi 團隊今年還會在以下方向發力。
① 2022 版的最佳實踐② MFSU V4：更快的 MFSU③ Father 4 和 dumi 2：新一代組件研發方案④ ESMi：面向未來的 Bundless 構建方案⑤ DX（開發體驗）和速度
技術方向有迭代才會更有生命力，今年最佳實踐會出一個新的版本，包含現有方案的改進，以及新的 monorepo、icon、請求、數據流等方向的最佳實踐；MFSU V4 已有思路，會在現有基礎上進一步提升其穩定性和速度；Father 4 和 Dumi 2 是新一代的組件研發方案；面向未來的 ESMi Bundless 方案的性能問題已有曙光，預計也會在今年和大家見面；最後，DX 和速度（包括編譯時和運行時）是 Umi 一直會關注的點。
點擊「在看」，與好友共享！
留言列表