Umi 4 現(xiàn)在可以在 npm 上使用了！詳見：umijs.org。

距離上一篇文章和大家介紹 Umi 4 RC 的發(fā)布已過去 5 個月，這段時間我們基本都保持了一周一個 RC 的節(jié)奏，目前是 RC.24。同時基于 Umi 4 的螞蟻內網(wǎng)框架也已在 2 個月前發(fā)布，目前上線近 100 應用，Umi 4 的主體功能已非常穩(wěn)定，這也是第一次我們先在內網(wǎng)發(fā)布后在社區(qū)正式發(fā)布。

Umi 4 有什么新功能？

相比 Umi 2 到 Umi 3，Umi 4 有著更宏大的目標，開發(fā)時間也長了很多，同時帶來的變化是巨大的。

多構建引擎。 Umi 4 同時支持 Vite 和 Webpack 兩種構建方式，并盡量確保他們之間功能的一致性，讓開發(fā)者可以通過一行配置進行切換。可能有些同學會喜歡 dev 用 vite，build 用 webpack 這樣的組合。同時我們也在探索包括 ESMi 在內的其他構建方案的探索。

export default {
  vite: {}
}

默認快。 默認快是多維度的，我們通過 MFSU V3 + Webpack 5 緩存解 Dev 時編譯慢的問題；內網(wǎng)還有通過 Webpack 5 物理緩存和 CD 平臺結合解 Build 時編譯慢的問題；有使用 esbuild 做 js 和 css 的壓縮器、配置和 MOCK 文件的讀取、jest 的 transformer，讓除構建之外的其他環(huán)節(jié)也飛快；此外還有運行時速度也有考慮。

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 框架的對外版本，解我們自己的問題，同時也給社區(qū)另一個集中化框架的選擇，定位是中后臺框架，包含了中后臺相關的大量最佳實踐的插件。如果有定制需求，大家可以參考他來實現(xiàn)內網(wǎng)框架的定制，比如快手團隊就有基于 Umi 4 的框架定制，還有 Alita 也是基于 Umi 定制的面向移動端的框架。

$ npm i @umijs/max -D

React Router 6。 我們升級了路由方案到 React Router 6，喜憂參半。好消息是，React Router 6 是 Remix 的基礎庫，面向框架層做了很多優(yōu)化，路由實現(xiàn)層更優(yōu)雅，Umi 得以刪除大量路由渲染的代碼；壞消息是，帶來不少 Break Change，比如之前父路由渲染子路由用 children，得換成 。

- { props.children }
+ <Outlet />

支持 Vue。 Umi 4 中提供了 Vue 支持，記得我在 Umi 2 時畫過一張架構圖，其中就有 Vue 的一環(huán)，Umi 3 時也有過嘗試，但那會 Vue 3 還不太成熟，接入時遇到不少坑，這個坑今天總算是補上了。此功能由社區(qū)同學操刀，只需裝載一個 preset 即可切換到 Vue。

export default {
  presets: ['@umijs/preset-vue'],
};

默認最快的 CSR 請求。 項目構建快解的是 DX 問題，但同時也應該關注 UX。Client Loader 的目的是讓應用加載默認快，避免 React 項目經(jīng)典的 Render-Then-Fetch 的加載瀑布流問題。效果見下圖，示例項目的從 9s 降到 6s，這 6s 還是之前截的圖，上了 Preload 功能之后其實已更快。

export default function() {
  // 使用請求數(shù)據(jù)
  useClientLoaderData()
}
// 聲明請求
export function clientLoader() {}

白盒穩(wěn)定的 Lint。 Umi 4 里內置了我們精挑細選的 lint 規(guī)則，只有質量類不開可能會導致項目問題的規(guī)則，不包含風格類的規(guī)則，不包含 TypeScript 中 type-aware 類的規(guī)則，這類規(guī)則需要跑整個項目，會導致性能問題；同時，我們通過 @rushstack/eslint-pach 的方式鎖定了 config 里找 plugin 的規(guī)則，確保規(guī)則是長期穩(wěn)定的。

SSR。 Umi 4 重寫了 SSR 功能，目前此功能還在 beta 階段，請勿將其用于生產(chǎn)環(huán)境。Umi 4 的 SSR 有以下特點，1）server 代碼的構建基于 esbuild，所以極快，2）請求的處理類似 next.js 的 getServerSideProps 和 remix 的 loader，只在服務端跑，3）基于 react 18 的 suspense 和 renderToPipeableStream。實現(xiàn)原因，部署層目前僅實現(xiàn)了 vercel 的 adapter。這里有個簡單的 Todos 示例：https://test-vercel-chencheng.vercel.app/

export default {
  ssr: { platform: 'vercel' }
}

