前端搭建低代码平台，微前端如何选型？

目录

背景

一、微前端是什么？

二、三大特性

三、现有微前端解决方案

1、iframe

2、Web Components

3、ESM

4、EMP

5、Fronts

6、无界（文档）

7、qiankun

四、我们选择的方案

引入qiankun并使用（src外层作为主应用）

主应用使用qiankun

微应用工程要做什么

主应用&微应用通讯

FAQ

五、总结

---

背景

1.首先我们可以先来想一下，日常工作中我们是如何进行代码复用的？

• 复制粘贴 Ctrl cv
• 抽离封装模块
• 打npm包

2.但是，以上方法，会存在哪些问题呢？

–复制粘贴

• 增加重复的代码
• 复用代码逻辑发生变动时需要处处修改
• 违反 Don’t Repeat Yourself 原则

–抽离封装模块

• 仅适用于当前项目，无法兼容多个项目要使用同一个模块的情景

–打npm包或库

• 还蛮通用的…但是也有其他问题：
• 发布效率低下
• 当迭代npm包内的逻辑业务：发布npm包 -> 告诉其他使用的伙伴更新npm ->再各自构建发布一次 (繁琐极了)

于是微前端诞生了，用来将大型项目进行拆分和解耦。

一、微前端是什么？

微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块。这些块可以独立开发、测试和部署，同时仍然聚合为一个产品出现在客户面前。

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来产生的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

二、三大特性

• 无技术栈限制
• 应用单独开发、测试和部署、交付
• 多应用整合

三、现有微前端解决方案

1、iframe

iframe是html提供的标签，能加载其他web应用的内容，并且能兼容所有的浏览器。

不足：

• 不是单页应用，会导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
• 弹框类的功能无法应用到整个大应用中，只能在对应的窗口内展示。