Hello, Boswell!

什么是微前端？

将微服务的思想拓展到前端的一种新兴架构，背后主要思想是将一个单体代码库，拆解为多个较小的部分，以便多个相对独立的团队进行分工写作。
与使用不同 JavaScript 框架的多个团队一起构建现代 Web 应用程序的技术、策略和秘诀。

提示：实际项目开发过程中，直接考虑到用微前端架构的应该是比较少的，大多都是项目发展到了一定程度后再进行架构升级。

为什么需要微前端？

当前问题

MPA 方案的优点在于部署简单、各应用之间硬隔离，天生具备技术栈无关、独立开发、独立部署的特性。缺点则也很明显，应用之间切换会造成浏览器重刷，cookie 不通用问题，由于产品域名之间相互跳转，流程体验上会存在断点。
SPA 则天生具备体验上的优势，应用直接无刷新切换，能极大的保证多产品之间流程操作串联时的流程性。缺点则在于各应用技术栈之间是强耦合的。

提示：MPA 满足微前端的要求，但是体验太差，SPA 体验好，但是不满足微前端要求，所以，取个中。

核心价值

我认为微前端的核心价值在于 "技术栈无关"，这才是它诞生的理由，或者说这才是能说服我采用微前端方案的理由。 --qiankun 作者
事实上如果所有的 web 技术栈能做到统一，所有 library 的升级都能做到向下兼容，我们确实就不需要微前端了。 --qiankun 作者

提示：这里的关键字兼容，不同框架的兼容，框架不同版本的兼容。

技术价值

技术无关
独立开发、独立部署子应用仓库独立
独立运行时每个子应用之间状态隔离，运行时状态不共享

提示：可以尝试不同的技术方案。

业务价值

解构巨石应用
团队协作方便

提示：降本提效。

解决方案

MPA(多页应用程序):
Iframe:
Web Component:
ESM(ecmascript module):

提示：实现了微前端思想的方案即可称为微前端，殊途同归。

架构图

实现方案

Single-spa：

介绍

Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。核心就是定义了一套协议。协议包含主应用的配置信息(注册子应用)和子应用的生命周期(启动，安装，卸载)，通过这套协议，主应用可以方便的知道在什么情况下（路由匹配）激活哪个子应用。

提示：只能是单页应用，这取决于 Single-spa 加载子应用的方式为 js 模块作为入口的。

由此可见，Single-spa 并不参与子应用的任何流程，主要是根据路由匹配情况来管理子应用的安装，卸载。

基本用法

参看代码

运行机制

参看博客:https://boswellji.github.io/MyBlog/Microfrontend/single-spa.html#%E8%BF%90%E8%A1%8C%E6%9C%BA%E5%88%B6

缺点

single-spa 是通过 js 文件去加载子应用。

{
  "imports": {
    "@vue-mf/root-config": "https://vue.microfrontends.app/root-config/685cb799969ab697700620a8663570a87834fdc7/vue-mf-root-config.js",
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.1/lib/system/single-spa.min.js",
    "@vue-mf/styleguide": "https://vue.microfrontends.app/styleguide/566ace2deeba4ca56b38fca7fa52d4d89ac32634/vue-mf-styleguide.js",
    "@vue-mf/navbar": "https://vue.microfrontends.app/navbar/01794334ef10fb4059f6658465f42597d24cb9d1/js/app.js",
    "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
    "@vue-mf/dogs-dashboard": "https://vue.microfrontends.app/dogs-dashboard/48cef902e48d293e1588320c0d855f7252742ab6/js/app.js",
    "@vue-mf/rate-dogs": "https://vue.microfrontends.app/rate-dogs/f5951b9fe7521f1134394244e239a47929239efb/js/app.js",
    "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js",
    "@vue-mf/root-config/": "https://vue.microfrontends.app/root-config/685cb799969ab697700620a8663570a87834fdc7/",
    "@vue-mf/navbar/": "https://vue.microfrontends.app/navbar/01794334ef10fb4059f6658465f42597d24cb9d1/js/",
    "@vue-mf/dogs-dashboard/": "https://vue.microfrontends.app/dogs-dashboard/48cef902e48d293e1588320c0d855f7252742ab6/js/",
    "@vue-mf/styleguide/": "https://vue.microfrontends.app/styleguide/566ace2deeba4ca56b38fca7fa52d4d89ac32634/",
    "@vue-mf/rate-dogs/": "https://vue.microfrontends.app/rate-dogs/f5951b9fe7521f1134394244e239a47929239efb/js/"
  }
}

single-spa 本身缺少 js 隔离和 css 隔离。

qiankun

介绍

qiankun 是基于 single-spa 提出的微前端框架, 提供了更加开箱即用的 API（single-spa+sandbox+import-html-entry）。

基本用法

参看代码

运行机制
- 参看博客：乾坤框架的实现原理
- 沙盒：快照沙盒，遗留沙盒，代理沙盒
- 样式隔离：Web Component, CSS Scope
- 通信：主子应用通信
- import-html-entry：子应用入口解析