微前端是最近一年以来前端领域非常火的一个概念，同时集团内也衍生了很多相关的技术产品。这篇文章是考拉运营中台组最近调研微前端的一些尝试和思考

背景

项目：运营平台提效战役-大促盘货系统开发

业务：大促系统通过大促流程线上化，并与盘货、搭建、投放、促销等系统打通，实现大促商品、价格门槛约束和大促货品的应用，从而增强大促心智的一个系统。

我们的诉求是把大促系统打造成一个大促活动运营的门户站点，提供一站式的大促运营的解决方案，业务上会打通多个同级的系统。在这个基础上我们调研了微前端的一些技术方案。

微前端介绍

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略https://micro-frontends.org

微前端工程价值

独立开发、独立部署；
框架无关；
跨业务域复用；
方便功能扩展、升级；
便于多人协作开发；

如果微前端只存在工程上的价值是不值得大张旗鼓去做的

微前端业务价值

业务原子化输出；
业务编排整合；

应用场景

巨石应用的拆分-pop partner系统
业务编排整合-搭建&大促系统

微前端的优势可以有效的弥补当前运营中台遇到的一些痛点：

技术：考拉入园以后有很多网易技术背景下的工程，特别是中台组这边angular和vue框架实现的代码，甚至还有前后端不分离的java+angular的老工程，这些工程开发效率慢，开发体验差，没有成就感

运营：运营同事针对各种内部系统没有统一的调配入口，一次操作有可能需要在多个不同系统完成，操作效率底下

single-spa&qiankun

single-spa是现在市场上比较成熟的技术方案，以及蚂蚁基于single-spa研发的qiankun框架

single-spa：https://yuque.alibaba-inc.com/kaolafed-operation/technology-atmosphere-build/reahus

import * as singleSpa from 'single-spa';

singleSpa.registerApplication('app-1', () =>
  import ('../app1/app1.js'), pathPrefix('/app1'));
singleSpa.registerApplication('app-2', () =>
  import ('../app2/app2.js'), pathPrefix('/app2'));

singleSpa.start();

function pathPrefix(prefix) {
  return function(location) {
    return location.pathname.startsWith(`${prefix}`);
  }
}

我们需要注册对应的application，并且指定对应application的激活函数。同时application需要在入口文件导出相应的生命周期函数

export async function bootstrap(props) {...}
export async function mount(props) {...}
export async function unmount(props) {...}

如果简单来看的话，single-spa就是在合适的时候执行我们传入的loadFunctin, bootstarp, mount, unmount, unload方法，并抛出了一些事件

qiankun的启动调用方式和single-spa非常相似，但是在single-spa的基础上增加了一些功能

import-html-entry
js沙箱
更丰富的生命周期
prefetch

https://qiankun.umijs.org/zh/guide/getting-started.html#%E4%B8%BB%E5%BA%94%E7%94%A8

技术难点

1.应用隔离

js 沙箱实现

通过proxy代理window对象，监听对应的get set方法

在应用的 bootstrap 及 mount 两个生命周期开始之前分别给全局状态打下快照，然后当应用切出/卸载时，将状态回滚至 bootstrap 开始之前的阶段，确保应用对全局状态的污染全部清零。而当应用二次进入时则再恢复至 mount 前的状态的，从而确保应用在 remount 时拥有跟第一次 mount 时一致的全局上下文