使用 Angular 打造微前端架構的 ToB 企業級應用
阿新 • • 發佈：2019-11-27
這篇文章其實已經準備了11個月了，因為雖然我們年初就開始使用 Angular 的微前端架構，但是產品一直沒有正式釋出，無法通過生產環境實踐驗證可行性，11月16日我們的產品正式灰度釋出，所以是時候分享一下我們在使用 Angular 微前端這條路上的心得（踩過的坑）了額，希望和 Angular 社群一起成長一起進步，如果你對微前端有一定的瞭解並且已經在專案中嘗試了可以忽略前面的章節。
什麼是微前端
微前端這個詞這兩年很頻繁的出現在大家的視野中，最早提出這個概念的應該是在 ThoughtWork 的技術雷達，主要是把微服務的概念引入到了前端，讓前端的多個模組或者應用解耦，做到讓前端的子模組獨立倉儲，獨立執行，獨立部署。
那麼微前端和微服務到底有什麼區別呢？
下面這張圖是微服務的示意圖，微服務主要是業務模組按照一定的規則拆分，獨立開發，獨立部署，部署後通過 Nginx 做路由轉發，微服務的難點是需要考慮多個模組之間如何呼叫的問題，以及鑑權，日誌，甚至加入閘道器層
對於微服務來說，模組分開解藕基本就完事了，但是微前端不一樣，前端應用在執行時卻是一個整體，需要聚合，甚至還需要互動，通訊。
為什麼需要微前端（Micro Front-end）
- 系統模組增多，單體應用變得臃腫，開發效率低下，構建速度變慢；
- 人員擴大，需要多個前端團隊獨立開發，獨立部署，如果都在一個倉儲中開發會帶來一些列問題；
- 解決遺留系統，新模組需要使用最新的框架和技術，舊系統還繼續使用。
微前端的幾種方案對比
| 方式 | 描述 | 優點 | 缺點 | 難度係數 |
|---|---|---|---|---|
| 路由轉發 | 路由轉發嚴格意義上不屬於微前端，多個子模組之間共享一個導航即可 | 簡單，易實現 | 體驗不好，切換應用整個頁面重新整理 |