釋出 umi 1.0 ???

雲謙發表於2018-02-26

釋出 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 1.0 ???

如果大家也遇到了，不妨試試 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 1.0 ???

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

最後

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

相關文章