Bridge 概览
介绍
bridge 是 Module Federation 提供的工具函数，用于帮助用户通过 Module Federation 来加载应用级别模块。它能自动提供 provider 函数所需的应用生命周期函数 render 和 destroy，并实现框架不同版本的兼容。此外，它还能让应用间的路由正常协同工作。
工具包
@module-federation/bridge-react
@module-federation/bridge-react 工具包是 MF 为 React v16、v17、v18 应用 提供的 bridge 工具函数包，其导出的 createBridgeComponent 可用于 react v18 应用的导出模块，@module-federation/bridge-react 的使用见 Host demo、Remote demo。
@module-federation/bridge-vue3
@module-federation/bridge-vue3 工具包是 MF 为 Vue v3 应用 提供的 bridge 工具函数包，其导出的 createBridgeComponent 可用于 Vue v3 子应用的导出模块，@module-federation/bridge-vue3 的使用见 Host demo、Remote demo。
FAQ
Why Bridge?
Bridge 主要用于解决两个问题：
- 跨应用框架（React、Vue）加载和渲染
- 支持加载带路由的模块（路由可以很好的协同工作）
这两个问题都是「微前端框架」里重要的特性
未提供对应框架的 bridge 如何解决？
目前 Module Federation 提供了官方的 bridge 工具包，如果你需要其他框架的 bridge 工具包，可以通过 issue 给我们提供反馈，也可以参考现有的 Bridge 如何实现.
Bridge 的实现非常简单，核心就是基于 DOM 渲染，下面是伪代码：
导出模块
export default function () {
const rootMap = new Map<any, ReactDOM.Root>();
return {
render(info: { dom: HTMLElement; basename?: string; memoryRoute?: { entryPath: string; } }) {
const root = ReactDOM.createRoot(info.dom);
rootMap.set(info.dom, root);
root.render(
<App />,
);
},
destroy(info: { dom: HTMLElement }) {
const root = rootMap.get(info.dom);
root?.unmount();
},
}
}
加载模块
const LazyComponent = React.lazy(async () => {
const m = await loadRemote('remote1/export-app');
const providerInfo = m.default;
return {
default: () => {
const rootRef = useRef(null);
const providerInfoRef = useRef<any>(null);
useEffect(() => {
const providerReturn = providerInfo();
providerInfoRef.current = providerReturn;
providerReturn.render(renderProps);
return () => {
providerInfoRef.current?.destroy({
dom: renderDom.current,
});
};
}, []);
return <div ref={rootRef}></div>;
}
};
});
function Component () {
return (<React.Suspense fallback={<div>loading</div>}>
<LazyComponent />
</React.Suspense>)
}
