关于前端:深入浅出微前端

深入浅出微前端
- 背景
- 什么是微前端
  - 微前端劣势
  - 微前端解决方案
- 为什么不是 TA
  - 为什么不是 iframe
  - 为什么不是 Web Component
  - 为什么不是 ESM
- SingleSpa
  - SystemJS 应用
    - 新建我的项目并配置
    - 编写 js、html 代码
    - 查看 dest 目录
  - SystemJS 原理
    - 外围办法 -register
    - 外围办法 -import
  - SingleSpa 应用
    - 创立基座
    - 创立 vue 我的项目
    - 创立 react 我的项目
    - 启动我的项目
  - SingleSpa 原理
    - 原生 Demo
    - 外围办法 -registerApplication
    - 状态机
    - 外围办法 -start
    - 外围逻辑 -reroute
    - 欠缺外围逻辑 -reroute
  - SingleSpa 小结
- qiankun
  - qiankun 应用
    - 提供基座
    - 提供 Vue 子利用
    - 提供 React 子利用
    - 查看最终成果
  - qiankun 原理
    - registerMicroApps
    - start
    - prefetch
    - loadApp
    - createSandboxContainer
    - Proxy Sandbox
    - Snapshot Sandbox
    - Style Shadow Dom Sandbox
    - Style Scope Sandbox
    - 父子利用通信形式
  - qiankun 小结
- 总结

<!– END doctoc generated TOC please keep comment here to allow auto update –>

长文正告⚠️，目标是通过从应用到实现，一层层分析微前端。

文章首发于 @careteen/micro-fe，转载请注明起源即可。

在微前端呈现之前，一个零碎的前端开发模式根本都是单仓库，蕴含了所有的性能、代码 …

很多企业也根本在物理上进行了利用代码隔离，履行单个利用单个库，闭环部署更新测试环境和正式环境。

比方咱们公司的权限治理后盾，首页中列举了各个系统的入口，每个零碎由独自仓库治理，点击具体零碎，关上新窗口进行拜访。

因为多个利用一级域名统一，应用不同二级域名辨别。cookie寄存在一级域名下，所以各利用能够借此实现用户信息的一致性。然而对于 头部、左侧菜单 通用的模块，以及多个利用之间如何实现资源共享？

咱们尝试采纳 npm 包模式 对头部、左侧菜单 抽离成 npm 包的模式进行治理和应用。然而却带来了 公布效率低下 的问题；

如果须要迭代 npm 包内的逻辑业务，须要先公布 npm 包之后，再每个应用了该 npm 包的利用都更新一次 npm 包版本，再各自构建公布一次，过程繁琐。如果波及到的利用更多的话，破费的人力和精力就更多了。

不仅如此，咱们可能还有上面几个诉求：

不同团队间开发同一个利用技术栈不同怎么办？
心愿每个团队都能够独立开发，独立部署怎么办？（上述形式尽管能够解决，然而体验不好）
我的项目中还须要老的利用代码怎么办？

在 2016 年，微前端的概念诞生。micro-frontends 中定义 Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. 翻译成中文为 用来构建可能让多个团队独立交付我的项目代码的古代 web app 技术，策略以及实际办法。

微前端也是借鉴后端微服务的思维。微前端就是将不同的性能依照不同的纬度拆分成多个子利用。通过主利用来加载这些子利用。

微前端的外围在于 先拆后合。

同步更新
增量降级
简略、解耦的代码库
独立开发、部署

基座模式：通过搭建基座、配置核心来治理子利用。如基于 single spa 的qiankun计划。
自组织模式：通过约定进行相互调用，但会遇到解决第三方依赖的问题。
去核心模式：脱离基座模式，每个利用之间都能够批次分享资源。如基于 webpack5 module federation 实现的EMP 微前端计划，能够实现多个利用彼此共享资源。

qiankun 技术圆桌 中有一篇对于微前端 Why Not Iframe 的思考，上面贴一下 iframe 的优缺点

iframe 提供了浏览器原生的硬隔离计划，不论是款式隔离、js 隔离这类问题通通都能被完满解决。
url 不同步。浏览器刷新 iframe url 状态失落、后退后退按钮无奈应用。
UI 不同步，DOM 构造不共享。设想一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时咱们要求这个弹框要浏览器居中显示，还要浏览器 resize 时主动居中..
全局上下文齐全隔离，内存变量不共享。iframe 内外零碎的通信、数据同步等需要，主利用的 cookie 要透传到根域名都不同的子利用中实现免登成果。
慢。每次子利用进入都是一次浏览器上下文重建、资源从新加载的过程。

因为这些起因，最终大家都舍弃了 iframe 计划。

MDN Web Components 由三项次要技术组成，它们能够一起应用来创立封装性能的定制元素，能够在你喜爱的任何中央重用，不用放心代码抵触。

Custom elements（自定义元素）：一组 JavaScript API，容许您定义 custom elements 及其行为，而后能够在您的用户界面中依照须要应用它们。
Shadow DOM（影子 DOM）：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 离开出现）并管制其关联的性能。通过这种形式，您能够放弃元素的性能公有，这样它们就能够被脚本化和款式化，而不必放心与文档的其余局部发生冲突。
HTML templates（HTML 模板）：<template> 和 <slot> 元素使您能够编写不在出现页面中显示的标记模板。而后它们能够作为自定义元素构造的根底被屡次重用。

官网提供的示例 web-components-examples。

然而兼容性很差，查看 can i use WebComponents。

ESM即ES Module，是一种前端模块化伎俩。他能做到微前端的几个外围点

无技术栈限度：ESM 加载的只是 js 内容，无论哪个框架，最终都要编译成 js，因而，无论哪种框架，ESM 都能加载。
利用独自开发：ESM 只是 js 的一种标准，不会影响利用的开发模式。
多利用整合：只有将微利用以 ESM 的形式裸露进去，就能失常加载。
近程加载模块: ESM 可能间接申请 cdn 资源，这是它与生俱来的能力。

