微前端的学习笔记

微前端的学习笔记

---

背景

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

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

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

• 复制粘贴
  • 增加重复的代码
  • 复用代码逻辑发生变动时需要处处修改
  • 违反 Don’t Repeat Yourself 原则
• 抽离封装模块
  • 仅适用于当前项目，无法兼容多个项目要使用同一个模块
• 打npm包或库
  • 还蛮通用的…但是也有其他问题呢
  • 发布效率低下。
    当迭代npm包内的逻辑业务：发布npm包 -> 告诉其他使用的伙伴更新npm ->再各自构建发布一次 (繁琐及了)

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

---

一、微前端是什么？

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

二、三大特性

1 无技术栈限制、2 应用单独开发、测试和部署，3 多应用整合

三、现有微前端解决方案

1、iframe

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

缺点：

• 不是单页应用，会导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
• 弹框类的功能无法应用到整个大应用中，只能在对应的窗口内展示。 由于可能应用间不是在相同的域内，主应用的 cookie
• 要透传到根域名都不同的子应用中才能实现免登录效果。
• 每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程，占用大量资源的同时也在极大地消耗资源。
• 经过以上思考，我个人也有了一些拓展总结： iframe的特性导致搜索引擎无法获取到其中的内容，进而无法实现应用的seo

2、 Web Components

它是由google推出的浏览器的原生组件，点击查看MDM对它的定义

Web Components具备微前端的几个特性

1. 技术栈无关：Web Components是浏览器原生组件，那即是在任何框架中都可以使用。 独立开发：使用Web
2. Components开发的应用无需与其他应用间产生任何关联。 应用间隔离： Shadow
3. DOM的特性，各个引入的微应用间可以达到相互隔离的效果。

但是兼容性很不理想，点击查看详情

3、ESM

ESM是ES Module的缩写，是Ecma script 2015中提出的一种前端模块化手段

也是符合以下几点

1. 无技术栈限制：ESM加载的只是js内容，无论哪个框架，最终都要编译成js，因此，无论哪种框架，ESM都能加载。
2. 应用单独开发： ESM只是js的一种规范，不会影响应用的开发模式。
3. 多应用整合： 只要将微应用以ESM的方式暴露出来，就能正常加载。
4. 远程加载模块: ESM能够直接请求cdn资源，这是它与生俱来的能力。

ESM是能做到微前端的核心思想，但是它也存在着兼容性这一大弊端, 点击查看详情

4、qiankun

在微前端界，qiankun算得上是最早成型且知名度最广的框架了，它是真正意义上的单页微前端框架

具备以下几大特点

1. 基于single-spa封装，提供了更加开箱即用的 API
2. 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架
3. HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单
4. 样式隔离，确保微应用之间样式互相不干扰
5. JS 沙箱，确保微应用之间 全局变量/事件 不冲突
6. 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度
7. umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统
   除了最后一点拓展以外，微前端想要达到的效果都已经达到。

5、EMP

EMP是由欢聚时代业务中台自主研发的最年轻的单页微前端解决方案，除了具备微前端的能力外，还实现了跨应用状态共享、跨框架组件调用的能力

具备以下几大特点：

1. 每个微应用独立部署运行 跨技术栈组件式调用
2. 应用间通信，每一个应用都可以进行状态共享，就像在使用npm模块进行开发一样便捷
3. 每个微应用独立部署运行
4. …

综上发现，还是qiankun最稳定，因此后面我就采取qiankun这个库来学习啦

参考链接：https://github.com/efoxTeam/emp/wiki