Skip to content

微前端

Demo

qiankun源码阅读

qiankun流程图整理

关注wujie'iframe方案

核心价值

  • 不限制子应用技术栈(主框架不限制子应用的接入技术栈,微应用具备完全自主权)
  • 子应用独立开发、独立部署、独立运行时(每个微应用之间状态隔离,运行时状态不共享)

一次业务实践

  • 1、统一公司后台管理系统入口,集成业务页面(提升用户体验(无需跳转或刷新);提高运营人员效率)
  • 2、前端工程分离,提高开发效率
  • 3、解决合并代码冲突,各应用上线时间交叉等问题

优化

1、通过webpack4的externals配置,抽离子项目公共依赖库(vue全家桶、内部UI库、element等),使用统一的CDN链接加载库文件.(webpack5联邦模块也可以做到)

2、主应用统一权限分配(按权限注册子应用,减少不必要的子应用注册)

iframe

(参见: why not iframe)[https://www.yuque.com/kuitos/gky7yw/gesexv]

  • 浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决

缺点

  1. url 不同步。刷新会导致 iframe url 状态丢失、后退前进按钮无法使用
  1. UI 不同步。如果有弹窗会相对iframe大小定位
  1. 通信困难
  1. 性能问题. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。