然而惋惜的是兼容性不好，查看 can i use import。

查看 single-spa 配置文件 rollup.config.js 可得悉，应用了 rollup 做打包工具，并采纳的 system 模块标准做输入。

感兴趣可查看对 @careteen/rollup 的繁难实现。

那咱们就很有必要先介绍下 SystemJS 的相干常识。

SystemJS 是一个通用的模块加载器，它能在浏览器上动静加载模块。微前端的外围就是加载微利用，咱们将利用打包成模块，在浏览器中通过 SystemJS 来加载模块。

下方示例寄存在 @careteen/micro-fe/system.js，感兴趣能够返回调试。

装置依赖

$ mkdir system.js
$ yarn init
$ yarn add webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin -D
$ yarn add react react-dom

配置 webpack.config.js 文件，采纳 system.js 模块标准作为output.libraryTarget，并不打包react/react-dom。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (env) => {
  return {
    mode: "development",
    output: {
      filename: "index.js",
      path: path.resolve(__dirname, "dest"),
      libraryTarget: env.production ? "system" : "",
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {loader: "babel-loader"},
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      !env.production &&
        new HtmlWebpackPlugin({template: "./public/index.html",}),
    ].filter(Boolean),
    externals: env.production ? ["react", "react-dom"] : [],};
};

配置 .babelrc 文件

