一区二区三区三上|欧美在线视频五区|国产午夜无码在线观看视频|亚洲国产裸体网站|无码成年人影视|亚洲AV亚洲AV|成人开心激情五月|欧美性爱内射视频|超碰人人干人人上|一区二区无码三区亚洲人区久久精品

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

微前端父子應(yīng)用及兄弟應(yīng)用間組件或方法共享方案

京東云 ? 來源:jf_75140285 ? 作者:jf_75140285 ? 2024-07-24 14:44 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

背景

我們的很多web應(yīng)用在持續(xù)迭代中功能越來越復(fù)雜,參與的人員、團隊不斷增多,導(dǎo)致項目出現(xiàn)難以維護的問題,這種情況PC端尤其常見,微前端為我們提供了一種高效管理復(fù)雜應(yīng)用的方案。但是在使用微前端的過程中,通常會有一些公共方法或公共組件,本文將對如何實現(xiàn)父子應(yīng)用以及兄弟應(yīng)用之間進行方法及組件共享提出幾種解決方案以及其各自優(yōu)缺點及適用場景

模塊聯(lián)邦(Module Federation)

webpack5引入了模塊聯(lián)邦,可以讓不同的應(yīng)用共享模塊。具體步驟如下:

Remote(提供者模塊)

    // webpack.config.js
    module.exports = {
        // 其他配置...
        plugins: [
            new ModuleFederationPlugin({
            name: 'component_app',
            filename: 'remoteEntry.js',
            exposes: {
                './Button': './src/Button.jsx',
                './Dialog': './src/Dialog.jsx',
                './Logo': './src/Logo.jsx',
                './ToolTip': './src/ToolTip.jsx',
            },
            shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
            }),
        ],
    };

作為提供方,component 將自己的 Button、Dialog等組件暴露出去,同時將 react 和 react-dom 這兩個依賴共享出去。

host(使用者模塊)

    // webpack.config.js
    module.exports = {
        entry: './index.js',
        // ...
        plugins: [
            new ModuleFederationPlugin({
            name: 'main_app',
            //遠程訪問地址入口 
            remotes: {
                'component-app': 'component_app@http://www.www27dydycom.cn/images/chaijie_default.png/remoteEntry.js',
            },
            shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
            })
        ],
    };

作為消費者的 main 應(yīng)用需要定義需要消費的應(yīng)用的名稱以及地址,同時 main 應(yīng)用也將自己的 react 和 react-dom 這兩個依賴共享出去。

通過以上方式可以實現(xiàn)不同應(yīng)用之間共享公共方法和組件,雖然vite本身不支持模塊聯(lián)邦,但是我們可以使用vite-plugin-federation這個插件。
優(yōu)點

代碼共享:不同的微應(yīng)用可以共享相同的依賴庫,減少重復(fù)下載和加載,提高性能。

獨立部署:各個微應(yīng)用可以獨立開發(fā)、測試和部署,減少了團隊之間的耦合,提高了開發(fā)效率。

動態(tài)加載:可以在運行時動態(tài)加載模塊,按需加載,減少初始加載時間。

版本控制:支持不同版本的模塊共存,解決了版本沖突的問題。

團隊協(xié)作:各個團隊可以獨立開發(fā)自己的模塊,減少了對中央倉庫的依賴,提高了協(xié)作效率。

缺點

對于webpack5以下的應(yīng)用不支持

復(fù)雜性增加:配置和管理模塊聯(lián)邦需要一定的學(xué)習(xí)成本和經(jīng)驗,增加了項目的復(fù)雜性。

調(diào)試困難:由于模塊是動態(tài)加載的,調(diào)試和追蹤問題可能會變得更加困難。

性能開銷:雖然減少了初始加載時間,但動態(tài)加載模塊可能會在運行時引入額外的性能開銷。

依賴管理:需要仔細管理共享依賴的版本,避免潛在的兼容性問題。

安全性:動態(tài)加載外部模塊可能會引入安全風(fēng)險,需要額外的安全措施來防止惡意代碼注入。

NPM包

將共享組件打包成一個 NPM 包,然后在父子應(yīng)用中分別安裝和使用。

創(chuàng)建共享組件/方法庫

import React from 'react';
const SharedComponent = () => 

Shared Component

; export default SharedComponent;

發(fā)布到NPM

npm publish

在父應(yīng)用和子應(yīng)用中安裝

npm install shared-component-library

在應(yīng)用中使用

 import SharedComponent from 'shared-component-library';

 function App() {
 return ;
 }

 export default App;

