什么是微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端架构具备以下几个核心价值:
- 技术栈无关
主框架不限制接入应用的技术栈,微应用具备完全自主权 - 独立开发、独立部署
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 - 增量升级
在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略 - 独立运行时
每个微应用之间状态隔离,运行时状态不共享
微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
single-SPA 与qiankun 实现库 对比
特点:功能比较弱 样式隔离没有解决 没有js执行隔离 仅仅 single-SPA实现了路由劫持和应用加载。
qiankun乾坤基于SPA 解决了沙箱,文件导入 ,提供了开箱即用的API 和技术栈无关、并且接入简单 像iframe一样简单
single-SPA 使用样式隔离问题解决:
1.子应用之间与子应用之间的样式隔离
2.BEM (block Element Modifier)约定的项目前缀
3.css-Modules 打包时生成不冲突的选择器名
4.shadow DOM 真正意义上的隔离
使用方式:
接入协议: 子应用必须有相关的协议 导出固定的方法,父应用去调用这些方法加载子应用, (子应用需要提供bootstrap 、mount、unmount方法)
这样可以做到和主应用完全解耦,和技术栈无关。而且是运行时 动态加载子应用。
single-SPA 安装方式 npm install single-spa-vue 或者yarn add single-spa-vue
qiankun 安装方式 npm install qiankun 或 yarn add qiankun
iframe 存在的问题,为何不用iframe?
1. 使用iframe ,iframe中的子应用切换路由时刷新数据页面就尴尬了 (状态会丢失)
应用通讯:
1.基于URL进行数据传递,但是传递消息能力弱
2.基于CustomEvent 实现通信 即:window 原生api
3.基于props主子应用间通信
4.使用全部变量、redux进行通信
总结:
single-SPA 核心 路由劫持和应用加载
qiankun 是在single-SPA基础二次封装 用起来更简单、 便捷。子应用可以独立构建,运行时动态加载主自应用完全解耦,技术栈无关 靠的是协议接入 子应用必须导出bootstrap mount unmount方法
写了两个demo,分别Single和qiankun
Single-SPA demo:https://github.com/jingjing9061/microFont
qiankun demo :https://github.com/jingjing9061/microFont2
Single-spa学习地址:https://zh-hans.single-spa.js.org/docs/getting-started-overview
qiankun 学习地址 :https://zh-hans.single-spa.js.org/docs/getting-started-overview/