API 路由。 Umi 4 約定 src/api 目錄下存放的 Serverless Function 格式的文件即為 API 路由。這部分路由會打包成不同平臺支持的 Serverless Function 產(chǎn)物。場景比如帶 token 的 API 調用、動態(tài)數(shù)據(jù)源、基于 Notion API 的 Blog、Hackernews Clone 等等。基于此，Umi 能做的事的邊界就大了很多。不再只是寫寫中后臺，實現(xiàn)靜態(tài)頁面。

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.
?   創(chuàng)建頁面 -- Create a umi page by page name
    創(chuàng)建組件 -- .
    創(chuàng)建 mock 代碼 -- .
    創(chuàng)建 model 代碼 -- .
    啟用 Prettier -- Setup Prettier Configurations
    啟用 Jest -- Setup Jest Configuration
    啟用 E2E 測試 -- .
    啟用 Tailwind CSS -- Setup Tailwind CSS configuration
    啟用 SSR -- .
    啟用 Low Import 研發(fā)模式 -- .
    啟用權限方案 -- .
    啟用 Monaco 編輯器 -- .
    關閉 Dva 數(shù)據(jù)流 -- Configuration, Dependencies, and Model Files for Dva
    關閉 MFSU -- .
    切換為 Monorepo 項目 -- .
    切換 React 為 18 -- .
    切換 Antd 為 5 -- .

除此之外，我們還有非常多小而美的 DX 改進。

自動 https。 Umi 4 的 https dev server 的實現(xiàn)基于 mkcert，啟動過程中會基于 hosts 自動生成對應的 key 和 cert。開發(fā)者除了安裝前置的 mkcert，其他無需關心。

瀏覽器里的構建進度條。 如果首次構建沒有完成就在瀏覽器里打開，你會看到一個構建進度條，支持 webpack 多實例，支持 MFSU，完成初始構建后會自動跳轉到項目頁。

Terminal 中的日志。 有些開發(fā)者會更希望在命令行里看到項目里通過 console 輸出的日志，比如我。因為命令行日志不會隨著刷新而失效，大家可能都經(jīng)歷過一些一閃而過的頁面，想截屏都難；同時命令行日志還可以做物理存儲，導出后可以方便他人排查。此功能復刻自 https://github.com/patak-dev/vite-plugin-terminal。

import { terminal } from 'umi';
terminal.log(`Some info from the app`);

然后就可以在命令行中看到日志，

umi.js 產(chǎn)物調試。 不知大家是否會有這樣的需求，開發(fā)項目時發(fā)現(xiàn)一些比較復雜的問題時，需要調整構建產(chǎn)物的代碼。而 Bigfish 基于 webpack-dev-server，在 dev 階段所有文件都存于內存中，沒有物理文件的形式，并不方便直接修改后驗證效果。如果大家用 Umi 4，可以把 umi.js 等產(chǎn)物文件保存到項目根目錄，然后可以直接修改即生效。

項目級插件：plugin.ts。 為進一步降低項目中使用插件的門檻，Bigfish 4 中約定項目根目錄下的 plugin.ts 為插件，開發(fā)者可在此直接調用插件 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) => {});
  // 比如動態(tài)修改路由
  api.modifyRoutes((routes) => {});
}

deadCode 檢測。 項目中通常會有未使用的文件或導出，Umi 4 中通過配置 deadCode: {} 即可在 build 階段做檢測。如有發(fā)現(xiàn)，會有類似信息拋出。

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 (?o-°)?.

Umi UI 卷土重來？ 日常排查問題時，很多 Umi 框架的內部狀態(tài)是看不到的，比如插件啟用情況、appData 元數(shù)據(jù)、修改過的最終配置、修改過的最終 webpack 配置、修改過的最終路由、MFSU 的 module graph 信息等。Umi 4 提供了 /__umi/ 路由，dev 階段可用，效果見下圖。定位是開發(fā)輔助，大家也可以理解為是「丐版 Umi UI」。

我可以做什么？

Umi 4 發(fā)布之后，我可以做什么？

① 升級項目到 Umi 4
② 使用 Umi 4 開啟新項目
③ 參與貢獻
④ 訂閱 NewsLetter
⑤ 交流反饋群

Ant Design Pro 已完成到 Umi 4 的升級，不日將發(fā)布新版本。

除了使用 Umi，也非常歡迎大家參與貢獻 Umi。你的貢獻會直接影響到螞蟻 10000+ 應用和 3000+ 開發(fā)者，以及非常多社區(qū)的項目和同學。感興趣的同學可認領入門任務，1 個 PR 即可加入 Umi Contributor 群，和來自五湖四海的朋友們暢聊前沿技術。

我們新增了 NewsLetter 服務，如果大家希望即時了解 Umi 的最新進展，可在新官網(wǎng) umijs.org 右下角進行訂閱。

交流反饋群詳見「feedback.umijs.org」。

下一步？

Umi 4 發(fā)布后，Umi 團隊今年還會在以下方向發(fā)力。

① 2022 版的最佳實踐
② MFSU V4：更快的 MFSU
③ Father 4 和 dumi 2：新一代組件研發(fā)方案
④ ESMi：面向未來的 Bundless 構建方案
⑤ DX（開發(fā)體驗）和速度

技術方向有迭代才會更有生命力，今年最佳實踐會出一個新的版本，包含現(xiàn)有方案的改進，以及新的 monorepo、icon、請求、數(shù)據(jù)流等方向的最佳實踐；MFSU V4 已有思路，會在現(xiàn)有基礎上進一步提升其穩(wěn)定性和速度；Father 4 和 Dumi 2 是新一代的組件研發(fā)方案；面向未來的 ESMi Bundless 方案的性能問題已有曙光，預計也會在今年和大家見面；最后，DX 和速度（包括編譯時和運行時）是 Umi 一直會關注的點。

點擊“在看”，與好友共享！