前端微前端
封面: %E5%89%8D%E7%AB%AF%E5%BE%AE%E5%89%8D%E7%AB%AF%20f04f5f55f68147ea928b27ea14443c0d/v2-2efaa89ac52b38913bdcc0f3603c8e58_1440w.jpeg
简介: 微前端方案，qiankun微前端方案实现原理
微前端实现方案
Iframe
优势
- 技术成熟
- 支持页面嵌入，url嵌入容器
- 天然支持运行沙箱隔离、独立运行
劣势
- 页面之间可以是不同的域名，不同域名的鉴权，跨域处理
- 需要对应的设计一套应用通信机制，postMessage通信
- 应用加载、渲染、缓存等体系的实现，iframe控制手段较少
web component
Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。
优势
- 支持自定义元素
- 支持shadow dom，并可通过关联进行控制
- 支持模板template和插槽slot，引入自定义组件内容
劣势
- 接入微前端需要重写当前项目
- 生态体系不完善，技术过新容易出行兼容性问题
- 整体设计架构复杂，组件直接拆分过细时，容易造成通讯和控制繁琐
自研框架
优势
- 高度定制化 ，满足业务需求
- 独立的通信机制和沙箱，可解决应用之间相互影响的问题
- 支持不同技术栈应用，可无缝实现页面的无刷新渲染
劣势
- 技术实现难度较高
- 需要设计一套定制的通信机制
- 首次加载会出现资源过大的情况
使用自研框架设计重点：
- 路由分发式
- 主应用控制路由匹配和子应用加载，共享依赖加载
- 子应用做功能，并接入主应用实现主子控制和联动
微前端技术栈
1. 主应用
- 注册子应用
- 加载、渲染子应用
- 路由匹配（activeWhen，rules - 由框架判断）
- 获取数据（公共依赖，通过数据做鉴权处理）
- 通信（父子通信，字父通信）
2. 子应用的功能
- 渲染
- 监听通信（主应用传过来的数据）
3. 微前端框架
- 子应用的注册
- 有开始内容（应用加载完成）
- 路由更新判断
- 匹配对应子应用，加载子应用内容
- 完成所有依赖项加载
- 将子应用渲染在固定的容器内
- 公共事件管理
- 异常的捕获和报错
- 全局状态管理
- 沙箱隔离
4. 服务端的功能
- 提供数据服务
5. 发布平台
- 主子应用打包和发布
微前端架构图