優(yōu)點
1. 模塊化管理:通過npm包管理公共組件,可以實現(xiàn)模塊化開發(fā),便于維護和更新。
2. 版本控制:npm包自帶版本控制功能,可以方便地進行版本管理,確保不同微應(yīng)用使用兼容的組件版本。
3. 依賴管理:npm包可以自動管理依賴關(guān)系,減少手動處理依賴的復(fù)雜性。
4. 復(fù)用性高:公共組件封裝成npm包后,可以在多個微應(yīng)用中復(fù)用,減少重復(fù)開發(fā),提高開發(fā)效率。
5. 社區(qū)支持:npm生態(tài)系統(tǒng)龐大,很多問題可以通過社區(qū)資源解決,減少開發(fā)難度。

缺點
1. 發(fā)布和更新成本:每次更新公共組件都需要重新發(fā)布npm包,并在各個微應(yīng)用中更新依賴,增加了一定的工作量。
2. 版本兼容性問題:不同微應(yīng)用可能對同一組件有不同的版本需求,處理版本兼容性問題可能會比較復(fù)雜。
3. 性能開銷:由于npm包需要通過網(wǎng)絡(luò)下載和安裝,可能會增加構(gòu)建時間和初始加載時間。
4. 調(diào)試復(fù)雜性:npm包作為獨立模塊,調(diào)試時可能需要額外的配置和步驟,增加了調(diào)試的復(fù)雜性。
5. 安全性問題:使用第三方npm包時,需要注意其安全性,防止引入潛在的安全漏洞。

使用 CDN

將共享組件打包并上傳到 CDN,然后在父子應(yīng)用中通過 URL 引入。

打包共享組件:

npm run build

上傳到 CDN。

在應(yīng)用中引入:


// 假設(shè)共享組件暴露為全局變量 SharedComponent
function App() {
  return ;
}
export default App;

優(yōu)點

性能提升:

快速加載:CDN 服務(wù)器分布在全球各地,用戶可以從最近的服務(wù)器獲取資源,從而減少加載時間。

緩存機制:CDN 提供了強大的緩存機制,可以減少服務(wù)器的負載,提高響應(yīng)速度。

帶寬優(yōu)化:

減輕服務(wù)器壓力:通過將靜態(tài)資源托管在 CDN 上,可以減輕原始服務(wù)器的帶寬壓力。

分布式傳輸:CDN 可以將流量分散到多個節(jié)點,避免單點瓶頸。

高可用性:

冗余備份:CDN 通常有多個備份節(jié)點,即使某個節(jié)點出現(xiàn)故障,其他節(jié)點也能繼續(xù)提供服務(wù)。

自動故障切換:CDN 能夠自動檢測并切換到可用的節(jié)點,確保服務(wù)的連續(xù)性。

版本管理:

統(tǒng)一管理:通過 CDN 可以統(tǒng)一管理公共組件的版本,確保所有微應(yīng)用使用相同的組件版本,減少兼容性問題。

缺點

安全性問題:依賴第三方:使用第三方 CDN 服務(wù)可能會帶來安全隱患,特別是如果 CDN 提供商遭到攻擊或出現(xiàn)故障。

緩存一致性:

緩存更新延遲:CDN 的緩存機制可能導(dǎo)致更新的資源不能及時傳播到所有節(jié)點,造成版本不一致的問題。

緩存失效:需要手動管理緩存失效策略,否則可能會導(dǎo)致舊版本資源被長期緩存。

依賴性:

網(wǎng)絡(luò)依賴:如果用戶的網(wǎng)絡(luò)環(huán)境較差,可能會影響到通過 CDN 獲取資源的速度和穩(wěn)定性。

服務(wù)依賴:過度依賴 CDN 可能會導(dǎo)致在 CDN 服務(wù)出現(xiàn)問題時,整個應(yīng)用的可用性受到影響。

使用 iframe

如果組件之間的交互較少,可以考慮使用 iframe 嵌入子應(yīng)用。
在父應(yīng)用中嵌入 iframe:


優(yōu)點

隔離性強:iframe 提供了一個獨立的瀏覽上下文,能夠有效隔離不同微應(yīng)用之間的樣式和腳本,避免相互干擾。

安全性高:由于 iframe 的隔離特性,能夠防止跨站腳本攻擊(XSS)和其他安全問題。

兼容性好:iframe 是瀏覽器原生支持的技術(shù),兼容性較好,能夠在大多數(shù)現(xiàn)代瀏覽器中正常工作。

獨立部署:各個微應(yīng)用可以獨立部署和更新,不需要擔(dān)心對其他應(yīng)用的影響。

