几种微前端架构的选型

qiankun

核心就是single-spa 实现路由劫持以及子应用的注册卸载这些生命周期的管理 qiankun 使用HtmlEntry 实现了页面的 加载，完成了css隔离 卸载 另外就是使用Proxy沙箱以及 js沙箱，完成js隔离。以及优化了一些副作用的处理

wujie

wujie的核心使用iframe作为子应用加载的环境。可以理解为创建一个iframe iframe里面去加载入口。 在iframe里面去运行js 但是css的操作dom的方法进行劫持。也就是渲染在主应用的环境下。 样式隔离采用WebComponent shadowdom wujie原理： https://juejin.cn/post/7158777745806196743#heading-8

WebComponent

shadow dom

module federation

优点 webpack 联邦编译可以保证所有子应用依赖解耦 应用间去中心化的调用、共享模块 模块远程 ts 支持 缺点 强依赖webpack5 其他的还需要一定的插件支持不过目前主流的比如vite esbuild都有插件 没有有效的 css 沙箱和 js 沙箱，需要靠用户自觉 子应用保活、多应用激活无法实现 主、子应用的路由可能发生冲突

module federation 原理： https://github.com/Vincent0700/learning-webpack/blob/master/docs/Webpack%E6%A8%A1%E5%9D%97%E8%81%94%E9%82%A6%E5%8E%9F%E7%90%86.md Vite/Rollup 支持模块联邦 https://github.com/originjs/vite-plugin-federation/blob/main/README-zh.md esbuild 支持模块联邦demo 使用 https://github.com/jacob-ebey/esbuild-federation-example/blob/main/esbuild-host/scripts/build.js