前言
Umi作為企業級前端應用架構，其可擴充，開箱即用的特性,可以大大提供前端的開發效率
【實際項目中】我發現還有很多可以優化的地方，于是基于umi3封裝了腳手架umits
閱讀文章之前建議先下載下傳項目跑起來項目位址，點我！！！
Umits【5分鐘】搭建大型項目
Umits基于umi3和umicli，已經做了編譯打包優化，建構優化，規範內建，工具內建，demo展示
使用者能夠快速介入開發，且隻需要關注業務開發，提高人效，同時代碼規範的內建一定程度保證了代碼品質
前端lint規範可以一定程度保證代碼品質，但是還有一些無法覆寫的，建議大家參考：
前端大型項目系列（一) - 前端代碼規範
umits使用
腳手架方式
Umits架構
Umits優化效果
描述
優化前
優化後
項目狀态
效果
體積
793kb
236kb
項目引用了lodash
減小70%
如何做到？
59kb
4.99KB(gzip)
用dayjs替換moment，同時解決moment國際化語言包大體積問題
至于線上沒有sourceMap會影響bug排查問題解決辦法：接入前端監控Sentry，Sentry支援單獨上傳SourceMap定位bug
Sentry文檔
Umits源碼
注釋檔案
1066ms
400ms
提速60%
恢複注釋
2500ms
1550ms
提速40%
umirc.ts
umirc.test.ts
umirc.pre.ts
umirc.pro.ts
針對不同環境，側重點不一樣，本地需要增量編譯速度更快，線上側重穩定和縮小打包體積
4套環境配置，請看項目源碼Umits項目源碼【已開源】歡迎一起完善
連結：(github.com/Master-H/um…)
工具函數封裝
封裝前
封裝後get、post、put、delte統一使用方式
入參都是（url,object)形式，使用方式統一友善，并且封裝好了接口報錯，實作快速定位，無需單獨處理
cancel函數,實作請求取消
取消效果如下
withCancelHoc，取消請求高階元件
上面代碼實作了，元件解除安裝預設取消目前頁面的請求，在某些場景有必要的，比如兩個Tab頁面，完全一樣，僅僅入參不一樣，就有可能因為因為網絡問題，導緻資料錯亂
TabA頁面：請求資料get1，資料還沒回回填，切換到TabB
TaB頁面：請求資料get2，由于網絡問題，get2先到回填資料，過了一會兒get1資料回填覆寫get2，就會導緻顯示出錯
代碼規範校驗
git cz、 Eslint、stylelint強制校驗,不符合要求，禁止送出
Umits産生背景
公司現狀
公司内部已經有5個大型項目基于umi開發且穩定運作，但沒有沉澱出一套基于實戰優化的腳手架
我思考一個問題，也問了其他人，從新搭建一個基于Umi項目，需要怎麼做，需要多久？
搭建新項目兩種做法：
第一種
第二種
存在痛點
針對上面痛點umits腳手架就誕生了,同時配合前端大型項目系列（一) - 前端代碼規範，5分鐘即可搭建高品質可維護的大型項目
demo教程
常用的：菜單配置化、工具函數，異步加載,高階元件都有demo案列，友善快速上手
總結
umits開發，并沒有涉及多複雜高深的技術，大部分都是基于經驗和總結，沉澱出的一個可以快速搭建高品質，友善上手的項目 所在一開始我也在猶豫，到底要不要做寫這個腳手架
但是後來思考一下：通過這個腳手架，我們可以将原來不複雜的事情變得更簡單，而且可以大大提升開發效率，項目品質，那麼Just do It !
項目umits已經開源
如果本文對你有用，點贊支援一下，不足的地方輕拍，歡迎一起進步！
最後預告一下，從0到1開發umi插件，已經在路上了