什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 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/