大家好，我是若川。感謝大家一年以來的支持和陪伴。這一年疫情反復，年底應該有由于疫情不能回家的小伙伴。在這里先祝福大家，新年快樂。
本打算今天不發文，但看到這篇覺得不錯，就發一下。
大家好，Umi 4 經過幾個月的開發，終于要和大家見面了。相比 Umi 2 到 3，3 到 4 的變化是巨大的，開發時間也更長，但我們盡量把對于開發者的影響降低到最小。按捺住激動的心情，在此先和大家分享下都有哪些變化。
🎉 新官網和文檔
🚀 MFSU V3 & 默認開啟
🎭 雙構建引擎和 ESMi
🕸 Webpack 5
?🏾?♂? React Router 6 & 新路由
🐹 最佳實踐迭代
🛡? 依賴預打包
🤺 Umi Pro
🐛 Low Import 研發模式
?? 強約束功能集成
🎈 Import All From Umi 迭代
🍀 srcTranspiler 和 depTranspiler
🌼 jsMinifier 和 cssMinifier
🌸 應用元數據
?? 微生成器
🧪 貼心小改進
新官網和文檔。下圖是新官網的首頁，包括重新梳理的文檔、信息結構、以及新寫的文檔插件。目前包含基礎的配置、API、升級和快速上手等基礎文檔，剩余文檔還在緊張編寫中。有個變化是之前插件的文檔集成到 Umi 官網中，成為 Umi Pro 的一部分，之后無需跳轉。
MFSU V3 & 默認開啟。MFSU 更新了他的第三個大版本，如果你有用 Umi 3 內置的 MFSU 并遇到問題，建議重新嘗試，這個版本有很多改進，解決基本所有之前可能會遇到的詭異問題，并且編譯速度和頁面打開速度都更快。昨天我還有寫一篇《比 Vite 更快的 MFSU》。基于此，我們自信地把這個功能在 Umi 4 中默認開啟。還有值得一提的是，MFSU 可脫離 Umi 運行。
雙構建引擎和 ESMi。Umi 4 提供 Vite 和 Webpack 兩種構建模式供開發者選擇，并盡可能保證他們之間功能的一致性，可能有些同學會喜歡 dev 用 vite，build 用 webpack 這樣的組合。同時基于 Vite 模式實現了 ESMi 的 Client 端，ESMi 依賴服務端，在外網還無法使用。
Webpack 5。Umi 4 默認使用 webpack 5 并開啟物理緩存。
React Router 6 & 新路由。Umi 4 的路由基于 React Router 6 實現，個人非常喜歡這個版本，因為 Remix 的原因，React Router 6 從設計上考慮了配置式路由的場景，讓我得以刪除大量 Umi 3 中關于路由渲染的代碼。同時基于此，設計了新的路由結構，方便擴展和在未來處理路由的約定式請求。
最佳實踐迭代。針對之前 umijs/plugins 倉庫中的插件進行了重寫、升級，并整合到主倉庫。這么做是為了更好的頂層設計，讓官方插件之間的風格更一致。
依賴預打包。由于服務企業內部，安全和穩定是其中很重要點，加上最近 colors 和 faker.js 鬧得社區沸沸揚揚，誰都不希望睡一覺醒來，自己負責的業務掛了，還背個故障。Umi 4 接著 Umi 3 繼續做依賴預打包的事，并且更徹底，不僅是 node 側的依賴，部分運行時的依賴也會做鎖定，比如 core-js 和 @babel/runtime。
Umi Pro。Umi Pro 是內部 Bigfish 框架的對外版本，解我們自己的問題，同時也給社區另一個集中化框架的選擇。
Low Import 研發模式。這是 Umi 4 的試驗性功能之一，目前已開發完成，解的問題是讓開發者少些或不寫 import 語句。項目中大量的 import 其實都可以通過工程化的方式自動處理。Umi 4 里通過 lowImport: {} 開啟，然后就可以無 import 直接用路由相關的 Link、useLocation 等，數據流相關的 connect、useModel，antd 組件 Button、Calendar 等，以及其他更多。
強約束功能集成。Umi 4 提供 API 讓強約束和代碼校驗變得非常容易。API 包括 api.onCheck、api.onCheckConfig、api.onCheckPkgJSON 和 api.onCheckCode，顧名思義，非常好理解他們分別是干嘛的，可以分別對依賴類、代碼類和配置類的內容做校驗和卡點，適用于團隊。
Import All From Umi 迭代。這是兩年前 Umi 3 加的功能，最近發現 Remix、prisma、vitekit 等框架和工具都有類似實現。這種方式有好有壞。好處是通過 umi 將大量依賴管理起來，用戶無需手動安裝。壞處是更黑盒，同時有點 Hack。Umi 4 不能解其黑盒問題，但解了 Hack 問題，讓實現無副作用，可以和 Vite、MFSU 等方案無縫結合。
srcTranspiler 和 depTranspiler。提供針對源碼編譯和依賴編譯更多選擇。源碼編譯可選 babel、swc 和 esbuild，目前沒有銀彈，合適場景做合適的選擇。比如 swc 由于不支持 top level await，和 mfsu 會有些沖突，但他適用于 build，因為有補丁可以兼容到 es7；比如 esbuild 適用于 dev，因為快。數據方面以 ant-design-pro 項目為例，源碼編譯用 esbuild 相比 babel 在 M1 2020 無緩存情況下會快 3s。
jsMinifier 和 cssMinifier。js 壓縮和 css 壓縮 Umi 4 默認都用的 esbuild，因為快。同時也提供更多選擇，js 壓縮還支持 swc、terser 和 uglifyJs，css 壓縮還支持 cssnano。
應用元數據。Umi 4 有通過 api.appData 收集各種項目數據，從配置、路由、package.json、tsconfig.json、npmClient 到數據流、國際化、antd 用了哪個版本、react 和 react-dom 的版本等，應有盡有，這對于插件開發者會非常實用，也適用于有統計需求的場景。
微生成器。沒錯，就是 modern.js 的微生成器，這功能從 modern.js 里學習了不少，名字就不改了。舉個例子，比如 prettier 功能，可能不是每個項目都需要，就比較適用于微生成器，按需啟用、添加配置、安裝依賴。
貼心小改進。還有不少貼心小改進，舉兩個例子。1 是項目中新增 plugin.ts，會默認作為插件添加，方便項目進行一些插件級的擴展；2 是調試問題時通常需要修改編譯后的代碼看看有沒有改對，你把 umi.js 下下來存到項目根目錄，umi 會優先使用這份代碼。
以上是 Umi 4 目前的新功能。
除此之外，還有一些計劃在正式版發布之前做的事情。包括 api route、umi server and adapter、route loader、穩定的 lint、更多命令、組件研發 father 4、文檔工具 dumi 2 等，會在之后的 RC 版本中與大家見面。
最后，歡迎大家嘗鮮 Umi 4，官方文檔有準備 ant-design-pro 從 Umi 3 到 4 的升級文檔。
·················?若川簡介?·················
你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。
識別上方二維碼加我微信、拉你進源碼共讀群
今日話題
略。分享、收藏、點贊、在看我的文章就是對我最大的支持～
