微前端 MicroFrontend 您有聽過嗎？未來三年可能會開始經常出現，來個淺顯易懂介紹

先用三句話說明微前端 MicroFrontend

• 跳轉系統功能不用換頁
• 多個系統可以各團隊獨立運作開發
• 各系統自行部署不衝突

照慣例來個前言

隨著時代演進，組織的數位化程度必定越來越高，各種任務流程變成系統將是常態。組織規模擴大，意味著您將仰賴更多系統，各系統之間需要換頁頻繁切換，甚至是重新登入帳號密碼，這樣的體驗會引起使用者反感，微前端 MicroFrontend 就能解決這個痛點。

解決使用者痛點之外也解決開發者痛點，系統拆分給各團隊獨立運作，彼此不會互相衝突，規模越大越能體現優勢。

什麼是微前端 MicroFrontend

建構功能豐富且強大的瀏覽器應用，毫無疑問是現在進行式，比方說最近火紅的 Figma 或 Notion，完全顛覆對於瀏覽器應用的想像。隨著時間推移發展，前端會持續增長，當架構越來越大、越來越複雜，維護難度程度就會倍數成長。

網站或網頁系統，拆分成多個獨立功能，並且每個功能都由獨立團隊運作，就能夠承受倍數艱難的挑戰。假設您經營的電商平台，除了購物本身，還有社群、小遊戲、贈禮，這些功能如果都能夠各團隊獨立開發，誰也不會干涉誰、不會互相卡進度，是不是挺理想的。

微前端 MicroFrontend 就能夠做到，將瀏覽器應用由「單體應用」轉變為「多個小型前端應用組合」，每個前端應用可以獨立開發、部署，讓團隊專注自己關心和擅長的領域。這些前端應用可以共享同個外框，實現不換頁感覺，通常外框是指 HEADER 或 SideBar，可以想像成大容器。

大家必須綁在一起。

我做我的、你做你的、互相不衝突。

微前端 MicroFrontend 優勢有哪些

1. 獨立部署

   各系統功能可以獨立部署，無需顧慮開發衝突。

2. 高容錯度

   單個系統功能發生錯誤，不會影響其他系統功能。

3. 容易擴展

   每個系統功能可以依照獨立團隊自己的節奏擴展，更便於資源配置。

4. 降低複雜度

   即使架構發展越來越大，系統功能之間也不會互相衝突，各獨立團隊可自行決定維護方式，降低整體維護複雜度。

5. 同時容納多種前端語言

   各系統功能可以使用不同的程式語言，像是 Vue、React、Angular，不會互相影響。

微前端 MicroFrontend 框架 MicroAPP

其實眾人熟知的 iframe 也是一種微前端，Html 或部落格編輯器常見的嵌入 Youtube 及 Google Forms 就是 iframe，頁面上配置一個框框嵌入其他網站的功能就是標準的微前端行為，但是 iframe 有低性能、雙滾動條等天缺，無法應付大規模系統。其他還有 Sigle-SPA、Qiankun、MicroAPP，我們選擇其中的 MicroAPP 做為基礎技術。

MicroAPP 最大化完善實作上會遇到的技術問題，可用於任何前端框架，也可使用 JS 沙盒、樣式隔離、元素隔離、預先加載、路徑補全、插件系統、數據通訊等功能。MicroAPP 可以創建自定義標籤，並提供渲染、卸載、屬性修改等函數，所有元素和樣式作業區域都無法跑出 MicroFrontend 容器邊界，實現真正意義的 微前端 MicroFrontend。

結尾

我們已經將 微前端 MicroFrontend 技術應用於實作，某科技廠客戶多個內部系統需要串聯整合，這些系統都正在運行，也由各獨立團隊開發，目前該公司員工使用多個系統需要頻繁切換且重新登入，造成內部不少困擾，剛好符合前言提到的痛點，微前端 MicroFrontend、Vue、SSO 搭配使用，完整達成客戶需求。

隨著數位化程度提升，我們相信未來會有更大量的 微前端 MicroFrontend 需求，尤其是科技廠們，需要大量自動化系統作業。或許還有我們沒想到的應用情境，也很適合 微前端 MicroFrontend 做為解決方案。