微前端
核心价值
- 不限制子应用技术栈(主框架不限制子应用的接入技术栈,微应用具备完全自主权)
- 子应用独立开发、独立部署、独立运行时(每个微应用之间状态隔离,运行时状态不共享)
一次业务实践
- 1、统一公司后台管理系统入口,集成业务页面(提升用户体验(无需跳转或刷新);提高运营人员效率)
- 2、前端工程分离,提高开发效率
- 3、解决合并代码冲突,各应用上线时间交叉等问题
优化
1、通过webpack4的externals配置,抽离子项目公共依赖库(vue全家桶、内部UI库、element等),使用统一的CDN链接加载库文件.(webpack5联邦模块也可以做到)
2、主应用统一权限分配(按权限注册子应用,减少不必要的子应用注册)
iframe
(参见: why not iframe)[https://www.yuque.com/kuitos/gky7yw/gesexv]
- 浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决
缺点
- url 不同步。刷新会导致 iframe url 状态丢失、后退前进按钮无法使用
- UI 不同步。如果有弹窗会相对iframe大小定位
- 通信困难
- 性能问题. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。