Hello！umi

02-10

一、

umi（中文名：五米）是我目前的工作重點，正在全力開發中，從寫下第一行代碼開始算起已有數月。但從閑聊和郵件中發現不少人還不能準備地理解 umi 是啥、能做啥，於是趁著代碼寫累了，聊聊 umi 的一些情況。

umi 是工具嗎？是。但不僅僅是。我給 umi 的定位是開發框架，目前包含工具 + 路由，不包含數據和視圖。 所以 umi[工具 + 路由] + dva[數據] + antd(-mobile)[視圖]，很配哦。另外，umi 目前基於 React，不支持 Vue 和其他框架或者無框架的開發方式。

前面說的目前，其實是精力有限。

二、

大家可能會覺得，umi 有啥特別的，工具用 webpack + webpack-dev-server + babel + postcss + ... ，路由用 react-router 不就完了嗎？

這是上一代的使用方式，工具是工具，庫是庫，涇渭分明。而近來，我們發現工具和庫其實可以糅合在一起，工具也是框架的一部分。 通過約定、自動生成和解析代碼等方式來輔助開發，減少開發者要寫的代碼量。next.js 如此，umi 也如此，Compilers are the New Frameworks 。

三、

那麼，為啥要把路由層做進去？

路由即頁面，而頁面是構成應用的單位。接管了路由層，意味著更多的可能性，可以管控每個頁面的生成、切換、銷毀等。框架能做的事情多了，才更有存在的意義。

比如：

一鍵切換單頁多頁
運行時按需載入
開發時按需編譯
靜態 HTML 的生成
...

四、

所以，umi 有啥？我為什麼要用？

簡單來說，有以下 4 點：

?? 開箱即用
?? 極快
?? 多端
?? 開發友好

（沒了？?????? 先別走，聽我細細道來。。）

五、

開箱即用？那麼箱子里有啥？

我們來對比下，以 roadhog 初始化一個項目為例。

roadhog：

安裝構建工具依賴 roadhog
安裝類庫依賴，有 antd/antd-mobile、react + react-dom (或者 preact + preact-compat) 依賴
如果是 preact 項目，需要配 alias
如果需要路由，還需要安裝 react-router
安裝 babel 插件 babel-plugin-import，並按文檔配置，但可能配出錯（此塊諮詢非常多）
配置 webpack entry，打包多頁

umi:

安裝依賴 umi

只需一步，剩下的都不用做，因為在 umi 這個箱子里了。 不過很多東西雖然已經在了，但仍保留讓用戶選擇的權利，比如選擇 preact 還是 react，比如 antd(-mobile) 的版本，eslint 規則可覆蓋可 merge 等等。

六、

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 內置的路由代碼
...

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

七、

umi 就是為多端而生的，這裡的多端指的是 web + 各種容器，比如說我們需要同時把代碼部署到支付寶錢包的離線包和在線伺服器。

因為 umi 的產物是單頁應用，同時單獨訪問每個頁面又都有效，所以可以在容器模式里通過 ap 進行跳轉，在線模式下又通過路由跳轉。模式的自動切換，我們是藉助 bridgex 進行實現。

八、

umi 在開發體驗上也算得上是嘔心瀝血了。

首先，藉助 create-react-app 的開源庫，他的體驗是我們的底線。像是 redbox 顯示出錯信息、HMR、出錯點擊後跳轉到 IDE、ESLint 出錯提示等等。

此外，umi 還做了更多：

按需編譯（就算你有 100 個頁面，啟動也只需 5 秒）
所有的配置都能自動生效（熱更新或自重啟）
動態改 antd(-mobile) 主題
dev server 斷線重連
配置項校驗和提醒（同時出現在瀏覽器和控制台里）
配置文件語法錯誤提示到行
TypeScript 支持（語法提示、TSLint，連測試用例也支持用 ts 寫）
...

九、

什麼樣的項目適合用 umi ？

umi 是通用方案，我能說什麼類型的都適用嗎？?? 好吧，我說說什麼項目不適用吧。

非 React 項目
路由及其複雜，不能通過目錄路由約定實現的（後續會考慮配置類型的路由）
不在乎產出物性能的
不關注開發體驗的
...

十、

有點心動了，我該如何開始 Getting Started 呢？

先安裝 umi。

$ npm i umi -g# 檢查版本號$ umi -vumi@1.0.0-rc.1

然後新建目錄並進入。

$ mkdir myapp$ cd myapp

啟動 umi 的 dev 伺服器。

$ umi dev

新開個 terminal，在 pages 目錄下新建 page component 。

$ echo export default () => <div>Index Page</div> > pages/index.js

在瀏覽器中打開 http://localhost:8000/，你會看到 Index Page 。

簡單吧！

最後，umi@1.0 將於 2 月初正式發布，敬請關注。

相關鏈接：

umi@github
官網
文檔

（完）