發布 umi 1.0 ??????

我為大家介紹一個新的 React 開發框架，umi，大家可以叫他五米。經過近半年的細緻打磨，37 個 beta 版，23 個 rc 版，以及內外部項目的檢驗之後，今天終於迎來了他的 1.0 版本。非常感謝期間把 umi 應用到項目、提 issue 和 PR 的同學們，沒有大家的支持 umi 不能走到今天。

我把日常開發時遇到的問題做了下記錄：

• 我希望我的項目即可以跑在支付寶（淘寶）容器里（多頁），又可以跑在普通瀏覽器里（單頁），有啥辦法嗎？
• 隨著項目越來越大，開發調試的啟動和熱更新時間越來越長。。
• 我所有的文件都打包在一起發布了，用戶反饋說網站打開很慢，有沒有辦法基於路由做按需載入？
• 連 iOS 都支持 PWA 了，我能否一鍵開啟讓我的項目更快？
• 據說 preact 又小又快，我如何一鍵開啟？
• 開發完之後部署又遇到問題，publicPath 和 basename 是啥？又如何解決？
• 我要部署到靜態伺服器或 cdn 上，能否幫我把 HTML 也生成出來，部署後就能跑？
• antd{,-mobile} 還要配 babel-plugin-import？那個 es 文件夾又是啥？
• ts、jest、babel 的配置好麻煩，而且配了這個又和另一個衝突，怎麼辦？
• 據說 webpack 的 tree-shake、scope-hoist、side effect 等能進一步減少文件大小，我如何最大化地利用？
• dva 的 model 一個個手寫載入好麻煩，還有 dva@2 之後 history 的 query 怎麼沒有了？

如果大家也遇到了，不妨試試 umi 。

umi 是什麼？

umi 是一個類 next.js 的專註性能的前端框架，他的優勢是：

• ?? 內置的大量性能優化
• ?? 多端，無縫支持容器和瀏覽器訪問
• ?? 類 webpack 的插件機制
• ?? 針對 antd 和 dva 有友好的支持

他基於以下約定：

• 頁面是 React 組件
• 在 pages 目錄下新增文件即可創建頁面

現在寫一個 React 應用你需要掌握很多知識，比如基於路由的 code-splitting、service-worker、webpack 配置、babel 配置、aslant 配置、性能優化、HMR、redbox、jest 測試、ts 配置、tree-shaking、scope-hoist、side-effect 等等。umi 把這些枯燥的事情全都做了，而你只需負責創造性的那部分。

性能

umi 在性能上做了很多努力，這些對於開發者是無感知的。「你只管寫業務代碼，我會負責性能」，並且隨著 umi 的迭代，我保證你的應用會越來越快。

主要有：

• PWA Support
• Tree Shake
• antd(-mobile) 啟用 ES Module
• Scope Hoist
• 公共文件的智能提取
• 頁面級的按需載入
• Inline Critical CSS
• 提供 umi/dynamic 和 import() 語法，分別用於懶載入組件和模塊
• 優化的 babel-preset-umi
• 靜態化的 SSR 處理
• link rel=preload
• hash 構建及服務端支持（雲鳳蝶）
• 通過 react-constant-elements 和 react-inline-elements 提升 rerender 性能
• 一鍵切換到 preact
• Progressive image loading
• 按需打包 umi 內置的路由代碼
• ...

優化點很多，有些關乎尺寸，有些關乎執行效率，有些關乎首屏時間，有些關乎用戶體驗，細聊的話，能說上幾個小時。大家根據關鍵字應該能猜個大概，這裡就不展開了。

插件機制

webpack 的生態好，和他靈活的插件機制有很大關係。umi 也類似，他就是個架子，把坑挖好，然後通過插件讓功能豐富起來，內部邏輯也是如此，由一個個插件組成。

插件能做什麼？基本什麼都能做，整個生命周期都能修改，包括配置、build、dev、html 和 臨時文件的生成等，已全部挖好坑。

詳見 umijs/umi#87。

antd{,-mobile}

為了更方便地使用 antd{,-mobile}，umi 對他們是直接內置的。所以 antd 和 antd-mobile 的組件可以直接用，然後 umi 會幫你做按需（基於 babel-plugin-import，使用 es 文件夾，開啟 tree-shaking）編譯。

當然，你也可以使用任意的其他組件庫。

詳見《使用 antd 或 antd-mobile》。

dva

dva 是包含路由的，所以和 umi 結合主要是把路由的部分交給 umi 來處理，讓 dva 回歸一個單純的數據流方案。我們通過插件 umi-plugin-dva 的方式實現，同樣開箱即用：

• 內置 dva，所以有一個 umi-plugin-dva 依賴就可以了
• 內置 dva-loading
• 自動註冊 models 目錄下的文件為 model
• history 的 query 回來了，不需要再手動用 query-string 進行處理
• ...

具體在 《umi + dva，完成用戶管理的 CURD 應用》 有詳細介紹。

上手使用

感興趣了嗎？下面我們為大家準備了一些項目上手的選擇：

• 可以跟著官網的《快速上手》文檔一步步熟悉 umi
• 如果開發 dva 應用，請安裝 dva-cli@next，並參考 《umi + dva，完成用戶管理的 CURD 應用》
• 如果要遷移 dva 項目到 umi + dva，可以參考 dva-hackernews!13，代碼量 +187，-327 足以說明 umi 帶來了什麼
• Demo: 高仿版 ele.me

社區

大家可以加釘釘群。

http://qr.dingtalk.com/action/joingroup?code=v1,k1,HNuN0obKAjc3L3A4g94kjZXU0WLUOaaWWzFvkHUBgiw= (二維碼自動識別)

也可以加微信群（群滿 100 人，加 sorryccpro 好友備註 umi 邀請加入）。

最後

umi 才剛剛起步，很希望你能一起來完善他，我們 Github 見！??