字節(jié)跳動(dòng)面試官:你是怎么理解微前端？
點(diǎn)擊上方“前端簡(jiǎn)報(bào)”，選擇“設(shè)為星標(biāo)”
第一時(shí)間關(guān)注技術(shù)干貨！
面對(duì)如此之多的神奇案例， 人們難以否認(rèn)微前端正日益流行這個(gè)事實(shí) 。本文將探究微前端的具體使用場(chǎng)景和使用群體 ，并給出可快速輕松上手的現(xiàn)有解決方案。
微前端將大規(guī)模的后端系統(tǒng)切分為 很多面向前端的微服務(wù)，力圖實(shí)現(xiàn)一定程度的改進(jìn)。
這里的主要問(wèn)題是， 各個(gè)部分總是作為一個(gè)整體被使用和體驗(yàn)的。
用戶體驗(yàn)（UX）是由前端直接負(fù)責(zé)的，因?yàn)楹蠖讼到y(tǒng)從來(lái)不會(huì)被直接整體訪問(wèn)。
該問(wèn)題存在多種解決方案。最簡(jiǎn)單的做法是將現(xiàn)有 API 的數(shù)據(jù)交換模型替換為 HTML 輸出。只需一個(gè)超鏈接即可實(shí)現(xiàn)服務(wù)（視圖）間的跳轉(zhuǎn)。盡管這種解決方案 是 有效 的 ，但缺點(diǎn)是在很多情況下并不能提供用戶所需的 UX。
圖 1 分布式 Web 應(yīng)用的演進(jìn)
顯然，要將那些 各自 獨(dú)立的 較小 UI 部分聚合為一個(gè)整體的前端，需要的是一些更為復(fù)雜的解決方案。這應(yīng)視為分布式 Web 應(yīng)用演進(jìn)的下一步。
一個(gè)重要的問(wèn)題是，如何理解微前端與組件和模塊的關(guān)系。事實(shí)上，組件、模塊、微前端等概念，都是以 構(gòu)建 單元的形式實(shí)現(xiàn)可重用性和所承擔(dān) 的 功能。它們之間的唯一差別是所處的層級(jí)不同，具體而言：
組件是底層 UI 庫(kù)的構(gòu)建單元；
模塊是相應(yīng)運(yùn)行時(shí)的構(gòu)建單元；
軟件包是依賴(lài)解析器的構(gòu)建單元；
微前端是當(dāng)前應(yīng)用的構(gòu)建單元。
如上，微前端可視為組成人體的各個(gè)器官，軟件包則對(duì)應(yīng)于組成各器官的細(xì)胞，而模塊就是分子，組件對(duì)應(yīng)于原子。
使用微前端的原因多種多樣， 常見(jiàn)的原因多是技術(shù)性的 ，但 往往 有 現(xiàn)實(shí) 的商業(yè)用例（或者提升 UX 的用例）在背后提供支持。
究其根本，微前端解決方案 可 提供如下特性：
單個(gè)前端部分可獨(dú)立開(kāi)發(fā)、測(cè)試和部署；
無(wú)需重新構(gòu)建即可添加、移除或替換單個(gè)前端部分；
不同的前端部分可使用不同的技術(shù)構(gòu)建。
由此可見(jiàn)，微前端主要實(shí)現(xiàn)了解耦。在應(yīng)用到達(dá)一定規(guī)模后，微前端就有了用武之地。其中一個(gè)潛在優(yōu)點(diǎn)是， 它 支持 組織分割為 更多團(tuán)隊(duì)，乃至創(chuàng)建更小的全棧團(tuán)隊(duì)。
圖 2 微前端對(duì)全棧團(tuán)隊(duì)的支持。
微前端在如下場(chǎng)景中將更發(fā)揮更大作用：
多個(gè)團(tuán)隊(duì)貢獻(xiàn)同一個(gè)前端。
一些 獨(dú)立的部分需由特定的用戶或團(tuán)隊(duì)激活、終止激活或 roll out 。
需支持外部開(kāi)發(fā)人員對(duì) UI 進(jìn)行擴(kuò)展。
UI 的特性集每日 / 每周都在增長(zhǎng)，并不會(huì)影響系統(tǒng)其它部分；
不論應(yīng)用如何增長(zhǎng)，都需要維持恒定的開(kāi)發(fā)速度；
支持不同團(tuán)隊(duì)使用不同的開(kāi)發(fā)工具。
微前端得到越來(lái)越多企業(yè)的積極采納，下面給出部分最新列表：
各個(gè)企業(yè)所采用的方法當(dāng)然各有千秋，但是大家的目標(biāo) 是一致的 。
圖 3 使用微前端技術(shù)的企業(yè)（Luca Mezzalira 提供）
企業(yè)列表正不斷增長(zhǎng)，從 ThoughtWorks、HLC 等咨詢(xún)公司，到 SalesPad、Apptio 等 SaaS 服務(wù)提供商。還有更多傳統(tǒng)企業(yè)已經(jīng)押注微前端，典型實(shí)例就是德國(guó)的隱形巨頭 Hoffmann 集團(tuán)。
Hoffmann 集團(tuán)很好地展示了微前端并不需要多么大型的團(tuán)隊(duì)，也不需要占用多少內(nèi)部資源。該集團(tuán)與多家服務(wù)提供商有業(yè)務(wù)往來(lái)，這是其選擇微前端的一個(gè)重要因素。
Bit.dev 平臺(tái)及其市場(chǎng)營(yíng)銷(xiāo)網(wǎng)站均使用 React 組件構(gòu)建，并且由 Bit 自身維護(hù)。
用戶在瀏覽 網(wǎng)站 查看其“原生服務(wù)”時(shí)，可停留在不同組件上。點(diǎn)擊位于組件上方的名字，即可查看組件詳情，進(jìn)而安裝到用戶項(xiàng)目中。
構(gòu)建該頁(yè)面的組件，基于 GitHub 上兩個(gè)不同的代碼庫(kù)，“ base-ui”（ 在 Bit 上的訪問(wèn)位置）和“ evangelist”（ 在 Bit 上的訪問(wèn)位置)。
base-ui 代碼庫(kù) 使用 Bit 發(fā)布，實(shí)現(xiàn)設(shè)計(jì)系統(tǒng)。evangelist 代碼庫(kù) 用于市場(chǎng)營(yíng)銷(xiāo)頁(yè)面，其中使用了 base-ui 提供的一些組件，以在不同 MF 之間保持 統(tǒng)一的觀感。
在此， Bit 不僅用于自動(dòng)交付特性，而且用來(lái)在不同微前端間維護(hù)一致的 UI。
這個(gè) 問(wèn)題沒(méi)有確切答案。和微服務(wù)一樣，并不存在適用于所有人的單一方法，也沒(méi)有已確立的業(yè)界標(biāo)準(zhǔn)。
相比微服務(wù)實(shí)現(xiàn)，微前端不僅在實(shí)現(xiàn)細(xì)節(jié)上存在差異，而且在所有的細(xì)枝末節(jié)上均有所不同。因此需要區(qū)分主要使用場(chǎng)景。一些服務(wù)端框架也支持客戶端組裝，反之依然。
客戶端微前端的可選擇范圍很廣。其中部分支持服務(wù)端渲染。
圖 4 客戶端組裝
下列框架實(shí)現(xiàn)了這種（或類(lèi)似的）模式：
Piral
Open Components
qiankun
Luigi
Frint.js
服務(wù)端框架有多種選項(xiàng)。但其中一些只是用于 express 的軟件庫(kù)或框架；還有一些以服務(wù)形式提供，需加載到用戶 的基礎(chǔ) 架構(gòu)中。
圖 5 服務(wù)端組裝
下列框架實(shí)現(xiàn)這種（或類(lèi)似的）模式：
Mosaic
PuzzleJs
Podium
Micromono
還可考慮一些幫助庫(kù)。這些幫助庫(kù)或是提供共享依賴(lài)、路由事件的基礎(chǔ)架構(gòu)，或是將不同的微前端及其生命周期組織起來(lái) 。
下例通過(guò) Import Maps 或打包特定 Chunk 實(shí)現(xiàn)對(duì)共享依賴(lài)的處理。
圖 6 使用 Import Maps 共享依賴(lài)。
下面的庫(kù)可用于削減模板代碼：
Module Federation
Siteless
Single SPA
Postal.js
EventBus
我想使用一些社區(qū)數(shù)據(jù)做深入分析，這需要讀者們的幫助。
我已使用 Google Forms 做了一個(gè)簡(jiǎn)單的在線調(diào)查，只需占用不到五分鐘就能填完。歡迎讀者們通過(guò)各自渠道擴(kuò)散鏈接。多謝！
https://forms.gle/Wxngf3KgTCf5TgcM6
調(diào)查截止八月，結(jié)果將在九月初公布。
雖然有些人覺(jué)得 Module Federation 之類(lèi)的幫助庫(kù)很好用 ，但多數(shù)人還是會(huì)繼續(xù)用原來(lái)的解決方案 。好的一面是， 有很多不受大廠商控制的框架可以用來(lái)輕松編寫(xiě)代碼 。但至少?gòu)募夹g(shù)上看，微前端依然缺少便于解決方案互通的通用標(biāo)準(zhǔn)。
另一個(gè)問(wèn)題是，微前端的社區(qū)接受度和采用率仍顯不足。
盡管微前端模式已經(jīng)有一定知名度，但是社區(qū)中大多數(shù)人仍對(duì)其存疑。
究其原因，其一是微服務(wù)被視為一種后端設(shè)計(jì)的最佳實(shí)踐和標(biāo)準(zhǔn)， 但并未當(dāng)作是一種新的，可用于特定場(chǎng)景的工具。顯然這并不是人們當(dāng)初想的那樣，所以微前端也不應(yīng)該被視為靈丹妙藥。
微前端 現(xiàn)有解決方案的可用數(shù)量及其在全球許多項(xiàng)目中的用途都發(fā)出了強(qiáng)烈的信號(hào)：微前端已經(jīng)隨時(shí)可以使用！我建議，在實(shí)際開(kāi)始大型 / 生產(chǎn)級(jí)項(xiàng)目之前， 先考察各種模式和解決方案。
希望讀者喜歡這篇文章！我想了解大家的觀點(diǎn)及原因，對(duì)微前端持喜愛(ài)、可容忍態(tài)度，還是棄若敝屣？
https://blog.bitsrc.io/state-of-micro-frontends-9c0c604ed13a