关于微前端:qiankun-微前端原理与实践

本文来自 OPPO 互联网技术团队，转载请注名作者。同时欢送关注咱们的公众号：OPPO_tech，与你分享 OPPO 前沿互联网技术及流动。

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

每个微前端都领有独立的 git 仓库、package.json 和构建工具配置。因而，能够拆分一些巨石利用为多个独立的模块再组合起来，利用间独立保护及上线，互不烦扰。

本文通过一些精简代码的形式介绍微前端框架 qiankun 的原理及 OPPO 云 在这下面的一些实际。

注：本文默认读者应用过 qiankun 框架，且文中应用的 qiankun 版本为：2.0.9。

1. qiankun 的前身 single-spa

qiankun 是一个基于 single-spa 的微前端实现库，在 qiankun 还未诞生前，用户通常应用 single-spa 来解决微前端的问题，所以咱们先来理解single-spa。

咱们先来上一个例子，并逐渐剖析每一步产生了什么。

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();

• appName: string 利用的名字将会在 single-spa 中注册和援用, 并在开发工具中标记
• loadingFn: () => 必须是一个加载函数，返回一个利用或者一个 Promise
• activityFn: (location) => boolean 判断以后利用是否沉闷的办法
• customProps?: Object 可选的传递自定义参数

1.1 元数据处理

首先，single-spa会对上述数据进行标准化解决，并增加上 状态，最终转化为一个元数据数组，例如上述数据会被转为：

[{
  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'
}]

1.2 路由劫持

single-spa外部会对浏览器的路由进行劫持，所有的 路由办法 和路由事件 都确保先进入 single-spa 进行对立调度。

// 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 timing
const 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"
);

以上是劫持代码的精简版，能够看到，所有的劫持都指向了一个进口函数urlReroute。

1.3 urlReroute 对立处理函数

每次路由变动，都进入一个雷同的函数进行解决：

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);
}

接下来看看分组函数在做什么。

1.4 getAppChanges 利用分组

每次路由变更都先依据利用的 activeRule 规定把利用分组。

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};
}

1.5 对于状态字段的枚举

single-spa对利用划分了一下的状态

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"; // bootstrap 结束，还未 mount
export 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 阶段产生脚本谬误

咱们能够在开发时应用官网的调试工具疾速查看每次路由变更后每个利用的状态：

single-spa应用了 无限状态机 的设计思维：

• 事物领有多种状态，任一时间只会处于一种状态不会处于多种状态；
• 动作能够扭转事物状态，一个动作能够通过条件判断，扭转事物到不同的状态，然而不能同时指向多个状态，一个工夫，就一个状态；
• 状态总数是无限的。

无限状态机的其余例子：Promise、红绿灯

1.6 single-spa 的事件零碎

基于浏览器原生的事件零碎，无框架耦合，全局开箱可用。

// 接管形式
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
});

1.7 single-spa 亮点与有余

亮点

• 全异步编程，对于用户须要提供的 load,bootstrap,mount,unmount 均应用 promise 异步的模式解决，不论同步、异步都能 hold 住
• 通过劫持路由，能够在每次路由变更时先判断是否须要切换利用，再交给子利用去响应路由
• 标准化每个利用的挂载和卸载函数，不耦合任何框架，只有子利用实现了对应接口即可接入零碎中

有余

• load 办法须要晓得子项目的入口文件
• 把多个利用的运行时集成起来须要我的项目间自行处理内存透露，款式净化问题
• 没有提供父子数据通信的形式

2. qiankun 退场

为了解决 single-spa 的一些有余，以及保留 single-spa 中优良的理念，所以 qiankun 在single-spa的根底上进行了更进一步的拓展。

以下是 qiankun 官网给的能力图：

咱们来看看 qiankun 的应用形式

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();

是不是有点像 single-spa 的注册形式？

2.1 传递注册信息给 single-spa

实际上 qiankun 外部会把用户的利用注册信息 包装 后传递给single-spa

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,
    });
  });
}

能够看到 mount 和unmount函数是由 loadApp 返回的。

2.2 loadApp 的实现

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); // 把渲染区域清空
    },
  };
}

2.3 importEntry 的实现

看看 importEntry 的应用，这是一个独立的包 import-html-entry，通过解析一个 html 内容，返回 html, css，js 拆散过的内容。

例如一个子利用的入口 html 为如下

<!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>

被 qiankun 加载到页面后，最终生成的 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 -->

看看 importEntry 返回的内容

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) => {}}
}