{
  "presets":[
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

配置 package.json 文件

"scripts": {
  "dev": "webpack serve",
  "build": "webpack --env production"
},

新建 src/index.js 入口文件

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>hello system.js</h1>,
  document.getElementById('root')
)

新建 public/index.html 文件，以 cdn 的模式引入 system.js，并且将react/react-dom 作为前置依赖配置到 systemjs-importmap 中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>system.js demo</title>
  </head>

  <body>
    <script type="systemjs-importmap">
      {
        "imports": {
          "react": "https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js",
          "react-dom": "https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"
        }
      }
    </script>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/systemjs/6.10.1/system.min.js"></script>
    <script>
      System.import("./index.js").then(() => {});
    </script>
  </body>
</html>

而后命令行运行

$ npm run dev # or build

关上浏览器拜访，可失常显示文本。

察看 dest/index.js 文件，可发现通过 system.js 打包后会依据 webpack 配置而先 register 预加载 react/react-dom 而后返回 execute 执行函数。

System.register(["react","react-dom"], function(__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
  return {
    setters: [// ...],
    execute: function() {// ...}
  };
});

并且咱们在应用时是通过 System.import("./index.js").then(() => {}); 这个模式。

基于上述察看，咱们理解到 system.js 两个外围api

System.import：加载入口文件
System.register：预加载

上面将做个繁难实现。

下方实现原理代码寄存在 @careteen/micro-fe/system.js/dest/index.html，感兴趣能够返回调试。

首先提供构造函数，并将 window 的属性存一份，目标是查找对 window 属性进行的批改。

function SystemJS() {}
let set = new Set();
const saveGlobalPro = () => {for (let p in window) {set.add(p);
  }
};
const getGlobalLastPro = () => {
  let result;
  for (let p in window) {if (set.has(p)) continue;
    result = window[p];
    result.default = result;
  }
  return result;
};

saveGlobalPro();

实现 register 办法，次要是对前置依赖做存储，不便前面加载文件时取值加载。

let lastRegister;
SystemJS.prototype.register = function (deps, declare) {
  // 将本次注册的依赖和申明 裸露到内部
  lastRegister = [deps, declare];
};

应用 JSONP 提供 load 创立 script 脚本函数。

function load(id) {return new Promise((resolve, reject) => {const script = document.createElement("script");
    script.src = id;
    script.async = true;
    document.head.appendChild(script);
    script.addEventListener("load", function () {
      // 加载后会拿到 依赖 和 回调
      let _lastRegister = lastRegister;
      lastRegister = undefined;

      if (!_lastRegister) {resolve([[], function () {}]); // 示意没有其余依赖了
      }
      resolve(_lastRegister);
    });
  });
}

实现 import 办法，传参为 id 即入口文件，加载入口文件后，解析查看 dest 目录中的setters 和 execute。

因为 react 和 react-dom 会给全局削减属性 window.React,window.ReactDOM 属性，所以能够通过 getGlobalLastPro 获取到这些新增的依赖库。

SystemJS.prototype.import = function (id) {return new Promise((resolve, reject) => {const lastSepIndex = window.location.href.lastIndexOf("/");
    const baseURL = location.href.slice(0, lastSepIndex + 1);
    if (id.startsWith("./")) {resolve(baseURL + id.slice(2));
    }
  }).then((id) => {
    let exec;
    // 能够实现 system 模块递归加载
    return load(id)
      .then((registerition) => {let declared = registerition[1](() => {});
        // 加载 react 和 react-dom  加载结束后调用 setters
        // 调用执行函数
        exec = declared.execute;
        return [registerition[0], declared.setters];
        // {setters:[],execute:function(){}}
      })
      .then((info) => {
        return Promise.all(info[0].map((dep, i) => {var setter = info[1][i];
            // react 和 react-dom 会给全局削减属性 window.React,window.ReactDOM
            return load(dep).then((r) => {// console.log(r);
              let p = getGlobalLastPro();
              // 这里如何获取 react 和 react-dom?
              setter(p); // 传入加载后的文件
            });
          })
        );
      })
      .then(() => {exec();
      });
  });
};

上述简略实现了 system.js 的外围办法，可正文掉 cdn 引入模式，应用本人实现的进行测试，可失常展现。

let System = new SystemJS();
System.import("./index.js").then(() => {});

下方示例代码寄存在 @careteen/micro-fe/single-spa，感兴趣能够返回调试。

装置脚手架，不便疾速创立利用。

$ npm i -g create-single-spa

$ create-single-spa base

在 src/careteen-root-config.js 文件中新增下体面利用配置

registerApplication({
  name: "@careteen/vue", // 利用名字
  app: () => System.import("@careteen/vue"), // 加载的利用
  activeWhen: ["/vue"], // 门路匹配
  customProps: {name: 'single-spa-base',},
});

registerApplication({
  name: "@careteen/react",
  app: () => System.import("@careteen/react"),
  activeWhen: ["/react"],
  customProps: {name: 'single-spa-base',},
});
start({urlRerouteOnly: true, // 全副应用 SingleSpa 中的 reroute 治理路由});

提供 registerApplication 办法注册并加载利用，start办法启动利用

查看 src/index.ejs 文件

<script type="systemjs-importmap">
  {
    "imports": {"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js"}
  }
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">

<script>
  System.import('@careteen/root-config');
</script>

可得悉须要 single-spa 作为前置依赖，并且实现 preload 预加载，最初加载基座利用System.import('@careteen/root-config');。

上面持续应用脚手架创立子利用

$ create-single-spa slave-vue

此处抉择 vue3.x 版本。新建 vue.config.js 配置文件，配置开发端口号为3000

module.exports = {
  devServer: {port: 3000,},
}

还须要批改src/router/index.js

const router = createRouter({history: createWebHistory('/vue'),
  routes,
});

在基座中配置

<script type="systemjs-importmap">
  {
    "imports": {
      "@careteen/root-config": "//localhost:9000/careteen-root-config.js",
      "@careteen/slave-vue": "//localhost:3000/js/app.js"
    }
  }
</script>

$ create-single-spa slave-react

批改开发端口号为4000

"scripts": {"start": "webpack serve --port 4000",}

创立上面路由

import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom'
import Home from './components/Home.js'
import About from './components/About.js'

export default function Root(props) {
  return <Router basename="/react">
    <div>
      <Link to="/">Home React</Link>
      <Link to="/about">About React</Link>
    </div>
    <Switch>
      <Route path="/"  exact={true} component={Home}></Route>
      <Route path="/about" component={About}></Route>
      <Redirect to="/"></Redirect>
    </Switch>
  </Router>
}

在基座中配置 react/react-dom 以及@careteen/react

<script type="systemjs-importmap">
  {
    "imports": {
      "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
      "react":"https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js",
      "react-dom":"https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"        
    }
  }
</script>
<script type="systemjs-importmap">
  {
    "imports": {
      "@careteen/root-config": "//localhost:9000/careteen-root-config.js",
      "@careteen/slave-vue": "//localhost:3000/js/app.js",
      "@careteen/react": "//localhost:4000/careteen-react.js"
    }
  }
</script>

$ cd base && yarn start
$ cd ../slave-vue && yarn start
$ cd ../slave-react && yarn start

浏览器关上 http://localhost:9000/

手动输出 http://localhost:9000/vue/ 并能够切换路由

手动输出 http://localhost:9000/react/ 并能够切换路由

下方原理实现代码寄存在 @careteen/micro-fe/single-spa/single-spa，感兴趣能够返回调试。

从 single spa 应用中，能够发现次要是两个办法 registerApplication 和start。

先新建 single-spa/example/index.html 文件，应用 cdn 的模式应用single-spa

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my single spa demo</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/single-
spa/5.9.3/umd/single-spa.min.js"></script>
  </head>

  <body>
    <!-- 切换导航加载不同的利用 -->
    <a href="#/a">a 利用 </a>
    <a href="#/b">b 利用 </a>
    <!-- 源码中 single-spa 是用 rollup 打包的 -->
    <script type="module">
      const {registerApplication, start} = singleSpa;
      // 接入协定
      let app1 = {
        bootstrap: [
          // 这货色只执行一次，加载完利用，不须要每次都反复加载
          async (customProps) => {
            // koa 中的中间件 vueRouter4 中间件
            console.log("app1 启动~1", customProps);
          },
          async () => {console.log("app1 启动~2");
          },
        ],
        mount: async (customProps) => {console.log("app1 mount");
        },
        unmount: async (customProps) => {console.log("app1 unmount");
        },
      };
      let app2 = {
        bootstrap: [async () => {console.log("app2 启动~1");
          },
          async () => {console.log("app2 启动~2");
          },
        ],
        mount: async () => {console.log("app2 mount");
        },
        unmount: async () => {console.log("app2 unmount");
        },
      };

      const customProps = {name: "single spa"};
      // 注册微利用
      registerApplication(
        "app1", // 这个名字能够用于过滤避免加载反复的利用
        async () => {return app1;},
        (location) => location.hash == "#/a",
        customProps
      );
      registerApplication(
        "app2", // 这个名字能够用于过滤避免加载反复的利用
        async () => {return app2;},
        (location) => location.hash == "#/b",
        customProps
      );

      start();
    </script>
  </body>
</html>

对 package.json 做如下配置

"scripts": {"dev": "http-server -p 5000"}

而后运行

$ cd single-spa
$ yarn
$ yarn dev

关上 http://127.0.0.1:5000/example 点击切换 a b 利用查看打印后果

接着去实现外围办法

新建single-spa/src/single-spa.js

export {registerApplication} from './applications/apps.js';
export {start} from './start.js';

新建single-spa/src/applications/app.js

import {reroute} from "../navigation/reroute.js";
import {NOT_LOADED} from "./app.helpers.js";

export const apps = [];
export function registerApplication(appName, loadApp, activeWhen, customProps) {
  const registeration = {
    name: appName,
    loadApp,
    activeWhen,
    customProps,
    status: NOT_LOADED,
  };
  apps.push(registeration);
  reroute();}

保护数组 apps 寄存所有的子利用，每个子利用须要的传参如下

appName: 利用名称
loadApp: 利用的加载函数此函数会返回 bootstrap mount unmount
activeWhen: 以后什么时候激活 location => location.hash == ‘#/a’
customProps: 用户的自定义参数
status: 利用状态

将子利用保留到 apps 中，后续能够在数组里晒选须要的 app 是加载还是卸载还是挂载

还须要调用 reroute，重写门路，后续切换路由要再次做这些事，这也是single-spa 的外围。

NOT_LOADED(未加载)为利用的默认状态，那利用还存在哪些状态呢？

新建 single-spa/src/applications/app.helpers.js 寄存所有状态

export const NOT_LOADED = "NOT_LOADED"; // 利用默认状态是未加载状态
export const LOADING_SOURCE_CODE = "LOADING_SOURCE_CODE"; // 正在加载文件资源
export const NOT_BOOTSTRAPPED = "NOT_BOOTSTRAPPED"; // 此时没有调用 bootstrap
export const BOOTSTRAPPING = "BOOTSTRAPPING"; // 正在启动中, 此时 bootstrap 调用结束后，须要示意成没有挂载
export const NOT_MOUNTED = "NOT_MOUNTED"; // 调用了 mount 办法
export const MOUNTED = "MOUNTED"; // 示意挂载胜利
export const UNMOUNTING = "UNMOUNTING"; // 卸载中，卸载后回到 NOT_MOUNTED

// 以后利用是否被挂载了 状态是不是 MOUNTED
export function isActive(app) {return app.status == MOUNTED;}

// 门路匹配到才会加载利用
export function shouldBeActive(app) {
  // 如果返回的是 true 就要进行加载
  return app.activeWhen(window.location);
}

于此同时还是提供几个办法判断以后利用所处状态。

而后再提供依据 app 状态对所有注册的 app 进行分类

// `single-spa/src/applications/app.helpers.js`
export function getAppChanges() {
  // 拿不到所有 app 的？const appsToLoad = []; // 须要加载的列表
  const appsToMount = []; // 须要挂载的列表
  const appsToUnmount = []; // 须要移除的列表
  apps.forEach((app) => {const appShouldBeActive = shouldBeActive(app); // 看一下这个 app 是否要加载
    switch (app.status) {
      case NOT_LOADED:
      case LOADING_SOURCE_CODE:
        if (appShouldBeActive) {appsToLoad.push(app); // 没有被加载就是要去加载的 app，如果正在加载资源 阐明也没有加载过
        }
        break;
      case NOT_BOOTSTRAPPED:
      case NOT_MOUNTED:
        if (appShouldBeActive) {appsToMount.push(app); // 没启动柜，并且没挂载过 阐明等会要挂载他
        }
        break;
      case MOUNTED:
        if (!appShouldBeActive) {appsToUnmount.push(app); // 正在挂载中然而门路不匹配了 就是要卸载的
        }
      default:
        break;
    }
  });
  return {appsToLoad, appsToMount, appsToUnmount};
}

而后开始实现 single-spa/src/navigation/reroute.js 的外围办法

import {getAppChanges,} from "../applications/app.helpers.js";
export function reroute() {
  // 所有的外围逻辑都在这里
  const {appsToLoad, appsToMount, appsToUnmount} = getAppChanges();
  return loadApps();
  function loadApps() {
  // 获取所有须要加载的 app, 调用加载逻辑
  const loadPromises = appsToLoad.map(toLoadPromise); // 调用加载逻辑
    return Promise.all(loadPromises)
  }
}

于此同时再提供工具办法，不便解决传参进来的生命周期钩子是数组的场景

function flattenFnArray(fns) {fns = Array.isArray(fns) ? fns : [fns];
  return function (customProps) {
    return fns.reduce((resultPromise, fn) => resultPromise.then(() => fn(customProps),
      Promise.resolve());
  };
}

实现原理相似于koa 中的中间件，将多个 promise 组合成一个 promise 链。

再提供 toLoadPromise，只有当子利用是NOT_LOADED 的时候才须要加载，并应用flattenFnArray 将各个生命周期进行解决

function toLoadPromise(app) {return Promise.resolve().then(() => {if (app.status !== NOT_LOADED) {return app;}
    app.status = LOADING_SOURCE_CODE;
    return app.loadApp().then((val) => {let { bootstrap, mount, unmount} = val; // 获取利用的接入协定，子利用裸露的办法
      app.status = NOT_BOOTSTRAPPED;
      app.bootstrap = flattenFnArray(bootstrap);
      app.mount = flattenFnArray(mount);
      app.unmount = flattenFnArray(unmount);

      return app;
    });
  });
}

而后实现single-spa/src/start.js

import {reroute} from "./navigation/reroute.js";
export let started = false;
export function start() {
  started = true; // 开始启动了
  reroute();}

接着须要对 reroute 办法进行欠缺，将不须要的组件全副卸载，将须要加载的组件去 加载 -> 启动 -> 挂载，如果曾经加载结束，那么间接启动和挂载。

export function reroute() {const { appsToLoad, appsToMount, appsToUnmount} = getAppChanges();
  if (started) { // 启动利用
    return performAppChanges();}
  function performAppChanges() {appsToUnmount.map(toUnmountPromise);
    appsToLoad.map(app => toLoadPromise(app).then((app) => tryBootstrapAndMount(app)))
    appsToMount.map(appToMount => tryBootstrapAndMount(appToMount))
  }
}

其外围就是 卸载须要卸载的利用 -> 加载利用 -> 启动利用 -> 挂载利用

而后提供toUnmountPromise，标记成正在卸载，调用卸载逻辑，并且标记成未挂载。

function toUnmountPromise(app) {return Promise.resolve().then(() => {
    // 如果不是挂载状态 间接跳出
    if (app.status !== MOUNTED) {return app;}
    app.status = UNMOUNTING;
    return app.unmount(app.customProps).then(() => {app.status = NOT_MOUNTED;});
  });
}

以及 tryBootstrapAndMount，提供a/b 利用的切换

// a -> b b->a a->b
function tryBootstrapAndMount(app, unmountPromises) {return Promise.resolve().then(() => {if (shouldBeActive(app)) {return toBootStrapPromise(app).then((app) =>
        unmountPromises.then(() => {capturedEventListeners.hashchange.forEach((item) => item());
          return toMountPromise(app);
        })
      );
    }
  });
}

实现 toBootStrapPromise 启动利用

function toBootStrapPromise(app) {return Promise.resolve().then(() => {if (app.status !== NOT_BOOTSTRAPPED) {return app;}
    app.status = BOOTSTRAPPING;
    return app.bootstrap(app.customProps).then(() => {
      app.status = NOT_MOUNTED;
      return app;
    });
  });
}

实现 toMountPromise 加载利用

function toMountPromise(app) {return Promise.resolve().then(() => {if (app.status !== NOT_MOUNTED) {return app;}
    return app.mount(app.customProps).then(() => {
      app.status = MOUNTED;
      return app;
    });
  });
}

上述实现了子利用各个状态的切换逻辑，上面还须要将路由进行重写。

新建single-spa/src/navigation/navigation-events.js，监听 hashchange 和 popstate，门路变动时从新初始化利用。

import {reroute} from "./reroute.js";

function urlRoute() {reroute();
}
window.addEventListener("hashchange", urlRoute);
window.addEventListener("popstate", urlRoute);

须要对浏览器的事件进行拦挡，其实现形式和 vue-router 相似，应用 AOP 的思维实现的。

因为子利用外面也可能会有路由零碎，须要先加载父利用的事件，再去调用子利用。

const routerEventsListeningTo = ["hashchange", "popstate"];
export const capturedEventListeners = {hashchange: [],
  popstate: [],};
const originalAddEventListener = window.addEventListener;
const originalRemoveEventLister = window.removeEventListener;

window.addEventListener = function (eventName, fn) {
  if (routerEventsListeningTo.includes(eventName) &&
    !capturedEventListeners[eventName].some((l) => fn == l)
  ) {return capturedEventListeners[eventName].push(fn);
  }
  return originalAddEventListener.apply(this, arguments);
};

window.removeEventListener = function (eventName, fn) {if (routerEventsListeningTo.includes(eventName)) {return (capturedEventListeners[eventName] = capturedEventListeners[eventName].filter((l) => fn != l));
  }
  return originalRemoveEventLister.apply(this, arguments);
};

须要对跳转办法进行拦挡，例如 vue-router 外部会通过 pushState() 不改门路改状态，所以还是要解决下。如果门路不一样，也须要重启利用。

function patchedUpdateState(updateState, methodName) {return function() {
    const urlBefore = window.location.href;
    const result = updateState.apply(this, arguments);
    const urlAfter = window.location.href;
    if (urlBefore !== urlAfter) {window.dispatchEvent(new PopStateEvent("popstate"));
    }
    return result;
  }
}
window.history.pushState = patchedUpdateState(window.history.pushState, 'pushState');
window.history.replaceState = patchedUpdateState(window.history.replaceState, 'replaceState')

提供触发事件的办法

export function callCapturedEventListeners(eventArguments) { // 触发捕捉的事件
  if (eventArguments) {const eventType = eventArguments[0].type;
    // 触发缓存中的办法
    if (routingEventsListeningTo.includes(eventType)) {capturedEventListeners[eventType].forEach(listener => {listener.apply(this, eventArguments);
      })
    }
  } 
}

改变 reroute 逻辑，启动实现须要调用callAllEventListeners，利用卸载结束也须要调用callAllEventListeners。

export function reroute() {const { appsToLoad, appsToMount, appsToUnmount} = getAppChanges();
  if (started) {return performAppChanges();
  }
  return loadApps();

  function loadApps() {const loadPromises = appsToLoad.map(toLoadPromise);
    return Promise.all(loadPromises).then(callAllEventListeners); // ++
  }
  function performAppChanges() {let unmountPromises = Promise.all(appsToUnmount.map(toUnmountPromise)).then(callAllEventListeners); // ++

    appsToLoad.map((app) =>
      toLoadPromise(app).then((app) =>
        tryBootstrapAndMount(app, unmountPromises)
      )
    );
    appsToMount.map((app) => tryBootstrapAndMount(app, unmountPromises));
  }
}

上述代码曾经实现了基本功能

$ cd single-spa
$ yarn
$ yarn dev

关上 http://127.0.0.1:5000/example 点击切换 a b 利用查看打印后果，体现同原生 Demo 的后果。

single-spa 提供了主利用作为基座，通过路由匹配加载不同子利用的模式。具备如下长处

技术栈无关：独立开发、独立部署、增量降级、独立运行时
提供生命周期概念：负责调度子利用的生命周期，挟持 url 变动事件和函数，url 变动时匹配对应子利用，并执行生命周期流程

然而依然存在一些问题

款式隔离 ：子利用款式可能影响主利用，须要通过相似于BEM 约定式计划解决。
JS 隔离 ：奴才利用共用DOM、BOMAPI，例如在window 上赋值同一个同名变量，将相互影响，也须要有隔离计划。

qiankun 的灵感来自并基于single-spa，有以下几个特点。

简略: 任意 js 框架均可应用。微利用接入像应用接入一个 iframe 零碎一样简略，但理论不是 iframe。
齐备: 简直蕴含所有构建微前端零碎时所须要的根本能力，如款式隔离、js 沙箱、预加载等。
生产可用: 已在蚂蚁内外禁受过足够大量的线上零碎的考验及打磨，健壮性值得信赖。

在 single-spa 的根底上，qiankun还实现了如下个性

应用 import-html-entry 取代 system.js 加载子利用
提供多种款式隔离计划
提供多种 JS 隔离计划

下方示例代码寄存在 @careteen/micro-fe/qiankun，感兴趣能够返回调试。

上面实例采纳 react 作为基座，并提供一个 vue 子利用和一个 react 子利用

$ create-react-app base
$ yarn add react-router-dom qiankun

提供 /vue 和 /react 路由

import {BrowserRouter as Router, Link} from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/vue">vue 利用 </Link>
        <Link to="/react">react 利用 </Link>
      </Router>
      <div id="container"></div>
    </div>
  );
}
export default App;

在 src/registerApps.js 中配置两个子利用入口

import {registerMicroApps, start} from "qiankun";

const loader = (loading) => {console.log(loading);
};
registerMicroApps(
  [
    {
      name: "slave-vue",
      entry: "//localhost:20000",
      container: "#container",
      activeRule: "/vue",
      loader,
    },
    {
      name: "slave-react",
      entry: "//localhost:30000",
      container: "#container",
      activeRule: "/react",
      loader,
    },
  ],
  {beforeLoad: () => {console.log("加载前");
    },
    beforeMount: () => {console.log("挂载前");
    },
    afterMount: () => {console.log("挂载后");
    },
    beforeUnmount: () => {console.log("销毁前");
    },
    afterUnmount: () => {console.log("销毁后");
    },
  }
);
start({
  sandbox: {
    // experimentalStyleIsolation:true
    strictStyleIsolation: true,
  },
});

运行命令，关上 http://localhost:3000/ 拜访，上面将持续

yarn start

$ vue create slave-vue

新建 vue.config.js 配置文件，设置 publicPath 保障子利用动态资源都是像 20000 端口上发送的，设置 headers 跨域保障父利用能够拜访到。

qiankun没有应用 single-spa 所应用 system.js 模块标准，而打包成 umd 模式，在 qiankun 外部应用了 fetch 去加载子利用的文件内容。

module.exports = {
  publicPath: '//localhost:20000', 
  devServer: {
    port: 20000,
    headers:{'Access-Control-Allow-Origin': '*'}
  },
  configureWebpack: {
    output: {
      libraryTarget: 'umd',
      library: 'slave-vue'
    }
  }
}

应用 qiankun 和single-spa相似，须要在入口文件依照约定导出特定的生命周期函数bootstrap、mount、unmount。

并且提供 独立拜访 和接入到主利用 两种场景。次要是借助 window.__POWERED_BY_QIANKUN__ 字段判断是否在 qiankun 主利用下。

import {createApp} from 'vue';
import {createRouter, createWebHistory} from 'vue-router';
import App from './App.vue';
import routes from './router';

let history;
let router;
let app;
function render(props = {}) {history = createWebHistory('/vue');
  router = createRouter({
    history,
    routes
  });
  app = createApp(App);
  let {container} = props;
  app.use(router).mount(container ? container.querySelector('#app') : '#app')
}

if (!window.__POWERED_BY_QIANKUN__) { // 独立运行本人
  render();}

export async function bootstrap() {console.log('vue3 app bootstraped');
}

export async function mount(props) {console.log('vue3 app mount',);
  render(props)
}
export async function unmount() {console.log('vue3 app unmount');
  history = null;
  app = null;
  router = null;
}

运行命令，关上 http://localhost:20000/ 可独立拜访

$ yarn serve

$ create-react-app slave-react
$ yarn add @rescripts/cli -D

借助 @rescripts/cli 改 react 的配置.rescriptsrc.js

输入和 vue 我的项目一样也采纳 umd 模块标准。

module.exports = {webpack:(config)=>{
    config.output.library = 'slave-react';  
    config.output.libraryTarget = 'umd';
    config.output.publicPath = '//localhost:30000/';
    return config;
  },
  devServer:(config)=>{
    config.headers = {'Access-Control-Allow-Origin': '*'};
    return config;
  }
}

而后在 .env 中将端口号进行批改

PORT=30000
WDS_SOCKET_PORT=30000

同 vue 子利用配置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

function render(props = {}) {let { container} = props;
  ReactDOM.render(<App />,
    container ? container.querySelector('#root') : document.getElementById('root')
  );
}
if (!window.__POWERED_BY_QIANKUN__) {render();
}
export async function bootstrap() {}
export async function mount(props) {render(props)
}

export async function unmount(props) {const { container} = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.getElementById('root'))
}

scripts脚本须要做批改

"scripts": {
  "start": "rescripts start",
  "build": "rescripts build",
  "test": "rescripts test",
  "eject": "rescripts eject"
},

运行命令，关上 http://localhost:30000/ 可独立拜访

$ yarn start

在主利用中配置款式隔离

start({
  sandbox: {
    // experimentalStyleIsolation:true
    strictStyleIsolation: true,
  },
});

浏览器关上 http://localhost:3000/ 点击vue 利用

点击react 利用，可察看父子利用款式互不影响。

通过应用 qiankun 可察看到其 API 和single-spa差不多。上面将大抵理解下 qiankun 的实现原理。

剖析代码在 @careteen/qiankun，外面有大量正文。

从入口注册办法 registerMicroApps 开始。


export function registerMicroApps<T extends ObjectType>(
  apps: Array<RegistrableApp<T>>, // 须要注册的利用
  lifeCycles?: FrameworkLifeCycles<T>, // 对应的生命周期
) {
  // 过滤注册反复的利用
  const unregisteredApps = apps.filter((app) => !microApps.some((registeredApp) => registeredApp.name === app.name));

  microApps = [...microApps, ...unregisteredApps];

  // 将须要注册的新利用，循环顺次注册
  unregisteredApps.forEach((app) => {const { name, activeRule, loader = noop, props, ...appConfig} = app;

    // 理论还是调用 single-spa 的注册函数
    registerApplication({
      name,
      app: async () => {loader(true); // 设置 loading
        await frameworkStartedDefer.promise; // 期待 start 办法被调用

        const {mount, ...otherMicroAppConfigs} = (
          // 加载利用，获取生命周期钩子
          await loadApp({name, props, ...appConfig}, frameworkConfiguration, lifeCycles)
        )();

        // 调用 mount 
        return {mount: [async () => loader(true), ...toArray(mount), async () => loader(false)],
          ...otherMicroAppConfigs,
        };
      },
      activeWhen: activeRule,
      customProps: props,
    });
  });
}

理论还是调用 single-spa 的注册函数registerApplication，只不过多做了过滤注册反复的利用。

export function start(opts: FrameworkConfiguration = {}) {
  // prefetch 是否反对预加载
  // singular 是否反对单例模式
  // sandbox 是否反对沙箱
  frameworkConfiguration = {prefetch: true, singular: true, sandbox: true, ...opts};
  const {
    prefetch,
    sandbox,
    singular,
    urlRerouteOnly = defaultUrlRerouteOnly,
    ...importEntryOpts
  } = frameworkConfiguration;

  if (prefetch) { // 预加载策略
    doPrefetchStrategy(microApps, prefetch, importEntryOpts);
  }

  // 开启沙箱
  if (sandbox) {
    // 如果不反对 Proxy 则降级到快照沙箱 loose 示意应用快照沙箱
    if (!window.Proxy) {console.warn('[qiankun] Miss window.Proxy, proxySandbox will degenerate into snapshotSandbox');
      frameworkConfiguration.sandbox = typeof sandbox === 'object' ? {...sandbox, loose: true} : {loose: true};
      // Proxy 下若为非单例模式 则会报错
      if (!singular) {
        console.warn('[qiankun] Setting singular as false may cause unexpected behavior while your browser not support window.Proxy',
        );
      }
    }
  }

  // 启动利用，最终理论调用 single spa 的 start 办法
  startSingleSpa({urlRerouteOnly});
  started = true;

  // 启动后，将 promise 状态改为胜利态
  frameworkStartedDefer.resolve();}

qiankun提供 预加载、单例模式、开启沙箱 配置。在开启沙箱时，会优先应用 Proxy 代理沙箱，如果浏览器不反对，则降级应用 Snapshot 快照沙箱。

在应用代理沙箱时，如果浏览器不反对 Proxy 且开启了单例模式，则会报错，因为在快照沙箱下应用单例模式会存在问题。具体上面会提到

export function doPrefetchStrategy(apps: AppMetadata[],
  prefetchStrategy: PrefetchStrategy,
  importEntryOpts?: ImportEntryOpts,
) {const appsName2Apps = (names: string[]): AppMetadata[] => apps.filter((app) => names.includes(app.name));

  if (Array.isArray(prefetchStrategy)) {
    // 加载第一个利用
    prefetchAfterFirstMounted(appsName2Apps(prefetchStrategy as string[]), importEntryOpts);
  }
  // ...
}

function prefetchAfterFirstMounted(apps: AppMetadata[], opts?: ImportEntryOpts): void {
  // 监听第一个利用的
  window.addEventListener('single-spa:first-mount', function listener() {
    // 过滤所有没加载的 app
    const notLoadedApps = apps.filter((app) => getAppStatus(app.name) === NOT_LOADED);

    if (process.env.NODE_ENV === 'development') {const mountedApps = getMountedApps();
      console.log(`[qiankun] prefetch starting after ${mountedApps} mounted...`, notLoadedApps);
    }
    // 没加载的 app 全副须要预加载
    notLoadedApps.forEach(({entry}) => prefetch(entry, opts));
    // 移除监听的事件
    window.removeEventListener('single-spa:first-mount', listener);
  });
}
function prefetch(entry: Entry, opts?: ImportEntryOpts): void {if (!navigator.onLine || isSlowNetwork) {
    // Don't prefetch if in a slow network or offline
    return;
  }
  // 应用 requestIdleCallback 在浏览器闲暇工夫进行预加载
  requestIdleCallback(async () => {
    // 应用 import-html-entry 进行加载资源
    // 其外部实现 是通过 fetch 去加载资源
    const {getExternalScripts, getExternalStyleSheets} = await importEntry(entry, opts);
    requestIdleCallback(getExternalStyleSheets);
    requestIdleCallback(getExternalScripts);
  });
}

监听第一个加载的利用：过滤所有没加载的 app，将其预加载。

应用 requestIdleCallback 在浏览器闲暇工夫进行预加载；应用 import-html-entry 进行加载资源，其外部实现是通过 fetch 去加载资源，取代 single-spa 采纳的 system.js 模块标准加载资源。

requestIdleCallback在 react fiber 架构 中有应用到，感兴趣的可返回浏览器任务调度策略和渲染流程查看。

当执行 start 办法后，会去执行 registerApplication 中的 loadApp 加载子利用。

其实现代码较多，能够返回 qiankun/loader.ts/loadApp 查看实现，有正文表明大略流程。总结下来次要做了如下几件事

通过 importEntry 办法拉取子利用
在拉取的模板外面包一层 div , 减少 css 款式隔离，提供 shadowdom、scopedCSS 两种形式
将模板进行挂载
创立 js 沙箱 , 取得沙箱开启和沙箱敞开办法
合并出 beforeUnmount、afterUnmount、afterMount、beforeMount、beforeLoad 办法。减少 qiankun 标识
顺次调用 beforeLoad 办法
在沙箱中执行脚本，获取子利用的生命周期 bootstrap、mount、unmount 、update
格式化子利用的 mount 办法和 unmount 办法。
- 在 mount 执行前挂载沙箱、顺次执行 beforeMount，之后调用 mount 办法，将全局通信办法传入。mount 办法执行结束后执行 afterMount
- unmount办法会优先执行 beforeUnmount 钩子，之后开始卸载
削减一个 update 办法

接下来是如何实现创立沙箱

创立沙箱会先判断浏览器是否反对 Proxy，如果反对并不是useLooseSandbox 模式，则应用 代理沙箱实现 ，如果不反对则采纳 快照沙箱

class ProxySandbox {constructor() {
    const rawWindow = window
    const fakeWindow = {}
    const proxy = new Proxy(fakeWindow, {set(target, p, value) {target[p] = value
        return true
      },
      get(target, p) {return target[p] || rawWindow[p]
      },
    })
    this.proxy = proxy
  }
}

let sandbox1 = new ProxySandbox()
let sandbox2 = new ProxySandbox()

window.name = '搜狐焦点'
((window) => {
  window.name = '智能话机'
  console.log(window.name)
})(sandbox1.proxy)

((window) => {
  window.name = '识客宝'
  console.log(window.name)
})(sandbox2.proxy)

其原理次要是代理原生 window，在取值时优先从proxy window 上获取，如果没有值再从 实在 window上获取；在赋值时只改变 proxy window，进而达到和主利用隔离。这只是繁难实现，qiankun 的 ProxySandbox 实现。

[源码实现代码](https://github.com/careteenL/…

function iter(obj: typeof window, callbackFn: (prop: any) => void) {
  // eslint-disable-next-line guard-for-in, no-restricted-syntax
  for (const prop in obj) {
    // patch for clearInterval for compatible reason, see #1490
    if (obj.hasOwnProperty(prop) || prop === 'clearInterval') {callbackFn(prop);
    }
  }
}
// ...
active() {
  // 记录以后快照
  this.windowSnapshot = {} as Window;
  iter(window, (prop) => {this.windowSnapshot[prop] = window[prop];
  });

  // 复原之前的变更
  Object.keys(this.modifyPropsMap).forEach((p: any) => {window[p] = this.modifyPropsMap[p];
  });

  this.sandboxRunning = true;
}

次要是对 window 的所有属性进行了一个拍照。存在的问题就是多实例的状况会凌乱，所以在浏览器不反对 Proxy 且设置非单例的状况下，qiankun会报错。

源码实现代码

当设置 strictStyleIsolation=true 时，会开启 Shadow Dom 款式沙箱。体现如下，会包裹一层shadow dom，做到真正意义上的款式隔离，但毛病就是子利用想要复用父利用的款式时做不到。

源码实现代码

qiankun也提供设置 experimentalStyleIsolation=true 开启 scope 款式隔离，体现如下，应用 div 包裹子利用，并将子利用的顶级款式加上 子利用名称 前缀进行款式隔离。其中还将标签选择器加上[data-qainkun]="slave-name"。

源码实现代码

基于公布订阅实现。

setGlobalState：更新 store 数据
- 对输出 state 的第一层属性做校验，只有初始化时申明过的第一层（bucket）属性才会被更改
- 批改 store 并触发全局监听
onGlobalStateChange：全局依赖监听
- 收集 setState 时所须要触发的依赖
offGlobalStateChange：登记该利用下的依赖

export function getMicroAppStateActions(id: string, isMaster?: boolean): MicroAppStateActions {
  return {onGlobalStateChange(callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) {if (!(callback instanceof Function)) {console.error('[qiankun] callback must be function!');
        return;
      }
      if (deps[id]) {console.warn(`[qiankun] '${id}' global listener already exists before this, new listener will overwrite it.`);
      }
      deps[id] = callback;
      if (fireImmediately) {const cloneState = cloneDeep(globalState);
        callback(cloneState, cloneState);
      }
    },
    setGlobalState(state: Record<string, any> = {}) {if (state === globalState) {console.warn('[qiankun] state has not changed！');
        return false;
      }
      const changeKeys: string[] = [];
      const prevGlobalState = cloneDeep(globalState);
      globalState = cloneDeep(Object.keys(state).reduce((_globalState, changeKey) => {if (isMaster || _globalState.hasOwnProperty(changeKey)) {changeKeys.push(changeKey);
            return Object.assign(_globalState, { [changeKey]: state[changeKey] });
          }
          console.warn(`[qiankun] '${changeKey}' not declared when init state！`);
          return _globalState;
        }, globalState),
      );
      if (changeKeys.length === 0) {console.warn('[qiankun] state has not changed！');
        return false;
      }
      emitGlobal(globalState, prevGlobalState);
      return true;
    },
    offGlobalStateChange() {delete deps[id];
      return true;
    },
  };
}

基于 single spa的下层封装
提供 shadow dom 和scope款式隔离计划
解决 proxy sandbox 和snapshot sanboxjs 隔离计划
基于 公布订阅 更好的服务于react setState
还提供 @umijs/plugin-qiankun 插件能在 umi 利用下更好的接入

除了 single-spa 这种基于底座的微前端解决方案，[webpack5 module federation]()webpack5 的联邦模块也能实现，YY 团队的 EMP 基于此实现了 去核心模式，脱离基座模式，每个利用之间都能够批次分享资源。能够通过这篇文章尝尝鲜，前面再持续钻研。

深入浅出微前端

背景

什么是微前端

微前端劣势

微前端解决方案

为什么不是 TA

为什么不是 iframe

为什么不是 Web Component

为什么不是 ESM

SingleSpa

SystemJS 应用

新建我的项目并配置

编写 js、html 代码

查看 dest 目录

SystemJS 原理

外围办法 -register

外围办法 -import

SingleSpa 应用

创立基座

创立 vue 我的项目

创立 react 我的项目

启动我的项目

SingleSpa 原理

原生 Demo

外围办法 -registerApplication

状态机

外围办法 -start

外围逻辑 -reroute

欠缺外围逻辑 -reroute

SingleSpa 小结

qiankun

qiankun 应用

提供基座

提供 Vue 子利用

提供 React 子利用

查看最终成果

qiankun 原理

registerMicroApps

start

prefetch

loadApp

createSandboxContainer

Proxy Sandbox

Snapshot Sandbox

Style Shadow Dom Sandbox

Style Scope Sandbox

父子利用通信形式

qiankun 小结

总结

站内搜索