微前端是指存在于浏览器中的微服务，通常由许多组件组成，并使用类似于 React、Vue 和 Angular 等框架来渲染组件，每个微前端可以由不同的团队进行管理，并可以自主选择框架。

import { registerApplication, start } from "single-spa";registerApplication(  "foo",  () => System.import("foo"),  (location) => location.pathname.startsWith("foo"));registerApplication({  name: "bar",  loadingFn: () => import("bar.js"),  activityFn: (location) => location.pathname.startsWith("bar"),});start();

[{  name: 'foo',  loadApp: () => System.import('foo'),  activeWhen: location => location.pathname.startsWith('foo'),  customProps: {},  status: 'NOT_LOADED'},{  name: 'bar',  loadApp: () => import('bar.js'),  activeWhen: location => location.pathname.startsWith('bar')  customProps: {},  status: 'NOT_LOADED'}]

// We will trigger an app change for any routing events.window.addEventListener("hashchange", urlReroute);window.addEventListener("popstate", urlReroute);// Monkeypatch addEventListener so that we can ensure correct timingconst originalAddEventListener = window.addEventListener;window.addEventListener = function(eventName, fn) {  if (typeof fn === "function") {    if (      ["hashchange", "popstate"].indexOf(eventName) >= 0 &&      !find(capturedEventListeners[eventName], (listener) => listener === fn)    ) {      capturedEventListeners[eventName].push(fn);      return;    }  }  return originalAddEventListener.apply(this, arguments);};

function patchedUpdateState(updateState, methodName) {  return function() {    const urlBefore = window.location.href;    const result = updateState.apply(this, arguments);    const urlAfter = window.location.href;    if (!urlRerouteOnly || urlBefore !== urlAfter) {      urlReroute(createPopStateEvent(window.history.state, methodName));    }  };}window.history.pushState = patchedUpdateState(  window.history.pushState,  "pushState");window.history.replaceState = patchedUpdateState(  window.history.replaceState,  "replaceState");

