文章出處：EAWorld

前端開(kāi)發(fā)在程序猿中無(wú)疑是一個(gè)比較苦逼的存在，作為一個(gè)前端開(kāi)發(fā)，你必須要掌握J(rèn)avascript，HTML，CSS這三大基礎(chǔ)。Javascript作為網(wǎng)絡(luò)時(shí)代最為重要的開(kāi)發(fā)語(yǔ)言，由于其設(shè)計(jì)上的限制，一直在演進(jìn)，經(jīng)歷了ES3，ES5，ES6（ECMAScript 2015）……而簡(jiǎn)單的CSS也無(wú)法完成你復(fù)雜的需求，你需要Less／Sass／Sytlus來(lái)增強(qiáng)你的CSS的功能。這些還遠(yuǎn)遠(yuǎn)只是一小部分，你還需要了解：

你需要有網(wǎng)絡(luò)的基本知識(shí)，和常見(jiàn)的API接口例如HTTP／REST／GraphQL

你需要知道瀏覽器的兼容性，什么IE，Chrome，Safari，F(xiàn)irefox，等等

你需要知道應(yīng)用如何打包，了解 Webpack ，還有g(shù)ulp， Babel， Parcel， Browserify， and Grunt等是怎么工作的

你需要熟悉HTML的DOM操作，和相關(guān)的工具庫(kù)例如jquery和d3js

需要了解不同的框架和他們的優(yōu)缺點(diǎn) 例如React，AngularJS和VueJS，這三大框架都不兼容，而且各自都有自己龐大的生態(tài)

雖然NodeJS主要用于后端開(kāi)發(fā)，但是很多前端的工具鏈和這個(gè)相關(guān)，例如構(gòu)建工具 npm，yarn ……

如果你的項(xiàng)目足夠復(fù)雜，你需要引入Monorepo，使用例如lerna，nx等工具來(lái)管理多個(gè)項(xiàng)目的包和依賴(lài)

你需要掌握基本的前端測(cè)試工具和框架，例如：Jasmin，Jest，Selenium，Mocha等等

最可怕的是，這些東西都在飛快地發(fā)展和變化中，當(dāng)你正忙于學(xué)習(xí)ES8，ES9，ES10的新特性的時(shí)候，今天我要和大家分享的希望不是壓死前端開(kāi)發(fā)小駱駝的最后一根稻草－－微前端。

目錄：

1．什么是微前端

2．為什么需要微前端，它有什么優(yōu)勢(shì)

3．如何實(shí)現(xiàn)微前端架構(gòu)

4．運(yùn)行時(shí)微前端的具體實(shí)現(xiàn)方式

5．微前端的問(wèn)題和缺點(diǎn)

一、什么是微前端

而提到微前端就離不開(kāi)微服務(wù)，大家對(duì)微服務(wù)都比較熟悉了，微服務(wù)允許后端體系結(jié)構(gòu)通過(guò)松散耦合的代碼庫(kù)進(jìn)行擴(kuò)展，每個(gè)代碼庫(kù)負(fù)責(zé)自己的業(yè)務(wù)邏輯，并公開(kāi)一個(gè)API，每個(gè)API均可獨(dú)立部署，并且各自由不同的團(tuán)隊(duì)擁有和維護(hù)。

前端架構(gòu)經(jīng)歷了從單體，到前后端分離，再到微服務(wù)，最終發(fā)展到現(xiàn)在的微前端的過(guò)程如下圖所示：

