为前端就是，后段为服务思想的映射
http://github.com/YataoZhang/my-single-spa
BDD 行为驱动开发
先写API，在写实现方式
https://blog.csdn.net/weixin_42042680/article/details/106451164

image.png

  1. 什么是微前端？
  2. 微前端应用场景
  3. 微内核架构
  4. 微前端实现思路

微前端

将后端微服务的概念扩展到前端世界。
简单来说，就是将大型的wen渐进式项目拆分成一个个小型工程，即微应用。
每个微应用都能独立开发、部署、运行，然后由主应用将所有微应用整合在一起，实现所有页面的展示和交互

微前端产生的背景

前端应用越来越复杂，导致了

  1. 人员成本压力，维护成本高
  2. 产品迭代成本高
  3. 需求变更影响范围大
  4. 持续投入产出效率低，后续开发困难，参考 90-90法则

基于以上原因，结合后端的微服务理念，对前端项目的重构；
先把每个项目按照模块拆分，然后再合并成一个项目。

微前端三大特性

  • 无技术栈限制
  • 应用单独开发
  • 多应用整合

微前端的实现

  1. iframe， postMessage传参
  2. Web Component
  3. ESM，ES Module
  4. qiankun
    1. singleSPA
    2. iceStark

Iframe

iframe是html提供的标签，支持页面嵌入，能加载其他web应用的内容，兼容所有的浏览器；
天然的沙箱隔离，独立运行；
浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决
可以用它来加载任何你想要加载的web应用

iframe缺点

  1. 存在跨域
  2. 结构冗余，DOM复杂
  3. 事件通信繁琐，操作反馈复杂，需要设计一个通信机制，参数（格式）
  4. 只能处理视图相关服务，对应用的加载，渲染，缓存等控制少

WebComponent

WebComponent主要技术

  1. Custom elements 自定义元素
    1. 一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们
  2. Shadow DOM，通过关联进行控制
    1. 一组JavaScript API，将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。
    2. 通过这种方式，可以保持元素的功能私有，这样就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突
  3. 支持 HTML Template模板和 slot插槽
    1. 引入自定义组件内容

webComponent缺点

  • 生态不完善，新技术容易出现兼容性
  • 需要重写一遍当前的项目
  • 整体架构复杂，组件拆分太细，导致通信复杂

SingleSpa

singleSpa缺点

  1. 没有统一的服务规范
  2. 只有 app级别的隔离
  3. 使用了 system.js
  4. 业务侵入性强

基于 single-spa的 qiankun，吸收了 single-spa的优点，优化了 single-spa的缺点

ESM

前端模块化手段
无技术栈限制：

  • ESM加载的只是js内容，无论哪个框架，最终都要编译成js
  • 因此，无论哪种框架，ESM都能加载。

应用单独开发： ESM只是js的一种规范，不会影响应用的开发模式。
多应用整合： 只要将微应用以ESM的方式暴露出来，就能正常加载。
远程加载模块: ESM能够直接请求cdn资源，这是它与生俱来的能力

自研微前端框架

支持不同的技术栈，实现页面无刷新渲染
通信机制和沙箱运行环境，解决应用之间的相互影响
高度定制化，需要兼容场景

自研微前端缺点

  • 技术实现难度高
  • 需要设计一套通信机制
  • 首次加载，资源加载太多问题