微前端

微前端架构适用场景

• 1.项目非常庞大，需要每个团队单独开发维护（解耦）

• 2.维护老项目，需要使用新的技术栈增加新功能（使用不同的技术栈）

为什么不是 iframe？

因为 iframe 有以下几个问题

• 1.iframe 会阻塞主应用的渲染

• 2.iframe 的通信成本高

• 3.iframe 的样式隔离成本高,

• 4.url 不同步，页面刷新，url 状态丢失，浏览器前进后退没用

微前端架构的优缺点

优点

• 1.独立开发，独立部署，独立运行

• 2.技术栈无关

缺点

• 1.主应用和子应用需要进行通信，需要约定通信方式

• 2.子应用之间需要进行通信，也需要约定通信方式

• 3.需要解决样式隔离的问题

• 4.需要解决路由问题

• 5.需要解决状态共享问题

常用微前端框架

• 1.single-spa

• 2.qiankun（阿里基于 single-spa 二次封装）

• 3.wujie

• 4.wabpack5 模块联邦

微前端架构的实现

• 1.路由劫持

• 2.状态管理

• 3.样式隔离

• 4.通信机制

• 5.沙箱机制

qiankun 的运行原理

• 1.监听路由变化 hash 模式 window.onHashChange() history 模式 window.onPopState()

• 2.匹配子应用 根据监听路由的变化，拿到当前的路由地址，去注册的子应用列表中找到对应的子应用，找到对应的 activeRule

• 3.加载子应用 然后请求访问对应的 html 资源

• 4.渲染子应用 拿到对应的 html 资源后，将 html 资源放入注册时给定的容器中去，获取 html 中的 script 脚本，执行所有的脚本

常见问题

• 1.父子应用样式错乱 原因，父子应用中使用相同的组件库，类名相同，导致了样式冲突 解决，1.自定义命名空间 2.使用 CSS Modules 3.使用 BEM 命名规范，4.使用插件修改组件库样式前缀（postcss-prifix）,5.尽量少使用全局样式，多使用局部样式

• 2.子应用刷新后，页面空白