轉(zhuǎn)載請(qǐng)注明出處，點(diǎn)擊此處 查看更多精彩內(nèi)容。

微前端是什么？

微前端是一種多個(gè)團(tuán)隊(duì)通過(guò)獨(dú)立發(fā)布功能的方式來(lái)共同構(gòu)建現(xiàn)代化 Web 應(yīng)用的技術(shù)手段及方法策略。

微前端架構(gòu)旨在解決單體應(yīng)用在較長(zhǎng)時(shí)間跨度下，由于參與的人員、團(tuán)隊(duì)的增多、技術(shù)變遷等原因，從一個(gè)普通應(yīng)用演變成一個(gè)巨石應(yīng)用（Frontend Monolith）后，隨之而來(lái)的應(yīng)用不可維護(hù)的問(wèn)題。

它借鑒了后端微服務(wù)的架構(gòu)理念，核心在于將多個(gè)可以獨(dú)立開(kāi)發(fā)、獨(dú)立運(yùn)行、獨(dú)立部署的小型應(yīng)用融合為一個(gè)應(yīng)用。微前端既可以將多個(gè)項(xiàng)目融合為一，又可以減少項(xiàng)目之間的耦合，提升項(xiàng)目擴(kuò)展性，相比一整塊的前端倉(cāng)庫(kù)，微前端架構(gòu)下的前端倉(cāng)庫(kù)更小更靈活。

微前端的使用場(chǎng)景

• 制作一個(gè)管理平臺(tái)，把多個(gè)系統(tǒng)統(tǒng)一接入這個(gè)平臺(tái)。
• 一個(gè)應(yīng)用使用 Vue 框架開(kāi)發(fā)，其中有一個(gè)比較獨(dú)立的模塊，開(kāi)發(fā)者想嘗試使用 React 框架來(lái)開(kāi)發(fā)，等模塊單獨(dú)開(kāi)發(fā)部署完，再把這個(gè)模塊應(yīng)用接回去。
• 有一個(gè)巨大的應(yīng)用，為了降低開(kāi)發(fā)和維護(hù)成本，分拆成多個(gè)小應(yīng)用進(jìn)行開(kāi)發(fā)和部署，然后用一個(gè)平臺(tái)將這些小應(yīng)用集成起來(lái)。
• ......

微前端需要解決的問(wèn)題

• 子應(yīng)用的加載和卸載
  頁(yè)面需要從一個(gè)子應(yīng)用切換到另一個(gè)子應(yīng)用，框架必須具備加載、渲染、切換的能力。
• 子應(yīng)用路由狀態(tài)保持
  激活子應(yīng)用后，瀏覽器刷新、前進(jìn)、后退子應(yīng)用的路由都應(yīng)該可以正常工作。
• 應(yīng)用間的通信
  應(yīng)用間可以方便、快捷的通信。
• 子應(yīng)用獨(dú)立運(yùn)行
  子應(yīng)用運(yùn)行會(huì)污染全局的 window 對(duì)象，樣式會(huì)污染其他應(yīng)用，必須有效的隔離起來(lái)。

微前端的好處

• 獨(dú)立開(kāi)發(fā)、獨(dú)立部署
  微應(yīng)用倉(cāng)庫(kù)獨(dú)立，前后端可獨(dú)立開(kāi)發(fā)，部署完成后主框架自動(dòng)完成同步更新。
• 技術(shù)棧無(wú)關(guān)
  主框架不限制接入應(yīng)用的技術(shù)棧，微應(yīng)用具備完全自主權(quán)。
• 獨(dú)立運(yùn)行時(shí)
  每個(gè)微應(yīng)用之間狀態(tài)隔離，運(yùn)行時(shí)狀態(tài)不共享。
• 增量升級(jí)
  在面對(duì)各種復(fù)雜場(chǎng)景時(shí)，我們通常很難對(duì)一個(gè)已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級(jí)或重構(gòu)，而微前端是一種非常好的實(shí)施漸進(jìn)式重構(gòu)的手段和策略。