微前端概念

微前端是什么？

微前端提供了一种技术：可以将多个独立的Web应用聚合到一起，提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用，但是在技术角度上是由一个个独立的应用组合通过某种方式组合而成的。

目前的微前端框架一般都具有以下三个特点：

• 技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权。

• 独立性强：独立开发、独立部署，子应用仓库独立。

• 状态隔离：运行时每个子应用之间状态隔离。

什么项目适合微前端架构？

拆分巨型应用，使应用变得更加可维护

兼容历史应用，实现增量开发

需要支持动态插拔的机制

 

微前端架构有哪些劣势？

重复依赖：不同应用之间依赖的包存在很多重复，由于各个应用独立开发、编译和发布，难免会存在重复依赖的情况。导致不同应用之间需要重复下载依赖，额外增加流量和服务端的压力

技术成本变高：一个问题的跟踪，可能需要对应的人员，懂微前端，同事懂主应用与子应用，每一个框架，有时候需要同时深入vue与react与微前端才能解决问题。复杂的从代码转向基建。

没有坚强的前端周边让其充分发挥架构的优势

 

iframe方案有哪些优缺点？

腾讯开发的无界微前端就是基于iframe实现的。

这种方法一种实现就是使用iframe，通过配置不同的src加载不同的子应用页面。

<iframe src="https://test.qq.com/a/index.html"></iframe>

 

iframe优点：

• iframe 自带的样式、环境隔离机制使得它具备天然的沙盒机制。

• 嵌入子应用比较简单。

iframe缺点：

• iframe功能之间的跳转是无效的，刷新页面无法保存状态。

• URL的记录完全无效，刷新会返回首页。

• 主应用劫持快捷键操作，事件冒泡不穿透到主文档树上。

• 模态弹窗的背景是无法覆盖到整个应用。

• iframe应用加载失败，内容发生错误主应用无法感知，通信麻烦。

主流的微前端框架有哪些：qiankun、wujie、micro-app、emp

qiankun 地址

官网地址：https://qiankun.umijs.org/zh/guide

github 地址：https://github.com/umijs/qiankun

 

无界地址

github：https://github.com/Tencent/wujie

文档：https://wujie-micro.github.io/doc

demo：https://wujie-micro.github.io/demo-main-vue/home

 

micro-app 地址

官方文档：https://cangdu.org/micro-app/docs.html#/zh-cn/changelog

github 地址：https://github.com/micro-zoe/micro-app

 

ENP 地址

官网地址：https://emp2.netlify.app

github：https://github.com/efoxTeam/emp