let appChangeUnderway = false,  peopleWaitingOnAppChange = [];export async function reroute(pendingPromises = [], eventArguments) {  // 根据不同的条件把应用分到不同的待处理数组里  const {    appsToUnload,    appsToUnmount,    appsToLoad,    appsToMount,  } = getAppChanges();
  // 如果在变更进行中还进行了新的路由跳转，则进入一个队列中排队，  if (appChangeUnderway) {    return new Promise((resolve, reject) => {      peopleWaitingOnAppChange.push({ resolve, reject, eventArguments });    });  }  // 标记此次变更正在执行中，  appChangeUnderway = true;
  await Promise.all(appsToUnmount.map(toUnmountPromise)); // 待卸载的应用先执行unmount  await Promise.all(appsToUnload.map(toUnloadPromise)); // 待销毁的应用先销毁  await Promise.all(appsToLoad.map(toLoadPromise)); // 待加载的应用先执行load  await Promise.all(appsToBootstrap.map(toBootstrapPromise)); // 待bootstrap的应用执行bootstrap  await Promise.all(appsMount.map(toMountPromise)); // 待挂载的应用执行mount
  appChangeUnderway = false;  // 如果排队的队列中还有路由变更，则进行新的一轮reroute循环  reroute(peopleWaitingOnAppChange);}

export function getAppChanges() {  const appsToUnload = [],    appsToUnmount = [],    appsToLoad = [],    appsToMount = [];  apps.forEach((app) => {    const appShouldBeActive =      app.status !== SKIP_BECAUSE_BROKEN && shouldBeActive(app);    switch (app.status) {      case LOAD_ERROR:      case NOT_LOADED:        if (appShouldBeActive) appsToLoad.push(app);      case NOT_BOOTSTRAPPED:      case NOT_MOUNTED:        if (!appShouldBeActive) {          appsToUnload.push(app);        } else if (appShouldBeActive) {          appsToMount.push(app);        }      case MOUNTED:        if (!appShouldBeActive) appsToUnmount.push(app);    }  });  return { appsToUnload, appsToUnmount, appsToLoad, appsToMount };}

export const NOT_LOADED = "NOT_LOADED"; // 还未加载export const LOADING_SOURCE_CODE = "LOADING_SOURCE_CODE"; // 加载源码中export const NOT_BOOTSTRAPPED = "NOT_BOOTSTRAPPED"; // 已加载源码，还未bootstrapexport const BOOTSTRAPPING = "BOOTSTRAPPING"; // bootstrap中export const NOT_MOUNTED = "NOT_MOUNTED"; // bootstrap完毕，还未mountexport const MOUNTING = "MOUNTING"; // mount中export const MOUNTED = "MOUNTED"; // mount结束export const UPDATING = "UPDATING"; // updata中export const UNMOUNTING = "UNMOUNTING"; // unmount中export const UNLOADING = "UNLOADING"; // unload中export const LOAD_ERROR = "LOAD_ERROR"; // 加载源码时加载失败export const SKIP_BECAUSE_BROKEN = "SKIP_BECAUSE_BROKEN"; // 在load,bootstrap,mount,unmount阶段发生脚本错误

// 接收方式window.addEventListener("single-spa:before-routing-event", (evt) => {  const {    originalEvent,    newAppStatuses,    appsByNewStatus,    totalAppChanges,  } = evt.detail;  console.log(    "original event that triggered this single-spa event",    originalEvent  ); // PopStateEvent | HashChangeEvent | undefined  console.log(    "the new status for all applications after the reroute finishes",    newAppStatuses  ); // { app1: MOUNTED, app2: NOT_MOUNTED }  console.log(    "the applications that changed, grouped by their status",    appsByNewStatus  ); // { MOUNTED: ['app1'], NOT_MOUNTED: ['app2'] }  console.log(    "number of applications that changed status so far during this reroute",    totalAppChanges  ); // 2});

import { registerMicroApps, start } from "qiankun";registerMicroApps([  {    name: "react app", // app name registered    entry: "//localhost:7100",    container: "#yourContainer",    activeRule: "/yourActiveRule",  },  {    name: "vue app",    entry: { scripts: ["//localhost:7100/main.js"] },    container: "#yourContainer2",    activeRule: "/yourActiveRule2",  },]);start();

import { registerApplication } from "single-spa";export function registerMicroApps(apps) {  apps.forEach((app) => {    const { name, activeRule, loader = noop, props, ...appConfig } = app;    registerApplication({      name,      app: async () => {        loader(true);        const { mount, ...otherMicroAppConfigs } = await loadApp(          { name, props, ...appConfig },          frameworkConfiguration        );        return {          mount: [            async () => loader(true),            ...toArray(mount),            async () => loader(false),          ],          ...otherMicroAppConfigs,        };      },      activeWhen: activeRule,      customProps: props,    });  });}

export async function loadApp(app, configuration) {  const { template, execScripts } = await importEntry(entry); // 通过应用的入口链接即可获取到应用的html, js, css内容  const sandboxInstance = createSandbox(); // 创建沙箱实例  const global = sandboxInstance.proxy; // 获取一个沙箱全局上下文  const mountSandbox = sandboxInstance.mount;  const unmountSandbox = sandboxInstance.unmount;  // 在这个沙箱全局上下文执行子项目的js代码  const scriptExports = await execScripts(global);  // 获取子项目导出的 bootstrap / mount / unmount  const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(    scriptExports,    appName,    global  );  // 初始化事件模块  const {    onGlobalStateChange,    setGlobalState,    offGlobalStateChange,  } = getMicroAppStateActions();  // 传递给single-spa的mount， unmount方法实际是qiankun包装过的函数  return {    bootstrap,    mount: async () => {      awaitrender(template); // 把模板渲染到挂载区域      mountSandbox(); // 挂载沙箱      await mount({ setGlobalState, onGlobalStateChange }); // 调用应用的mount函数    },    ummount: async () => {      await ummount(); // 调用应用的ummount函数      unmountSandbox(); // 卸载沙箱      offGlobalStateChange(); // 解除事件监听      render(null); // 把渲染区域清空    },  };}

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>这里是标题</title>    <link rel="stylesheet" href="./css/admin.css" />    <style>      .div {        color: red;      }</style>  </head>  <boyd>    <div id="wrap">      <div id="app"></div>    </div>    <script src="/static/js/app.12345.js"></script>    <script>      console.log("1");</script>  </boyd></html>

<meta charset="utf-8" /><title>这里是标题</title><link rel="stylesheet" href="./css/admin.css" /><style>  .div {    color: red;  }</style><div id="wrap">  <div id="app"></div></div><!--  script /static/js/app.12345.js replaced by import-html-entry --><!-- inline scripts replaced by import-html-entry -->

export function importEntry(entry, opts = {}) {  ... // parse html 过程忽略  return {    // 纯dom元素的内容    template,    // 一个可以接收自定义fetch方法的获取<script>标签的方法    getExternalScripts: () => getExternalScripts(scripts, fetch),    // 一个可以接收自定义fetch方法的获取<style>标签的方法    getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),    // 一个接收全局上下文的执行函数，执行这个方法则模拟了一个应用加载时浏览器执行script脚本的逻辑    execScripts: (proxy) => {}  }}

// scripts是解析html后得到的<scripts>标签的url的数组export getExternalScripts(scripts, fetch = defaultFetch) {  return Promise.all(scripts.map(script => {    return fetch(scriptUrl).then(response => {        return response.text();    }));  }))}

export async execScripts(proxy) {  // 上面的getExternalScripts加载得到的<scripts>标签的内容  const scriptsTexts = await getExternalScripts(scripts)  window.proxy = proxy;  // 模拟浏览器，按顺序执行script  for (let scriptsText of scriptsTexts) {    // 调整sourceMap的地址，否则sourceMap失效    const sourceUrl = '//# sourceURL=${scriptSrc}\n';    // 通过iife把proxy替换为window, 通过eval来执行这个script    eval(`      ;(function(window, self){        ;${scriptText}        ${sourceUrl}      }).bind(window.proxy)(window.proxy, window.proxy);    `;)  }}

export function createSandbox() {  const sandbox = new LegacySandbox();  // load或者bootstrap阶段产生的污染和泄漏  const bootstrappingFreers = patchAtBootstrapping();  let sideEffectsRebuilders = [];  return {    proxy: sandbox.proxy,    // 沙箱被 mount, 可能是从 bootstrap 状态进入的 mount, 也可能是从 unmount 之后再次唤醒进入 mount    async mount() {      /* ------------------------------------------ 1. 启动/恢复 沙箱------------------------------------------ */      sandbox.active();      const sideEffectsRebuildersAtBootstrapping = sideEffectsRebuilders.slice(        0,        bootstrappingFreers.length      );      // 重建应用bootstrap阶段的副作用，比如动态插入css      sideEffectsRebuildersAtBootstrapping.forEach((rebuild) => rebuild());      /* ------------------------------------------ 2. 开启全局副作用监听 ------------------------------------------*/      // render 沙箱启动时开始劫持各类全局监听，尽量不要在应用初始化bootstrap阶段有 事件监听/定时器 等副作用，这些副作用无法清除      mountingFreers = patchAtMounting(        appName,        elementGetter,        sandbox,        singular,        scopedCSS,        excludeAssetFilter      );      sideEffectsRebuilders = [];    },    // 恢复 global 状态，使其能回到应用加载之前的状态    async unmount() {      // 每个Freers释放后都会返回一个重建函数，如果该Freers不需要重建，则是返回一个空函数      sideEffectsRebuilders = [...bootstrappingFreers].map((free) => free());      sandbox.inactive();    },  };}

class SingularProxySandbox {  // 沙箱期间更新的全局变量  addedPropsMapInSandbox = new Map();  // 沙箱期间更新的全局变量  modifiedPropsOriginalValueMapInSandbox = new Map();  // 持续记录更新的(新增和修改的)全局变量的 map，用于在任意时刻做 snapshot  currentUpdatedPropsValueMap = new Map();  sandboxRunning = true;  active() {    // 把上次该沙箱运行时的快照还原    this.currentUpdatedPropsValueMap.forEach((v, p) => setWindowProp(p, v));    this.sandboxRunning = true;  }  inactive() {    // 沙箱销毁时把修改的值改回去    this.modifiedPropsOriginalValueMapInSandbox.forEach((v, p) => setWindowProp(p, v));    // 沙箱销毁时把新增的值置空    this.addedPropsMapInSandbox.forEach((_, p) => setWindowProp(p, undefined, true));    this.sandboxRunning = false;  }  constructor(name) {    const proxy = new Proxy(window, {      set(_, p, value) {          // 如果当前 window 对象不存在该属性，则记录该属性是新增的          if (!window.hasOwnProperty(p)) {            addedPropsMapInSandbox.set(p, value);          // 如果当前 window 对象存在该属性，且 map 中未记录过，则记录该属性被修改及保存修改前的值          } else if (!modifiedPropsOriginalValueMapInSandbox.has(p)) {            const originalValue = window[p];            modifiedPropsOriginalValueMapInSandbox.set(p, originalValue);          }          // 不管新增还是修改，这个值都变成最新的快照记录起来          currentUpdatedPropsValueMap.set(p, value);          window[p] = value;        }      },      get(_, p) {        return window[p]      },    })  }}

// 处理mount阶段和应用运行阶段产生的泄漏export function patchAtMounting() {  return [    // 处理定时器泄漏    patchInterval(),    // 处理全局事件监听泄漏    patchWindowListener(),    patchHistoryListener(),    // 这个严格不算泄漏，是监听动态插入页面的dom结构（包括script和style）    patchDynamicAppend(),  ];}// 处理load和bootstrap阶段产生的泄漏export function patchAtBootstrapping() {  return [patchDynamicAppend()];}

const rawWindowInterval = window.setInterval;const rawWindowClearInterval = window.clearInterval;export default function patchInterval(global) {  let intervals = [];  global.clearInterval = (intervalId) => {    intervals = intervals.filter((id) => id !== intervalId);    return rawWindowClearInterval(intervalId);  };  global.setInterval = (handler, timeout, ...arg) => {    const intervalId = rawWindowInterval(handler, timeout, ...args);    intervals = [...intervals, intervalId];    return intervalId;  };  // 返回释放这些泄漏的方法  return function free() {    intervals.forEach((id) => global.clearInterval(id));    global.setInterval = rawWindowInterval;    global.clearInterval = rawWindowClearInterval;    // 这个patch有没有需要重建的场景，如果没有，则为空函数    return function rebuild() {};  };}

// 监听返回取消监听方法，取消监听返回再重新监听的方法const unwatch = this.$watch("xxx", () => {});const rewatch = unwatch(); // 伪代码，实际上没有

const rawHeadAppendChild = HTMLHeadElement.prototype.appendChild;export default function patchDynamicAppend(mounting, proxy) {  let dynamicStyleSheetElements = [];  // 劫持插入函数  HTMLHeadElement.prototype.appendChild = function(element) {    switch (element.tagName) {      case LINK_TAG_NAME:      // 如果是动态插入<style>标签到body上，则调整插入的位置到子应用挂载区      case STYLE_TAG_NAME: {        dynamicStyleSheetElements.push(stylesheetElement);        return rawHeadAppendChild.call(appWrapperGetter(), stylesheetElement);      }      // 如果是动态插入<script>标签，则使用execScripts来执行这个脚本，然后把脚本替换为一段注释文本表示已执行过      case SCRIPT_TAG_NAME: {        const { src, text } = element;        execScripts(null, [src ? src : `<script>${text}</script>`], proxy);        const dynamicScriptCommentElement = document.createComment(          src            ? `dynamic script ${src} replaced by qiankun`            : "dynamic inline script replaced by qiankun"        );        return rawHeadAppendChild.call(          appWrapperGetter(),          dynamicScriptCommentElement        );      }    }    return rawHeadAppendChild.call(this, element);  };  // 这里free不需要释放什么东西，因为style元素会随着内容区清除而自然消失  return function free() {    // 这里需要再下次继续挂载这个应用时重建style元素    return function rebuild() {      dynamicStyleSheetElements.forEach((stylesheetElement) => {        document.head.appendChild.call(appWrapperGetter(), stylesheetElement);      });      if (mounting) dynamicStyleSheetElements = [];    };  };}

let globalState = {};export function getMicroAppStateActions(id, isMaster) {  return {    // 事件变更回调    onGlobalStateChange(callback, fireImmediately) {      deps[id] = callback;      const cloneState = cloneDeep(globalState);      if (fireImmediately) {        callback(cloneState, cloneState);      }    },    // 设置全局状态    setGlobalState(state) {      const prevGlobalState = cloneDeep(globalState);      Object.keys(deps).forEach((id) => {        deps[id](cloneDeep(globalState), cloneDeep(prevGlobalState));      });      return true;    },    // 注销该应用下的依赖    offGlobalStateChange() {      delete deps[id];    },  };}

function prefetch(entry, opts) {  if (!navigator.onLine || isSlowNetwork) {    // Don't prefetch if in a slow network or offline    return;  }  requestIdleCallback(async () => {    const { getExternalScripts, getExternalStyleSheets } = await importEntry(      entry,      opts    );    requestIdleCallback(getExternalStyleSheets);    requestIdleCallback(getExternalScripts);  });}apps.forEach(({ entry }) => prefetch(entry, opts));