看看 getExternalScripts 的实现，实际上是用 并行 fetch模仿浏览器加载 <style> 标签 的过程（留神此时还没有执行这些脚本 ）, getExternalStyleSheets 与这个相似。

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

而后看看 execScripts 的实现，能够通过给定的一个 假 window来执行所有 <script> 标签 的脚本，这样就是真正模仿了浏览器执行 <script> 标签 的行为。

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);
    `;)
  }
}

2.4 全局变量净化与内存透露

看沙箱性能前先聊一聊沙箱，沙箱次要用于解决程序的 全局变量净化 和内存透露 问题。

• 全局变量净化： 多个利用都应用某个同名全局变量，例如 Vue。

• 内存透露： 内存透露指因为忽略或谬误造成程序未能开释曾经不再应用的内存。内存透露并非指内存在物理上的隐没，而是应用程序调配某段内存后，因为设计谬误，导致在开释该段内存之前就失去了对该段内存的管制，从而造成了内存的节约。

  常见的内存透露场景：

  1. 意外的全局变量
  2. 透露到全局的闭包
  3. DOM 透露
  4. 定时器
  5. EventListener
  6. console.log (开发环境)

上面咱们看看 qiankun 要如何解决下面的问题。

2.5 qiankun 如何应用沙箱

能够联合上文 loadApp 的逻辑看看，本文探讨的是 LegacySandbox 沙箱。

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();},
  };
}

看看 LegacySandbox 沙箱的实现，这个沙箱的作用次要解决全局变量净化，应用一个 proxy 来替换 window 来劫持所有的 window 操作。

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]
      },
    })
  }
}

除了全局变量净化的问题，还有其余的透露问题须要解决，这些透露问题 qiankun 应用不同的 patch 函数 来劫持。

// 解决 mount 阶段和利用运行阶段产生的透露
export function patchAtMounting() {
  return [
    // 解决定时器透露
    patchInterval(),
    // 解决全局事件监听透露
    patchWindowListener(),
    patchHistoryListener(),
    // 这个严格不算透露，是监听动静插入页面的 dom 构造（包含 script 和 style）patchDynamicAppend(),];
}
// 解决 load 和 bootstrap 阶段产生的透露
export function patchAtBootstrapping() {return [patchDynamicAppend()];
}

一个 patch 的例子如下：

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() {};
  };
}

这种返回 勾销性能 的设计很精妙，在 vue 中也能找到相似设计。

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

咱们来看最简单的 patchDynamicAppend 实现，用于解决代码里动静插入 script 和link的场景。

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 = [];};
  };
}

2.6 父子利用通信

qiankun实现了一个简略的全局数据存储，作为 single-spa 事件的补充，父子利用都能够独特读写这个存储里的数据。

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];
    },
  };
}

2.7 对于预申请

预申请充分利用了 importEntry 把获取资源和执行资源拆散的点来提前加载所有子利用的资源。

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));

以上分享了 qiankun 和single-spa的原理，总的来说 qiankun 更面向一些子项目不可控，并且开发者不会刻意解决净化和内存透露的场景，而 single-spa 则更纯正的是一个 路由 控制器，所有的净化和透露问题都须要开发者自行束缚。

3. OPPO 云实际

OPPO 云 在实际 qiankun 微前端 的落地过程中，也摸索出一些教训可进行分享。

3.1 对于沙箱

qiankun 的沙箱不是万能的

• 沙箱只有一层的劫持，例如 Date.prototype.xxx 这样的改变是不会被还原的
• 目前沙箱对于全局变量的作用在于屏蔽，而不是革除，并且屏蔽后这部分内存是保留的，后续会凋谢自定义沙箱的能力
• 对于内存透露的概念，能够理解一下“常驻内存”的概念

  常驻内存是一种辅助工具程序，能伪装退出，而仍驻留于内存当中，让你运行其它的利用，当你再切回利用时，能够立刻利用这些内存，而不须要再次耗时创立

• 排查内存问题时请应用无痕模式以及不应用任何 chrome 拓展，也举荐应用生产构建来排查

3.2 提取公共库

• qiankun不倡议共享依赖，放心 原型链净化 等问题。single-spa推荐共享大型依赖，须要小心解决净化问题，它们都是举荐应用 webpack 的external来共享依赖库。
• 咱们也推荐共享大的公共依赖，也是应用 webpack 的external来共享依赖库，不过是每个子利用加载时都反复再加载一次库，相当于节俭了雷同库的下载工夫，也保障了不同子利用间不会产生 原型链净化 ，属于 折中 的计划。

参考链接

• qiankun
• single-spa
• 指标是最欠缺的微前端解决方案