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