1.前言
微前端,将一个大的前端应用拆分为多个小型的,独立开发的前端应用,每一个小型的应用都可以单独的开发,部署和运行。这种结构允许不同的团队使用不同的技术栈来开发应用的不同部分,提高开发的效率与灵活性。

2.实现微前端
利用现有的微前端框架来进行实现
2.1蚂蚁金服-微前端乾坤(qiankun)
乾坤继承single-spa:
- 微应用独立部署
- 延迟加载
- 技术无关
乾坤提供:
- HTML入口访问模式
- 样式隔离
- JS沙箱
- Umi插件继承
具体使用,参考乾坤官方项目文档使用
GitHub - umijs/qiankun: 📦 🚀 Blazing fast, simple and complete solution for micro frontends.
2.2 腾讯开源基于webComponents和iframe-微前端无界(wujie)
无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。
Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location,可以更好的和外部解耦
原生隔离
- css 样式通过 Web Components 可以做到严格的原生隔离
- js 运行在 iframe 中做到严格的原生隔离
功能强大
- 支持子应用嵌套
- 支持多应用激活
- 支持应用共享
- 支持生命周期钩子
- 支持插件系统
- 支持 vite 框架.....等
具体使用参考官网项目文档使用
https://github.com/Tencent/wujie
3.参考
仅做学习记录,博客参考