轉(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)的手段和策略。
