個(gè)人博客: https://alili.tech/

在微前端中,我們可以根據(jù)自己的業(yè)務(wù)需求,讓子模塊使用不同框架技術(shù)棧.雖然到了這一步已經(jīng)很美好了,那這就是微前端的終點(diǎn)嗎?

答案是否定的,微前端的邊界還可以更進(jìn)一步的拓寬.

上一篇微前端的文章 https://alili.tech/archive/qh7x5i5szfh/ 給大家介紹了,如何在相同技術(shù)棧的子模塊之間,相互調(diào)用React組件.

那今天要說(shuō)的就是,如何在不同技術(shù)棧之間的子模塊相調(diào)用不同技術(shù)棧的組件.

最終,我們只需要根據(jù)我們的需求調(diào)用相關(guān)功能的組件,我們不需要管他是 react ,vue或者是angular寫(xiě)的.

你只管用,只知道他是一個(gè)組件就好了,不用關(guān)心太多~ 對(duì)于團(tuán)隊(duì)的組件積累,是有極大好處的.

場(chǎng)景

一般情況下,一個(gè)公司的前端團(tuán)隊(duì)的技術(shù)棧都是統(tǒng)一的.但也有前端團(tuán)隊(duì)使用不統(tǒng)一技術(shù)棧的時(shí)候.
比如:

1. 時(shí)代的變遷,升級(jí)技術(shù)棧導(dǎo)致內(nèi)部技術(shù)棧不統(tǒng)一
2. 項(xiàng)目眾多,因?yàn)樾枨蟛灰恢?其他的技術(shù)棧對(duì)于項(xiàng)目更加有力
3. ...其他管理原因

當(dāng)我們已經(jīng)使用微前端架構(gòu)來(lái)構(gòu)建我們的項(xiàng)目的時(shí)候,我們的子模塊有可能因?yàn)槲覀冺?xiàng)目的需求導(dǎo)致使用了其他的技術(shù)棧,

如果我們使用了其他的技術(shù)棧,我們?cè)瓉?lái)封裝的組件就不能在新的項(xiàng)目中用了,所以我們需要要求組件可以跨框架共享使用.

我們?cè)撛趺醋?

image

這里有提到微件倉(cāng)庫(kù)模塊,這是一個(gè)單獨(dú)的項(xiàng)目.你可以理解是以前的舊項(xiàng)目,當(dāng)你需要這個(gè)舊項(xiàng)目的某一個(gè)組件的時(shí)候,可以直接從這個(gè)項(xiàng)目里面拿.

你也可以做成一個(gè)只提供組件的項(xiàng)目,畢竟在運(yùn)行時(shí)一個(gè)子模塊掛載到我們的項(xiàng)目中來(lái)是沒(méi)有任何資源消耗的.

我們只要知道我們需要的組件從哪里來(lái)就行了,然后根據(jù)組件還有之前定義好的路由找到這個(gè)組件,調(diào)用他,使用他就好了.

基于Web component封裝我們的組件

不同框架開(kāi)發(fā)的組件,差異很大.想要串在一起使用,基本上是不可能的.
好在目前所有的框架都支持讓組件以webcomponent的形式存在.

react: https://react.docschina.org/docs/web-components.html

vue : https://github.com/vuejs/vue-web-component-wrapper

angular: https://www.angular.cn/guide/elements#transforming-components-to-custom-elements

關(guān)于Web Components 的詳細(xì)介紹

https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

加載性能

如果一個(gè)頁(yè)面依賴了很多跨框架的組件,必然出現(xiàn)網(wǎng)絡(luò)方面的性能問(wèn)題.

image

我們會(huì)在請(qǐng)求的中間加一層node服務(wù),當(dāng)頁(yè)面請(qǐng)求多個(gè)跨框架的組件的時(shí)候,我們的node就會(huì)合并成單個(gè)文件,并且保存在硬盤(pán)上.

所以說(shuō),當(dāng)這個(gè)頁(yè)面被請(qǐng)求過(guò)之后,頁(yè)面零散的組件便會(huì)合并在一起,第二次其他用戶請(qǐng)求就不會(huì)有這種合并文件的處理,直接返回靜態(tài)資源給客戶端.

這種方式也不會(huì)對(duì)nodejs有太多額外的壓力,

因?yàn)楝F(xiàn)在的頁(yè)面結(jié)構(gòu)還是相對(duì)靜態(tài)穩(wěn)定的,沒(méi)有太多的動(dòng)態(tài)定制化的東西.這個(gè)方案足以應(yīng)付大多數(shù)的應(yīng)用場(chǎng)景.

尾巴

經(jīng)過(guò)不停的探索,微前端終于走到了微件化的這一步,感慨頗多~

我們從一個(gè)窗口只能加載單個(gè)頁(yè)面,
再到多個(gè)頁(yè)面(SPA),
再到現(xiàn)在的多個(gè)項(xiàng)目(微前端),
然后再可以控制不同組件在多個(gè)項(xiàng)目之間隨意組合(微件化).

微前端的應(yīng)用邊界應(yīng)該還可以拓展的更寬,還可以開(kāi)發(fā)出更多驚喜的操作.

相關(guān)系列文章

https://alili.tech/tags/microfrontend/