缺點

性能問題:iframe 會增加頁面的加載時間和內(nèi)存消耗,尤其是在嵌套多個 iframe 的情況下。

通信復(fù)雜:iframe 與父頁面之間的通信需要通過 postMessage 等機制實現(xiàn),增加了開發(fā)的復(fù)雜性。

SEO 不友好:搜索引擎對 iframe 內(nèi)容的抓取和索引支持較差,可能影響 SEO 效果。

樣式和布局問題:iframe 的內(nèi)容與父頁面的樣式和布局是獨立的,可能需要額外的工作來確保一致性。

調(diào)試困難:iframe 內(nèi)部的調(diào)試相對復(fù)雜,尤其是在跨域的情況下,調(diào)試工具的使用會受到限制。

總結(jié)

不同的方案有各自的特點,需要根據(jù)具體的應(yīng)用場景和需求進行權(quán)衡。

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • Web
    Web
    +關(guān)注

    關(guān)注

    2

    文章

    1287

    瀏覽量

    71380
  • 前端
    +關(guān)注

    關(guān)注

    1

    文章

    214

    瀏覽量

    18276
  • 組件
    +關(guān)注

    關(guān)注

    1

    文章

    532

    瀏覽量

    18419
收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點推薦

    恒訊科技分析:Ubuntu云服務(wù)器數(shù)據(jù)共享高效方案

    在當(dāng)今云計算時代,企業(yè)對于數(shù)據(jù)共享的需求日益增長,尤其是在使用Ubuntu云服務(wù)器的場景下,如何實現(xiàn)高效、安全的數(shù)據(jù)共享成為關(guān)鍵問題。本文將為您詳細介紹幾種主流的Ubuntu云服務(wù)器數(shù)據(jù)共享
    的頭像 發(fā)表于 07-09 21:40 ?129次閱讀

    如何監(jiān)聽組件再次顯示的事件?

    ,從掛載卸載的角度觸發(fā),也有別的方法,比如用IF來作條件渲染,即監(jiān)聽Tabs的onChange事件,然后通過IF判斷這個index,來顯示子組件,效果是能實現(xiàn)的,但是會有一個很明顯的閃爍,當(dāng)然這可
    發(fā)表于 06-30 18:02

    DataAbility組件概述介紹

    應(yīng)用存儲數(shù)據(jù)的訪問,并提供與其他應(yīng)用共享數(shù)據(jù)的方法。DataAbility既可用于同設(shè)備不同應(yīng)用的數(shù)據(jù)共享,也支持跨設(shè)備不同應(yīng)用的數(shù)據(jù)共享。 數(shù)據(jù)的存放形式多樣,可以是數(shù)據(jù)庫,也可以是
    發(fā)表于 05-28 08:19

    UIAbility組件交互(設(shè)備內(nèi))說明

    UIAbility組件交互(設(shè)備內(nèi)) UIAbility是系統(tǒng)調(diào)度的最小單元。在設(shè)備內(nèi)的功能模塊之間跳轉(zhuǎn)時,會涉及到啟動特定的UIAbility,該UIAbility可以是應(yīng)用內(nèi)的其他
    發(fā)表于 05-16 06:12

    紙基流控芯片的加工方法和優(yōu)勢

    切割精度高、速度快、切口平整、無毛刺、熱影響區(qū)小等優(yōu)點。在紙基流控芯片的加工中,主要采用二氧化碳激光器和光纖激光器。 壓印技術(shù) 壓印技術(shù)是一種將圖案文字壓印到材料表面的加工方法。它具有簡便、快速、成本低等優(yōu)點
    的頭像 發(fā)表于 02-26 15:15 ?425次閱讀

    hyper-v共享,Hyper-V 共享:Hyper-V的資源共享設(shè)置

    的解決方案。今天就為大家介紹Hyper-V共享:Hyper-V的資源共享設(shè)置。 ? ?在Hyper-V虛擬化環(huán)境中,資源共享是實現(xiàn)高效管理和靈活部署的關(guān)鍵功能之一。Hyper-V提供了
    的頭像 發(fā)表于 02-07 10:26 ?1003次閱讀
    hyper-v<b class='flag-5'>共享</b>,Hyper-V <b class='flag-5'>共享</b>:Hyper-V的資源<b class='flag-5'>共享</b>設(shè)置

    hyper-v共享,hyper-v共享:實現(xiàn)主機與虛擬機之間高效文件共享的最佳實踐

    在日常工作中,我們常常需要處理大量的文件和數(shù)據(jù),這些重復(fù)性任務(wù)不僅耗時耗力,還容易因疲勞而導(dǎo)致錯誤。幸運的是,批量管理工具的出現(xiàn)為這一問題提供了高效的解決方案。今天就為大家介紹hyper-v共享
    的頭像 發(fā)表于 01-24 14:23 ?1431次閱讀
    hyper-v<b class='flag-5'>共享</b>,hyper-v<b class='flag-5'>共享</b>:實現(xiàn)主機與虛擬機之間高效文件<b class='flag-5'>共享</b>的最佳實踐

    ADS8588在做多通道采集時,ADS8588在處理輸入信號時有幾十微秒的延時,請問有無解決前端延時的方法?

    解決前端延時方法嗎,ADS8588有帶S和帶后綴的,我們用的是帶S的,那么帶H的內(nèi)部的前端是否的延時問題是否有改進,還是只是采樣速率提高到500KSPS,請TI工程師給提供一個改進方案
    發(fā)表于 12-10 07:55

    簡述大前端技術(shù)棧的渲染原理

    應(yīng)用開發(fā):Android、iOS、鴻蒙(HarmonyOS)等; ?Web前端框架:Vue、React、Angular等; ?小程序開發(fā):信小程序、京東小程序、支付寶小程序等; ?跨平臺解決方案:React Native、Fl
    的頭像 發(fā)表于 11-07 10:11 ?655次閱讀

    前端總線與內(nèi)存頻率怎么配

    與內(nèi)存、北橋芯片等組件之間傳輸數(shù)據(jù)的通道。前端總線頻率指的是這個通道的數(shù)據(jù)傳輸速率,通常以MHz(兆赫茲)為單位。它反映了CPU與內(nèi)存之間的數(shù)據(jù)傳輸量或者說帶寬。 內(nèi)存頻率 :內(nèi)存頻率指的是內(nèi)存芯片每秒傳輸數(shù)據(jù)的次數(shù),同樣以MHz為單
    的頭像 發(fā)表于 10-12 09:10 ?929次閱讀

    前端總線頻率的類型是什么?

    前端總線(Front Side Bus,F(xiàn)SB)是計算機中處理器與主板上其他組件(如內(nèi)存、北橋芯片等)之間傳輸數(shù)據(jù)的通道。前端總線頻率是衡量這個通道傳輸數(shù)據(jù)速度的一個重要指標。前端總線
    的頭像 發(fā)表于 10-10 18:17 ?713次閱讀

    前端總線是屬于什么總線

    前端總線(Front-Side Bus,簡稱FSB)在計算機體系結(jié)構(gòu)中扮演著至關(guān)重要的角色,它屬于系統(tǒng)總線的一種,是連接CPU與主板北橋芯片(稱為內(nèi)存控制器集線器)之間的高速數(shù)據(jù)通道。以下是對前端
    的頭像 發(fā)表于 10-10 17:11 ?1365次閱讀

    前端總線頻率與外頻的區(qū)別

    ,它是計算機內(nèi)部不同組件之間通信的重要參數(shù)之一。 功能 :前端總線是CPU訪問內(nèi)存時所使用的通路,其頻率高低直接影響CPU訪問內(nèi)存的速度。前端總線頻率越大,代表著CPU與內(nèi)存之間的數(shù)據(jù)傳輸能力越大,從而能充分發(fā)揮出CPU的功能。
    的頭像 發(fā)表于 10-10 17:02 ?1292次閱讀

    LangChain框架關(guān)鍵組件的使用方法

    LangChain,開發(fā)者可以輕松構(gòu)建基于RAG或者Agent流水線的復(fù)雜應(yīng)用體系,而目前我們已經(jīng)可以在LangChain的關(guān)鍵組件LLM,Text Embedding和Reranker中直接調(diào)用OpenVINO進行模型部署,提升本地RAG和Agent服務(wù)的性能,接下來就讓我們一起看下這些
    的頭像 發(fā)表于 08-30 16:55 ?1183次閱讀
    LangChain框架關(guān)鍵<b class='flag-5'>組件</b>的使用<b class='flag-5'>方法</b>

    AFE5803高度集成的模擬前端(AFE)解決方案

    電子發(fā)燒友網(wǎng)站提供《AFE5803高度集成的模擬前端(AFE)解決方案.pdf》資料免費下載
    發(fā)表于 07-31 11:16 ?2次下載
    AFE5803高度集成的模擬<b class='flag-5'>前端</b>(AFE)解決<b class='flag-5'>方案</b>