微前端的思路是把微服務(wù)的架構(gòu)引入到前端，其核心都是要能夠以業(yè)務(wù)為單元構(gòu)建端到端的垂直架構(gòu)，使得單個(gè)的團(tuán)隊(duì)能夠獨(dú)立自主的進(jìn)行相關(guān)的開(kāi)發(fā)，同時(shí)又具備相當(dāng)?shù)撵`活性，按需求來(lái)組成交付應(yīng)用。

“微前端”一詞最早于2016年底在ThoughtWorks 技術(shù)雷達(dá)中提出的。它將微服務(wù)的概念擴(kuò)展到了前端世界。當(dāng)前的趨勢(shì)是構(gòu)建一個(gè)功能強(qiáng)大且功能強(qiáng)大的瀏覽器應(yīng)用程序（也稱(chēng)為單頁(yè)應(yīng)用程序），該應(yīng)用程序位于微服務(wù)架構(gòu)之上。隨著時(shí)間的流逝，通常由一個(gè)單獨(dú)的團(tuán)隊(duì)開(kāi)發(fā)的前端層會(huì)不斷增長(zhǎng)，并且變得更加難以維護(hù)。

微前端背后的想法是將網(wǎng)站或Web應(yīng)用程序視為由獨(dú)立團(tuán)隊(duì)擁有的功能的組合。每個(gè)團(tuán)隊(duì)都有自己關(guān)心和專(zhuān)長(zhǎng)的不同業(yè)務(wù)或任務(wù)領(lǐng)域。一個(gè)團(tuán)隊(duì)是跨職能的，并且從數(shù)據(jù)庫(kù)到用戶(hù)界面，端到端地開(kāi)發(fā)其功能。

但是，這個(gè)想法并不新鮮。它與“單體系統(tǒng)”概念有很多共同點(diǎn)。在過(guò)去，類(lèi)似的方法被稱(chēng)為“垂直系統(tǒng)的前端集成”。但是微前端顯然是一個(gè)更友好，更輕巧的術(shù)語(yǔ)。

在微服務(wù)的架構(gòu)中，后臺(tái)的服務(wù)已經(jīng)按照業(yè)務(wù)進(jìn)行了分離，而前端仍然是一個(gè)單體構(gòu)建，通過(guò)網(wǎng)關(guān)來(lái)調(diào)用不同的后臺(tái)服務(wù)。這個(gè)微服務(wù)的思路是相違背的，這也就造成了你的后端團(tuán)隊(duì)是按照業(yè)務(wù)分割的，但是前端團(tuán)隊(duì)仍然是一個(gè)整體。微前端可以有效地改進(jìn)這一點(diǎn)。

微前端的核心思路其實(shí)是遠(yuǎn)程應(yīng)用程序，包含組件／模塊／包的運(yùn)行時(shí)加載。

如上圖，對(duì)于用戶(hù)而言，訪問(wèn)的是一個(gè)微前端的容器（container），容器加載運(yùn)行在遠(yuǎn)程服務(wù)上的應(yīng)用，把這些遠(yuǎn)程應(yīng)用作為組件／模塊／包在本地瀏覽器中加載。

組件是底層UI庫(kù)的構(gòu)建單元

模塊是相應(yīng)運(yùn)行時(shí)的構(gòu)建單元

包是依賴(lài)性解析器的構(gòu)建單元

微前端是所提出的應(yīng)用程序的構(gòu)建塊

二、為什么需要微前端？

它有什么優(yōu)勢(shì)？

在前面我們看到的微前端之前的架構(gòu)，所有的前端還是一個(gè)單體，前端團(tuán)隊(duì)會(huì)依賴(lài)所有的服務(wù)或者后臺(tái)的API，前端開(kāi)發(fā)會(huì)成為整個(gè)系統(tǒng)的瓶頸。使用微前端，就是要讓前端業(yè)務(wù)從水平分層變?yōu)榇怪睉?yīng)用的一部分，進(jìn)入業(yè)務(wù)團(tuán)隊(duì)，剝離耦合。

那么微前端有什么好處，為什么要采用微前端架構(gòu)呢？

各個(gè)團(tuán)隊(duì)獨(dú)立開(kāi)發(fā)，相互不影響，獨(dú)立開(kāi)發(fā)、獨(dú)立部署，微應(yīng)用倉(cāng)庫(kù)獨(dú)立，前后端可獨(dú)立開(kāi)發(fā)，部署完成后主框架自動(dòng)完成同步更新

增量升級(jí)，在面對(duì)各種復(fù)雜場(chǎng)景時(shí)，通常很難對(duì)一個(gè)已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級(jí)或重構(gòu)，而微前端是一種非常好的實(shí)施漸進(jìn)式重構(gòu)的手段和策略。因?yàn)槭沁\(yùn)行時(shí)加載，可以在沒(méi)有重建的情況下添加，刪除或替換前端的各個(gè)部分。

不受技術(shù)影響，每個(gè)團(tuán)隊(duì)都應(yīng)該能夠選擇和升級(jí)其技術(shù)棧，而無(wú)需與其他團(tuán)隊(duì)進(jìn)行協(xié)調(diào)。也就是說(shuō)A應(yīng)用可以用React，而B(niǎo)應(yīng)用使用Vue，大家可以通過(guò)同一個(gè)微前端來(lái)加載

獨(dú)立運(yùn)行時(shí)，每個(gè)微應(yīng)用之間狀態(tài)隔離，運(yùn)行時(shí)狀態(tài)不共享。隔離團(tuán)隊(duì)代碼，即使所有團(tuán)隊(duì)都使用相同的框架，也不要共享運(yùn)行時(shí)。構(gòu)建自包含的獨(dú)立應(yīng)用程序。不要依賴(lài)共享狀態(tài)或全局變量。

建立團(tuán)隊(duì)命名空間，對(duì)于CSS，事件，本地存儲(chǔ)和Cookies，可以避免沖突并闡明所有權(quán)。

因此，微前端和微服務(wù)的本質(zhì)都是關(guān)于去耦合。而只有當(dāng)應(yīng)用程序達(dá)到一定規(guī)模時(shí)，這才開(kāi)始變得更有意義。