認識微前端：一種用于前端 Web 開發的微服務
對于Web應用來說，前端越來越大，后端越來越不重要。現代 Web 應用程序 80%-90% 的代碼為前端代碼，后端代碼非常少。可以想象，現在大多數新的web應用程序都面臨著類似的情況。
Web 應用程序也會隨著時間而變化，開發技術和框架也是如此。這需要支持允許不同的前端框架共存，例如在Vue2中構建的舊模塊需要與React或者Vue3中構建的新模塊集成。
單體式應用越來越臃腫
對大型前端應用程序采用單一方法將變得笨重，需要有一種方法將其分解為可以獨立運行的較小模塊。
例如：
-
apps.devpoint.cn/micro：使用靜態HTML構建的入口頁面 -
apps.devpoint.cn/settings：使用vue2構建的舊模塊 -
apps.devpoint.cn/dashboard：使用vue3構建的新模塊
接下來需要做一下幾件事：
-
一個純JavaScript的代碼庫，管理路由和用戶會話，還有一些公共的CSS。兩者都應該盡可能的輕。
-
一個單獨的模塊集，“小應用程序”，構建于各種框架，存儲在不同的代碼庫中。
-
一個部署系統，它將來自不同代碼庫的所有模塊集成在一起，并在模塊更新時部署到服務器。
解決方案是微前端
事實證明，很多公司在使用相同的方法，常用術語叫“微前端（Micro frontends）”。Micro Frontends 一詞于 2016 年底首次出現在 ThoughtWorks Technology Radar 中，將微服務的概念擴展到前端領域。在微服務框架里面可以構建一個功能豐富且功能強大的瀏覽器應用程序，即單頁應用程序，使其位于微服務架構之上。隨著時間的推移，前端面臨不斷增長的需求和難以維護代碼，這就是常說的前端單體架構。
微前端背后的思路是將網站或 Web 應用程序視為由獨立團隊開發擁有的功能組合。每個團隊都有自己關心和專攻的不同業務或任務領域。團隊是跨職能的，從數據庫到用戶界面、端到端地開發其功能。
前端單體架構
微前端架構
實現微前端
以下是實現微前端的幾種常見的方法，但不限于以下方案：
- Single-SPA（一個前端微服務的javascript框架）：它可以在同一個頁面上組合多個框架，而不需要刷新頁面（請看這個集成了React、Vue、Angular 1、Angular 2等DEMO）。
- 通過URL的不同集成多個單頁應用程序：這些應用程序使用
npm/bower組件實現集成。 - 將微應用隔離到
iframe中使用庫和Window.postMessageAPI進行協調。iframe數據狀態共享由其父窗口公開的API。 - 通過共享事件總線（例如 eev ）實現不同的模塊間的通信，每個模塊使用自己的框架構建，只要處理傳入和傳出事件。
- 使用 Varnish Cache 集成不同的模塊。
- Web組件集成：Web 組件是作為 W3C 規范提出的一組標準。允許創建可以導入到 Web 應用程序中的可重用組件，就像可以導入任何網頁的小部件。可以將Web組件與后端一起打包到微服務中，將前端應用程序簡化為路由，并由路由來對不同Web組件進行編排。
- “Blackbox”React 組件。
資源
- Single-SPA框架（請參見上文）。
- micro-frontends.org（ GitHub倉庫 ），包含“與多個獨立團隊一起構建現代 Web 應用程序的技術、策略和方法”。
- Project Mosaic，一組支持大型網站微服務風格架構的庫。