離線 Remote 容錯：offline-remote 示例深度解析)
示例工程【免費下載鏈接】module-federation-examplesImplementation examples of module federation , by the creators of module federation項目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples點擊查看免費下載本文基于 module-federation-examples 倉庫中的 runtime-plugins/offline-remote 示例展開。該示例演示了當(dāng)一個聯(lián)邦 Remoteapp2完全離線不可用時宿主應(yīng)用app1如何通過 Runtime Plugin 的errorLoadRemote鉤子以 React 模塊的形式優(yōu)雅地渲染一段錯誤提示而不是讓頁面整體崩潰。讀完本文你將掌握 Module Federation Runtime Plugin 的注冊方式、errorLoadRemote鉤子的完整簽名與返回約定以及如何在 webpack / rspack 兩套構(gòu)建體系下復(fù)現(xiàn)并驗證這一離線容錯方案。一、背景聯(lián)邦架構(gòu)中的遠(yuǎn)端不可用問題在 Module Federation 的典型架構(gòu)中宿主Host應(yīng)用通過remotes聲明靜態(tài)或動態(tài)的遠(yuǎn)程模塊地址并在運行時按需加載remoteEntry.js。網(wǎng)絡(luò)抖動、服務(wù)重啟、版本發(fā)布窗口、灰度流量切換任何一個環(huán)節(jié)都可能讓遠(yuǎn)端容器暫時不可用。默認(rèn)情況下如果加載 remote 失敗運行時會把錯誤向上拋出頁面往往表現(xiàn)為白屏或整塊組件加載失敗用戶得不到任何可解釋的反饋。module-federation-examples 倉庫在 runtime-plugins/README.md 中把 Runtime Plugin 定義為「將產(chǎn)品策略從 Module Federation 核心中移出放進(jìn)可組合的鉤子」核心運行時負(fù)責(zé)穩(wěn)定的加載、共享、快照與工廠執(zhí)行語義而 Runtime Plugin 負(fù)責(zé)定制諸如請求路由、fallback 模塊、共享選擇、資源加載、預(yù)加載行為與遙測等策略。其中與遠(yuǎn)程策略相關(guān)的鉤子族Remote policy包含beforeRequest、errorLoadRemote、afterLoadRemote而offline-remote正是errorLoadRemote這一鉤子的最小可運行范例。二、示例架構(gòu)雙向聯(lián)邦但只啟動 app1offline-remote目錄下包含兩個相互引用的應(yīng)用屬于典型的雙向聯(lián)邦bi-directional結(jié)構(gòu)應(yīng)用目錄端口暴露模塊引用對方app1runtime-plugins/offline-remote/app13001./Buttonapp2http://localhost:3002/remoteEntry.jsapp2runtime-plugins/offline-remote/app23002./Buttonapp1http://localhost:3001/remoteEntry.js演示的關(guān)鍵前提是只啟動 app1app2 保持離線。當(dāng)瀏覽器訪問http://localhost:3001時app1 嘗試從 3002 端口加載 app2 的remoteEntry.js必然失敗此時offline-remote插件捕獲錯誤并以 React 模塊形式渲染錯誤信息。這一結(jié)論在 runtime-plugins/offline-remote/playwright.config.ts 中可以得到印證——它的webServers只配置了{(lán) directory: app1, port: 3001 }這一個服務(wù)export default createRuntimePluginPlaywrightConfig({ webServers: [{ directory: app1, port: 3001 }], });兩個應(yīng)用的package.json還刻意制造了版本差異app1 使用react^17.0.2與lodash^4.17.21app2 使用react^16.13.0與lodash^3.10.1并在各自的shared配置中把react、react-dom聲明為singleton: true用于驗證共享策略在不同版本依賴共存時的行為但這與離線容錯主線無關(guān)本文不再展開。三、核心實現(xiàn)errorLoadRemote 鉤子與 fallback 模塊整個示例的靈魂是 app1 目錄下的插件文件 runtime-plugins/offline-remote/app1/offline-remote.js。它導(dǎo)出一個工廠函數(shù)返回一個帶name與errorLoadRemote鉤子的插件對象export default function () { const getErrorMessage (id, error) remote ${id} is offline due to error: ${error}; const getModule (pg, from) { if (from build) { return () ({ __esModule: true, default: pg, }); } else { return { default: pg, }; } }; return { name: offline-remote-plugin, errorLoadRemote({ id, error, from, origin }) { console.error(id, offline); const pg function () { console.error(id, offline, error); return getErrorMessage(id, error); }; return getModule(pg, from); }, }; }3.1 鉤子簽名errorLoadRemote({ id, error, from, origin })errorLoadRemote是 Module Federation 運行時在加載遠(yuǎn)程模塊失敗時調(diào)用的策略鉤子。從源碼參數(shù)可以看出它暴露了四個上下文信息id失敗的遠(yuǎn)程標(biāo)識。在 e2e 測試注釋中可以看到啟用asyncStartup后錯誤鉤子可能上報完整的模塊 id例如app2/Button而不僅僅是容器名app2error底層加載錯誤對象被拼接到最終的錯誤文案中from加載來源標(biāo)識offline-remote.js中區(qū)分了build與非build兩種路徑直接決定了 fallback 模塊的包裝形態(tài)詳見 3.2origin觸發(fā)錯誤的原始上下文。該鉤子的返回值將作為加載失敗的替代模塊交付給宿主應(yīng)用從而把「加載失敗」轉(zhuǎn)譯為「一個可渲染的兜底模塊」——這正是 Runtime Plugin 把策略從核心中剝離出來的典型體現(xiàn)。3.2from build分支兩種模塊包裝形態(tài)getModule(pg, from)根據(jù)from參數(shù)決定如何包裝兜底內(nèi)容當(dāng)from build時返回一個延遲工廠函數(shù)該函數(shù)每次被調(diào)用時生成{ __esModule: true, default: pg }形式的 ES Module 描述對象。這種形態(tài)用于構(gòu)建期/模塊描述階段需要標(biāo)記__esModule以兼容轉(zhuǎn)譯后的 ES Module 語義其他情況下直接返回{ default: pg }對象這是運行時常見的模塊描述形態(tài)。3.3 兜底內(nèi)容本身是一個渲染時再報錯的函數(shù)pg被設(shè)計成一個函數(shù)調(diào)用時打印console.error(id, offline, error)并返回getErrorMessage(id, error)拼出的字符串即remote ${id} is offline due to error: ${error}。由于errorLoadRemote返回的模塊會被宿主當(dāng)作 React 組件來渲染這個函數(shù)在 React 中恰好是一個無狀態(tài)函數(shù)組件——它在渲染時返回錯誤文本。于是整個鏈路變成了app1 渲染RemoteButton來自app2/Button時觸發(fā)遠(yuǎn)程加載加載失敗 → 運行時調(diào)用errorLoadRemote插件返回一個「渲染時才輸出錯誤文案」的兜底組件該組件在頁面上渲染出remote app2 is offline due to error: ...的提示。這樣既繞過了「加載失敗即拋錯」的默認(rèn)行為又保留了錯誤信息本身讓用戶看到的是可讀的提示而非空白頁面。3.4 TypeScript 版本類型化的插件工廠倉庫還提供了同名的 TypeScript 版本 runtime-plugins/offline-remote/app1/offline-remote.ts內(nèi)容非常精簡但點明了插件類型體系import type { FederationRuntimePlugin } from module-federation/runtime/types; import offlineRemotePlugin from ./offline-remote.js; export default offlineRemotePlugin as () FederationRuntimePlugin;它從module-federation/runtime/types引入FederationRuntimePlugin類型并把 JS 版本的工廠函數(shù)斷言為該類型的工廠。這說明在 TypeScript 工程中插件必須滿足FederationRuntimePlugin的結(jié)構(gòu)約束name 若干可選鉤子rspack 配置正是通過require.resolve(./offline-remote.ts)直接引用這個 TS 文件作為 runtime 插件。四、插件接入webpack 與 rspack 雙配置Runtime Plugin 的接入入口是 ModuleFederationPlugin 的runtimePlugins配置項。該選項接收一組模塊解析路徑構(gòu)建時這些插件會被注入聯(lián)邦運行時。4.1 webpack 版本legacywebpack 配置位于 runtime-plugins/offline-remote/app1/webpack.config.js核心片段如下const { ModuleFederationPlugin } require(module-federation/enhanced/webpack); new ModuleFederationPlugin({ experiments: { asyncStartup: true }, name: app1, remoteType: script, library: { type: var, name: app1 }, shareStrategy: loaded-first, filename: remoteEntry.js, remotes: { app2: app2http://localhost:3002/remoteEntry.js, }, runtimePlugins: [require.resolve(./offline-remote.js)], exposes: { ./Button: ./src/Button, }, shared: { ...deps, react: { singleton: true }, react-dom: { singleton: true }, }, }),這里有幾個關(guān)鍵配置項值得展開runtimePlugins: [require.resolve(./offline-remote.js)]通過require.resolve把插件文件的絕對路徑交給運行時是插件生效的唯一入口experiments: { asyncStartup: true }啟用異步啟動。e2e 測試注釋專門提到「With async startup the runtime error hook may report the full module id」即異步啟動模式下錯誤鉤子上報的 id 粒度可能細(xì)化到app2/Button這樣的模塊級remoteType: script與library: { type: var, name: app1 }以全局變量方式暴露 remote 容器配合靜態(tài)remotes聲明確保兩應(yīng)用以經(jīng)典 script 方式互相發(fā)現(xiàn)shareStrategy: loaded-first共享依賴采用「已加載優(yōu)先」的解析策略。4.2 rspack 版本默認(rèn)rspack 配置位于 runtime-plugins/offline-remote/app1/rspack.config.js與 webpack 版本的關(guān)鍵差異體現(xiàn)在三處插件類從module-federation/enhanced/rspack導(dǎo)入HTML 插件使用rspack/core的HtmlRspackPluginruntimePlugins引用的是 TypeScript 插件文件runtimePlugins: [require.resolve(./offline-remote.ts)]模塊編譯走builtin:swc-loader.js與.ts分別配置了 JSX 與 TypeScript 解析器React 采用runtime: automatic的自動 JSX 運行時。兩個配置在name: app1、filename: remoteEntry.js、remotes.app2、exposes[./Button]、shared策略上保持一致說明同一份 Runtime Plugin 邏輯可以在兩套構(gòu)建體系下無差別工作。app2 的對應(yīng)配置見 runtime-plugins/offline-remote/app2/webpack.config.js 與 runtime-plugins/offline-remote/app2/rspack.config.js其中shared.lodash被顯式聲明為{}不加 singleton 約束用于承載版本差異。4.3 插件鉤子覆蓋面速查根據(jù) runtime-plugins/README.md 的鉤子總覽offline-remote屬于「Remote policy」這一鉤子族的示例與其他示例的覆蓋關(guān)系如下Hook 族Hooks覆蓋示例Remote policybeforeRequest、errorLoadRemote、afterLoadRemoteremote-router、offline-remoteBootstrapbeforeInit、init、applycontrol-sharing、remote-control等Share policybeforeLoadShare、resolveSharecontrol-sharing、multiple-react-versions等Loader policycreateScript、afterLoadEntryremote-routerFactory executiononLoadmultiple-react-versionsPreload policybeforePreloadRemote、generatePreloadAssetsremote-router五、宿主應(yīng)用如何消費兜底模塊5.1 組件樹與 Suspenseapp1 的入口 runtime-plugins/offline-remote/app1/src/index.js 使用經(jīng)典的ReactDOM.render掛載根組件。根組件 runtime-plugins/offline-remote/app1/src/App.js 中遠(yuǎn)程按鈕的消費方式如下import RemoteButton from app2/Button; React.Suspense fallbackLoading Button RemoteButton / /React.Suspenseapp2/Button是聲明在remotes中的靜態(tài)遠(yuǎn)程模塊加載被包在React.Suspense中。當(dāng)遠(yuǎn)程加載失敗時errorLoadRemote返回的兜底模塊會替代真實的Button進(jìn)入 Suspense 的渲染流程——它本身是一個同步函數(shù)組件因此會立即渲染出remote app2 is offline due to error: ...文本。5.2 使用__FEDERATION__.__INSTANCES__展示在線 RemoteApp.js 中還有一段值得注意的代碼它遍歷聯(lián)邦運行時的實例列表把當(dāng)前參與聯(lián)邦的應(yīng)用名以哈希顏色塊展示出來{__FEDERATION__.__INSTANCES__.map(inst ( span style{{ padding: 10, color: #fff, background: getColorFromString(inst.name.split().reverse().join()), }} key{inst.name} {inst.name} /span ))}__FEDERATION__.__INSTANCES__是運行時暴露的全局聯(lián)邦實例集合這一行代碼展示了如何在宿主頁面內(nèi)直接觀測運行時注冊了哪些聯(lián)邦實例可作為排查 remote 是否被正確發(fā)現(xiàn)的輔助手段。頁面中的 Reset 按鈕會清空localStorage中的button鍵并刷新頁面用于復(fù)位 app2 按鈕此前寫入的持久化狀態(tài)見 runtime-plugins/offline-remote/app2/src/Button.js 中的localStorage.setItem(button, green)。六、運行方式與端到端驗證6.1 包管理與啟動腳本整個示例通過 runtime-plugins/offline-remote/package.json 以 pnpm workspace 管理兩個應(yīng)用常用命令如下命令作用pnpm start僅啟動 app1offline-remote_app1用于演示離線場景pnpm start:both并行啟動 app1 與 app2pnpm build并行構(gòu)建兩個應(yīng)用pnpm serve以靜態(tài)服務(wù)器分別服務(wù)兩應(yīng)用構(gòu)建產(chǎn)物pnpm legacy:start使用 webpack 配置而非默認(rèn) rspack啟動pnpm e2e:ci構(gòu)建后運行 Playwright 端到端測試默認(rèn)啟動命令為rspack serve -c rspack.config.js構(gòu)建命令為rspack build --mode production -c rspack.config.js對應(yīng)的 webpack 版本由legacy:start/legacy:build提供。演示離線場景只需執(zhí)行pnpm start然后訪問http://localhost:3001頁面標(biāo)題為 Offline Remote下方會展示當(dāng)前聯(lián)邦實例名與本地按鈕而遠(yuǎn)程按鈕區(qū)域渲染的是離線錯誤提示。6.2 e2e 測試斷言測試文件 runtime-plugins/offline-remote/e2e/checkAutomaticVendorApps.spec.ts 把離線行為固化為可回歸的斷言斷言 H1 標(biāo)題 Offline Remote 與 H2 標(biāo)題 Remotes currently in use 可見斷言本地按鈕App 1 Button可見且背景色為rgb(136, 0, 0)對應(yīng) runtime-plugins/offline-remote/app1/src/Button.js 中background: #800的樣式斷言頁面出現(xiàn)匹配/remote app2(\/Button)? is offline/i的文本這正是errorLoadRemote返回的兜底組件渲染出的錯誤文案正則中的可選組(\/Button)?兼容了異步啟動模式下模塊級 idapp2/Button與容器級 idapp2兩種上報粒度。Playwright 配置復(fù)用了 runtime-plugins/playwright.base.ts 提供的createRuntimePluginPlaywrightConfig工廠僅在webServers中聲明 app1從而保證測試環(huán)境與「app2 離線」的演示前提一致。七、生產(chǎn)實踐要點基于對離線容錯插件的完整剖析可以沉淀出以下可直接遷移到生產(chǎn)項目的實踐要點把「加載失敗」轉(zhuǎn)譯為「可渲染兜底」errorLoadRemote的返回值是替代模塊最小實現(xiàn)是返回一個函數(shù)組件渲染時輸出可讀文案同時用console.error保留錯誤現(xiàn)場復(fù)雜的生產(chǎn)實現(xiàn)可以在此返回更完整的占位組件、重試按鈕甚至降級數(shù)據(jù)流。兼容from的兩種加載來源插件代碼中from build分支提醒我們運行時存在構(gòu)建期與運行期兩種模塊獲取路徑兜底模塊的包裝形態(tài)需要分別處理否則可能出現(xiàn)__esModule語義或模塊工廠形態(tài)不匹配的問題。區(qū)分容器級與模塊級的錯誤 id啟用experiments.asyncStartup后id可能攜帶app2/Button這樣的完整模塊路徑錯誤文案與日志統(tǒng)計的解析邏輯應(yīng)兼容兩種粒度。插件與構(gòu)建體系解耦同一個插件邏輯既可以在 webpack 的module-federation/enhanced/webpack下通過runtimePlugins: [require.resolve(./offline-remote.js)]接入也可以在 rspack 的module-federation/enhanced/rspack下通過runtimePlugins: [require.resolve(./offline-remote.ts)]接入且兩者共享相同的運行時行為——這意味著插件代碼本身與打包器無關(guān)只需滿足FederationRuntimePlugin類型約束即可。用端到端測試固化離線行為把「遠(yuǎn)端離線時頁面渲染特定錯誤文案」寫成 Playwright 斷言并讓測試服務(wù)只啟動宿主應(yīng)用就能持續(xù)守護(hù)這一容錯能力不被后續(xù)改動破壞。如需繼續(xù)深入可對照閱讀同目錄下的其他 Runtime Plugin 示例runtime-plugins/control-sharing、runtime-plugins/remote-router、runtime-plugins/multiple-react-versions 等它們分別演示了共享解析、請求路由、腳本加載、預(yù)加載與多版本 React 共存等不同鉤子族可幫助你拼出 Runtime Plugin 能力的完整版圖。贊分享示例工程【免費下載鏈接】module-federation-examplesImplementation examples of module federation , by the creators of module federation項目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples點擊查看免費下載相關(guān)推薦LeetCode算法極限性能優(yōu)化10個高效實現(xiàn)策略與多語言解決方案指南LeetCode算法極限性能優(yōu)化10個高效實現(xiàn)策略與多語言解決方案指南 LeetCode算法刷題是程序員提升編程能力的必經(jīng)之路但如何在有限時間內(nèi)實現(xiàn)最優(yōu)解示例工程Module Federation 運行時插件實戰(zhàn)remote-control 示例中基于 Runtime Plugin 的動態(tài)遠(yuǎn)程控制 Remote 加載Module Federation 運行時插件實戰(zhàn)remote control 示例中基于 Runtime Plugin 的動態(tài)遠(yuǎn)程控制 Remote 加載示例工程Module Federation 實戰(zhàn)用 Vite Angular 構(gòu)建 host/remote 微前端module-federation-vite-angular 示例解析Module Federation 實戰(zhàn)用 Vite Angular 構(gòu)建 host/remote 微前端module federation vite示例工程上一篇3個核心痛點為什么你的Mac多任務(wù)處理效率低下下一篇bup cat-file 深度指南從 bup 歸檔中低層提取文件內(nèi)容、元數(shù)據(jù)與 .bupm 目錄清單創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 使用 Module Federation Runtime Plugin 實現(xiàn)離線 Remote 容錯：offline-remote 示例深度解析
示例工程【免費下載鏈接】module-federation-examplesImplementation examples of module federation , by the creators of module federation項目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples點擊查看免費下載本文基于 module-federation-examples 倉庫中的 runtime-plugins/offline-remote 示例展開。該示例演示了當(dāng)一個聯(lián)邦 Remoteapp2完全離線不可用時宿主應(yīng)用app1如何通過 Runtime Plugin 的errorLoadRemote鉤子以 React 模塊的形式優(yōu)雅地渲染一段錯誤提示而不是讓頁面整體崩潰。讀完本文你將掌握 Module Federation Runtime Plugin 的注冊方式、errorLoadRemote鉤子的完整簽名與返回約定以及如何在 webpack / rspack 兩套構(gòu)建體系下復(fù)現(xiàn)并驗證這一離線容錯方案。一、背景聯(lián)邦架構(gòu)中的遠(yuǎn)端不可用問題在 Module Federation 的典型架構(gòu)中宿主Host應(yīng)用通過remotes聲明靜態(tài)或動態(tài)的遠(yuǎn)程模塊地址并在運行時按需加載remoteEntry.js。網(wǎng)絡(luò)抖動、服務(wù)重啟、版本發(fā)布窗口、灰度流量切換任何一個環(huán)節(jié)都可能讓遠(yuǎn)端容器暫時不可用。默認(rèn)情況下如果加載 remote 失敗運行時會把錯誤向上拋出頁面往往表現(xiàn)為白屏或整塊組件加載失敗用戶得不到任何可解釋的反饋。module-federation-examples 倉庫在 runtime-plugins/README.md 中把 Runtime Plugin 定義為「將產(chǎn)品策略從 Module Federation 核心中移出放進(jìn)可組合的鉤子」核心運行時負(fù)責(zé)穩(wěn)定的加載、共享、快照與工廠執(zhí)行語義而 Runtime Plugin 負(fù)責(zé)定制諸如請求路由、fallback 模塊、共享選擇、資源加載、預(yù)加載行為與遙測等策略。其中與遠(yuǎn)程策略相關(guān)的鉤子族Remote policy包含beforeRequest、errorLoadRemote、afterLoadRemote而offline-remote正是errorLoadRemote這一鉤子的最小可運行范例。二、示例架構(gòu)雙向聯(lián)邦但只啟動 app1offline-remote目錄下包含兩個相互引用的應(yīng)用屬于典型的雙向聯(lián)邦bi-directional結(jié)構(gòu)應(yīng)用目錄端口暴露模塊引用對方app1runtime-plugins/offline-remote/app13001./Buttonapp2http://localhost:3002/remoteEntry.jsapp2runtime-plugins/offline-remote/app23002./Buttonapp1http://localhost:3001/remoteEntry.js演示的關(guān)鍵前提是只啟動 app1app2 保持離線。當(dāng)瀏覽器訪問http://localhost:3001時app1 嘗試從 3002 端口加載 app2 的remoteEntry.js必然失敗此時offline-remote插件捕獲錯誤并以 React 模塊形式渲染錯誤信息。這一結(jié)論在 runtime-plugins/offline-remote/playwright.config.ts 中可以得到印證——它的webServers只配置了{(lán) directory: app1, port: 3001 }這一個服務(wù)export default createRuntimePluginPlaywrightConfig({ webServers: [{ directory: app1, port: 3001 }], });兩個應(yīng)用的package.json還刻意制造了版本差異app1 使用react^17.0.2與lodash^4.17.21app2 使用react^16.13.0與lodash^3.10.1并在各自的shared配置中把react、react-dom聲明為singleton: true用于驗證共享策略在不同版本依賴共存時的行為但這與離線容錯主線無關(guān)本文不再展開。三、核心實現(xiàn)errorLoadRemote 鉤子與 fallback 模塊整個示例的靈魂是 app1 目錄下的插件文件 runtime-plugins/offline-remote/app1/offline-remote.js。它導(dǎo)出一個工廠函數(shù)返回一個帶name與errorLoadRemote鉤子的插件對象export default function () { const getErrorMessage (id, error) remote ${id} is offline due to error: ${error}; const getModule (pg, from) { if (from build) { return () ({ __esModule: true, default: pg, }); } else { return { default: pg, }; } }; return { name: offline-remote-plugin, errorLoadRemote({ id, error, from, origin }) { console.error(id, offline); const pg function () { console.error(id, offline, error); return getErrorMessage(id, error); }; return getModule(pg, from); }, }; }3.1 鉤子簽名errorLoadRemote({ id, error, from, origin })errorLoadRemote是 Module Federation 運行時在加載遠(yuǎn)程模塊失敗時調(diào)用的策略鉤子。從源碼參數(shù)可以看出它暴露了四個上下文信息id失敗的遠(yuǎn)程標(biāo)識。在 e2e 測試注釋中可以看到啟用asyncStartup后錯誤鉤子可能上報完整的模塊 id例如app2/Button而不僅僅是容器名app2error底層加載錯誤對象被拼接到最終的錯誤文案中from加載來源標(biāo)識offline-remote.js中區(qū)分了build與非build兩種路徑直接決定了 fallback 模塊的包裝形態(tài)詳見 3.2origin觸發(fā)錯誤的原始上下文。該鉤子的返回值將作為加載失敗的替代模塊交付給宿主應(yīng)用從而把「加載失敗」轉(zhuǎn)譯為「一個可渲染的兜底模塊」——這正是 Runtime Plugin 把策略從核心中剝離出來的典型體現(xiàn)。3.2from build分支兩種模塊包裝形態(tài)getModule(pg, from)根據(jù)from參數(shù)決定如何包裝兜底內(nèi)容當(dāng)from build時返回一個延遲工廠函數(shù)該函數(shù)每次被調(diào)用時生成{ __esModule: true, default: pg }形式的 ES Module 描述對象。這種形態(tài)用于構(gòu)建期/模塊描述階段需要標(biāo)記__esModule以兼容轉(zhuǎn)譯后的 ES Module 語義其他情況下直接返回{ default: pg }對象這是運行時常見的模塊描述形態(tài)。3.3 兜底內(nèi)容本身是一個渲染時再報錯的函數(shù)pg被設(shè)計成一個函數(shù)調(diào)用時打印console.error(id, offline, error)并返回getErrorMessage(id, error)拼出的字符串即remote ${id} is offline due to error: ${error}。由于errorLoadRemote返回的模塊會被宿主當(dāng)作 React 組件來渲染這個函數(shù)在 React 中恰好是一個無狀態(tài)函數(shù)組件——它在渲染時返回錯誤文本。于是整個鏈路變成了app1 渲染RemoteButton來自app2/Button時觸發(fā)遠(yuǎn)程加載加載失敗 → 運行時調(diào)用errorLoadRemote插件返回一個「渲染時才輸出錯誤文案」的兜底組件該組件在頁面上渲染出remote app2 is offline due to error: ...的提示。這樣既繞過了「加載失敗即拋錯」的默認(rèn)行為又保留了錯誤信息本身讓用戶看到的是可讀的提示而非空白頁面。3.4 TypeScript 版本類型化的插件工廠倉庫還提供了同名的 TypeScript 版本 runtime-plugins/offline-remote/app1/offline-remote.ts內(nèi)容非常精簡但點明了插件類型體系import type { FederationRuntimePlugin } from module-federation/runtime/types; import offlineRemotePlugin from ./offline-remote.js; export default offlineRemotePlugin as () FederationRuntimePlugin;它從module-federation/runtime/types引入FederationRuntimePlugin類型并把 JS 版本的工廠函數(shù)斷言為該類型的工廠。這說明在 TypeScript 工程中插件必須滿足FederationRuntimePlugin的結(jié)構(gòu)約束name 若干可選鉤子rspack 配置正是通過require.resolve(./offline-remote.ts)直接引用這個 TS 文件作為 runtime 插件。四、插件接入webpack 與 rspack 雙配置Runtime Plugin 的接入入口是 ModuleFederationPlugin 的runtimePlugins配置項。該選項接收一組模塊解析路徑構(gòu)建時這些插件會被注入聯(lián)邦運行時。4.1 webpack 版本legacywebpack 配置位于 runtime-plugins/offline-remote/app1/webpack.config.js核心片段如下const { ModuleFederationPlugin } require(module-federation/enhanced/webpack); new ModuleFederationPlugin({ experiments: { asyncStartup: true }, name: app1, remoteType: script, library: { type: var, name: app1 }, shareStrategy: loaded-first, filename: remoteEntry.js, remotes: { app2: app2http://localhost:3002/remoteEntry.js, }, runtimePlugins: [require.resolve(./offline-remote.js)], exposes: { ./Button: ./src/Button, }, shared: { ...deps, react: { singleton: true }, react-dom: { singleton: true }, }, }),這里有幾個關(guān)鍵配置項值得展開runtimePlugins: [require.resolve(./offline-remote.js)]通過require.resolve把插件文件的絕對路徑交給運行時是插件生效的唯一入口experiments: { asyncStartup: true }啟用異步啟動。e2e 測試注釋專門提到「With async startup the runtime error hook may report the full module id」即異步啟動模式下錯誤鉤子上報的 id 粒度可能細(xì)化到app2/Button這樣的模塊級remoteType: script與library: { type: var, name: app1 }以全局變量方式暴露 remote 容器配合靜態(tài)remotes聲明確保兩應(yīng)用以經(jīng)典 script 方式互相發(fā)現(xiàn)shareStrategy: loaded-first共享依賴采用「已加載優(yōu)先」的解析策略。4.2 rspack 版本默認(rèn)rspack 配置位于 runtime-plugins/offline-remote/app1/rspack.config.js與 webpack 版本的關(guān)鍵差異體現(xiàn)在三處插件類從module-federation/enhanced/rspack導(dǎo)入HTML 插件使用rspack/core的HtmlRspackPluginruntimePlugins引用的是 TypeScript 插件文件runtimePlugins: [require.resolve(./offline-remote.ts)]模塊編譯走builtin:swc-loader.js與.ts分別配置了 JSX 與 TypeScript 解析器React 采用runtime: automatic的自動 JSX 運行時。兩個配置在name: app1、filename: remoteEntry.js、remotes.app2、exposes[./Button]、shared策略上保持一致說明同一份 Runtime Plugin 邏輯可以在兩套構(gòu)建體系下無差別工作。app2 的對應(yīng)配置見 runtime-plugins/offline-remote/app2/webpack.config.js 與 runtime-plugins/offline-remote/app2/rspack.config.js其中shared.lodash被顯式聲明為{}不加 singleton 約束用于承載版本差異。4.3 插件鉤子覆蓋面速查根據(jù) runtime-plugins/README.md 的鉤子總覽offline-remote屬于「Remote policy」這一鉤子族的示例與其他示例的覆蓋關(guān)系如下Hook 族Hooks覆蓋示例Remote policybeforeRequest、errorLoadRemote、afterLoadRemoteremote-router、offline-remoteBootstrapbeforeInit、init、applycontrol-sharing、remote-control等Share policybeforeLoadShare、resolveSharecontrol-sharing、multiple-react-versions等Loader policycreateScript、afterLoadEntryremote-routerFactory executiononLoadmultiple-react-versionsPreload policybeforePreloadRemote、generatePreloadAssetsremote-router五、宿主應(yīng)用如何消費兜底模塊5.1 組件樹與 Suspenseapp1 的入口 runtime-plugins/offline-remote/app1/src/index.js 使用經(jīng)典的ReactDOM.render掛載根組件。根組件 runtime-plugins/offline-remote/app1/src/App.js 中遠(yuǎn)程按鈕的消費方式如下import RemoteButton from app2/Button; React.Suspense fallbackLoading Button RemoteButton / /React.Suspenseapp2/Button是聲明在remotes中的靜態(tài)遠(yuǎn)程模塊加載被包在React.Suspense中。當(dāng)遠(yuǎn)程加載失敗時errorLoadRemote返回的兜底模塊會替代真實的Button進(jìn)入 Suspense 的渲染流程——它本身是一個同步函數(shù)組件因此會立即渲染出remote app2 is offline due to error: ...文本。5.2 使用__FEDERATION__.__INSTANCES__展示在線 RemoteApp.js 中還有一段值得注意的代碼它遍歷聯(lián)邦運行時的實例列表把當(dāng)前參與聯(lián)邦的應(yīng)用名以哈希顏色塊展示出來{__FEDERATION__.__INSTANCES__.map(inst ( span style{{ padding: 10, color: #fff, background: getColorFromString(inst.name.split().reverse().join()), }} key{inst.name} {inst.name} /span ))}__FEDERATION__.__INSTANCES__是運行時暴露的全局聯(lián)邦實例集合這一行代碼展示了如何在宿主頁面內(nèi)直接觀測運行時注冊了哪些聯(lián)邦實例可作為排查 remote 是否被正確發(fā)現(xiàn)的輔助手段。頁面中的 Reset 按鈕會清空localStorage中的button鍵并刷新頁面用于復(fù)位 app2 按鈕此前寫入的持久化狀態(tài)見 runtime-plugins/offline-remote/app2/src/Button.js 中的localStorage.setItem(button, green)。六、運行方式與端到端驗證6.1 包管理與啟動腳本整個示例通過 runtime-plugins/offline-remote/package.json 以 pnpm workspace 管理兩個應(yīng)用常用命令如下命令作用pnpm start僅啟動 app1offline-remote_app1用于演示離線場景pnpm start:both并行啟動 app1 與 app2pnpm build并行構(gòu)建兩個應(yīng)用pnpm serve以靜態(tài)服務(wù)器分別服務(wù)兩應(yīng)用構(gòu)建產(chǎn)物pnpm legacy:start使用 webpack 配置而非默認(rèn) rspack啟動pnpm e2e:ci構(gòu)建后運行 Playwright 端到端測試默認(rèn)啟動命令為rspack serve -c rspack.config.js構(gòu)建命令為rspack build --mode production -c rspack.config.js對應(yīng)的 webpack 版本由legacy:start/legacy:build提供。演示離線場景只需執(zhí)行pnpm start然后訪問http://localhost:3001頁面標(biāo)題為 Offline Remote下方會展示當(dāng)前聯(lián)邦實例名與本地按鈕而遠(yuǎn)程按鈕區(qū)域渲染的是離線錯誤提示。6.2 e2e 測試斷言測試文件 runtime-plugins/offline-remote/e2e/checkAutomaticVendorApps.spec.ts 把離線行為固化為可回歸的斷言斷言 H1 標(biāo)題 Offline Remote 與 H2 標(biāo)題 Remotes currently in use 可見斷言本地按鈕App 1 Button可見且背景色為rgb(136, 0, 0)對應(yīng) runtime-plugins/offline-remote/app1/src/Button.js 中background: #800的樣式斷言頁面出現(xiàn)匹配/remote app2(\/Button)? is offline/i的文本這正是errorLoadRemote返回的兜底組件渲染出的錯誤文案正則中的可選組(\/Button)?兼容了異步啟動模式下模塊級 idapp2/Button與容器級 idapp2兩種上報粒度。Playwright 配置復(fù)用了 runtime-plugins/playwright.base.ts 提供的createRuntimePluginPlaywrightConfig工廠僅在webServers中聲明 app1從而保證測試環(huán)境與「app2 離線」的演示前提一致。七、生產(chǎn)實踐要點基于對離線容錯插件的完整剖析可以沉淀出以下可直接遷移到生產(chǎn)項目的實踐要點把「加載失敗」轉(zhuǎn)譯為「可渲染兜底」errorLoadRemote的返回值是替代模塊最小實現(xiàn)是返回一個函數(shù)組件渲染時輸出可讀文案同時用console.error保留錯誤現(xiàn)場復(fù)雜的生產(chǎn)實現(xiàn)可以在此返回更完整的占位組件、重試按鈕甚至降級數(shù)據(jù)流。兼容from的兩種加載來源插件代碼中from build分支提醒我們運行時存在構(gòu)建期與運行期兩種模塊獲取路徑兜底模塊的包裝形態(tài)需要分別處理否則可能出現(xiàn)__esModule語義或模塊工廠形態(tài)不匹配的問題。區(qū)分容器級與模塊級的錯誤 id啟用experiments.asyncStartup后id可能攜帶app2/Button這樣的完整模塊路徑錯誤文案與日志統(tǒng)計的解析邏輯應(yīng)兼容兩種粒度。插件與構(gòu)建體系解耦同一個插件邏輯既可以在 webpack 的module-federation/enhanced/webpack下通過runtimePlugins: [require.resolve(./offline-remote.js)]接入也可以在 rspack 的module-federation/enhanced/rspack下通過runtimePlugins: [require.resolve(./offline-remote.ts)]接入且兩者共享相同的運行時行為——這意味著插件代碼本身與打包器無關(guān)只需滿足FederationRuntimePlugin類型約束即可。用端到端測試固化離線行為把「遠(yuǎn)端離線時頁面渲染特定錯誤文案」寫成 Playwright 斷言并讓測試服務(wù)只啟動宿主應(yīng)用就能持續(xù)守護(hù)這一容錯能力不被后續(xù)改動破壞。如需繼續(xù)深入可對照閱讀同目錄下的其他 Runtime Plugin 示例runtime-plugins/control-sharing、runtime-plugins/remote-router、runtime-plugins/multiple-react-versions 等它們分別演示了共享解析、請求路由、腳本加載、預(yù)加載與多版本 React 共存等不同鉤子族可幫助你拼出 Runtime Plugin 能力的完整版圖。贊分享示例工程【免費下載鏈接】module-federation-examplesImplementation examples of module federation , by the creators of module federation項目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples點擊查看免費下載相關(guān)推薦LeetCode算法極限性能優(yōu)化10個高效實現(xiàn)策略與多語言解決方案指南LeetCode算法極限性能優(yōu)化10個高效實現(xiàn)策略與多語言解決方案指南 LeetCode算法刷題是程序員提升編程能力的必經(jīng)之路但如何在有限時間內(nèi)實現(xiàn)最優(yōu)解示例工程Module Federation 運行時插件實戰(zhàn)remote-control 示例中基于 Runtime Plugin 的動態(tài)遠(yuǎn)程控制 Remote 加載Module Federation 運行時插件實戰(zhàn)remote control 示例中基于 Runtime Plugin 的動態(tài)遠(yuǎn)程控制 Remote 加載示例工程Module Federation 實戰(zhàn)用 Vite Angular 構(gòu)建 host/remote 微前端module-federation-vite-angular 示例解析Module Federation 實戰(zhàn)用 Vite Angular 構(gòu)建 host/remote 微前端module federation vite示例工程上一篇3個核心痛點為什么你的Mac多任務(wù)處理效率低下下一篇bup cat-file 深度指南從 bup 歸檔中低層提取文件內(nèi)容、元數(shù)據(jù)與 .bupm 目錄清單創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考