Micro Frontends · Runnable Demos

微前端框架样例集 five mainstream frameworks, one running reference

这里是《微前端从入门到精通》一文的配套样例。每套框架都是 1 个主应用 + 2 个异构子应用(Vue 3 与 React),基于各自 官方权威接入方式构建,可点击直达运行时效果。

single-spa

路由劫持 + 生命周期编排的元框架,通过 SystemJS import map 加载异构子应用。

基于 single-spa 的 HTML Entry 方案,内置 JS 沙箱、样式隔离与全局状态通信。

构建时的模块联邦,运行时 registerRemotes 加载远程模块并共享依赖。

iframe 承载 JS、WebComponent 承载渲染,架构级隔离,天然保活与 bus 通信。

以自定义元素承载子应用,类 iframe 沙箱 + scopecss,EventCenter 数据通信。

可运行、忠于源码的三个手写内核:极简 single-spa(状态机)、wujie 双容器(iframe+ShadowRoot)、micro-app with 沙箱(Proxy 隔离)。