适用于既有大型MPA项目的“微前端”方案

{
  "title": "有赞微商城",
  "template": "
",
  "bodyClass": "blue-thme",
  "scripts": "yzcdn.com/routeA/base.js, yzcdn.com/routeA/pageA.js",
  "styles": "yzcdn.com/routeA/base.css, yzcdn.com/routeA/pageA.css",
}

），会导致结构错乱，原因可能是 DOMParser 在解析div时默认其是存在结束标签的。解决方案是在获取到 html-entry 后，先进行一次全局的替换，补充结束标签。使用如下的正则简单处理即可，基本不会影响解析性能。

html = html.replace(/]*)\/>/, '');

基座改造 RouteMonitor & PageLoader

整个单页容器的部分我们封装成了 ZanSpa 模块，对外仅提供 init(options) 的方法，支持一系列的自定义行为和生命周期钩子。

ZanSpa 启动时，会实例化内部的两个核心模块 RouteMonitor 和 PageLoader 。 RouteMonitor 负责路由切换的监听，决定什么时候应该切换子页面。 PageLoader 负责在路由切换时，加载并解析相应的子页面，并处理子页面间的副作用和生命周期的更替。

RouteMonitor

该模块的作用是拦截可能修改当前路由的事件及行为，并判断路由的改变是否需要出发子页面的更新。

1、监听全局点击事件，判断如果要走子页面的更新逻辑，则拦截后调用 PageLoader 进行更新。这里需要注意的是如果同时按住 cmd 、 ctrl 或者 shift 键的点击会打开新 tab ，需要保持原有行为。

每次点击后会通过 validateUrlChange 方法判断路由的变更是否需要按照子页面形式进行切换。该方法会解析判断新老的 url（ sourceUrl 和 destUrl ），判断两者是否相同（除 hash 外）。

1. pathname是否相同
2. 是否都存在hash
3. sourceUrl 有 hash 而 distUrl 没有 hash

!!! 前方踩坑警告

第 3 点需要特别注意，对于 hash 的变更，理论上我们是不应该干预的，避免影响 react-route 之类的基于 hash 实现的单页和浏览器的默认 hash 跳转行为。但对于 pathname 相同的 url 间跳转时，如果 sourceUrl 有 hash ，而 destUrl 没有 hash 的情况，是需要进行劫持的，否则浏览器的默认行为就是页面的重载，

2、拦截原生 history 变更

• 监听全局 popstate 事件，并在 state 统一返回页面url，方便浏览器前进后退时通过 url 获取相应的子页面。

const globalHistory = window.history;

window.addEventListener('popstate', () => {  
  const url = window.location.href;
  globalHistory.replaceState({ url }, '', url);
});

• 劫持 history 的 pushState 和 replaceState 方法，然后从 state 中获取 url ，调用 PageLoader.loadPagesOfUrl 进行子页面的更新。

3、提供统一的跳转方法 ZanSpa.navigateTo(urlOrEvent) 。由于 window.location 为native对象，无法被劫持，所以子页面通过 window.location.href = '/routeB/pageC' 进行跳转的地方需要使用该方法进行替换。 ZanSpa.navigateTo(urlOrEvent) 的实现也很简单，基于 window.history.pushState API，支持 MouseEvent 类型的参数，可以直接作为 a 标签的点击事件的回调。

PageLoader

PageLoader主要负责子页面资源的获取、解析和生命周期管理，对外提供 ZanSpa.registerPage() 进行页面注册。子页面通过该API声明子页面的路由匹配规则，挂载和卸载逻辑。

ZanSpa.registerPage() 的参数定义如下：

export interface IMicroPageProps {  
  /**
   * 页面注册name，为避免重复，**推荐按照biz-feature-page的形式命名
   */
  name: string;
  /**
   * 没有特别逻辑可以不传。声明路由匹配规则，可以使用字符串、正则表达式或函数；
   */
  activeRoute: string | RegExp | ((url: string) => boolean);
  /**
   * 页面初始化生命周期回调
   */
  bootstrap?: LifecycleCallback;
  /**
   * 页面挂载时的生命周期回调。如果使用的是react，这里可以使用ReactDOM.render进行根节点渲染。
   */
  mount: LifecycleCallback;
  /**
   * 页面卸载时的生命周期回调。如果使用的是react，这里可以使用unmountComponentAtNode进行react组件的清理。
   */
  unmount: LifecycleCallback;
  /**
   * 自定义参数
   */
  customProps?: any;
}

下面是 PageLoader 的页面更新流程：

1、请求子页面资源

在 RouteMonitor 监听到跳转行为或外部通过 ZanSpa.navigateTo 进行跳转后，如果 RouteMonitor 认为此次路由变更需要页面更新，则会调用 PageLoader 的 loadPageOfUrl 进行加载，并显示页面加载的 Loading 。

我们这里没有引入中心化的 路由-子页面 配置管理，因为现有的统一接入层已处理了类似的逻辑，对于到来的请求，根据其路由特征转发到对应的 node 服务，由 node 服务再根据内部路由规则返回相应的资源。所以 PageLoader 在处理新的路由请求时，需要通过 loadPageOfUrl 拼接特殊参数后将请求发出，node 端收到页面请求包含该参数时即返回子页面模板实例化后的 html-entry 。

2、子页面资源解析&diff更新

在成功获取 html-entry 后， PageLoader 会通过上述的 DOMParser 将其解析为一个 document 对象（与全局document对象类似），内部再进一步解析出其 entry 中包含的样式、脚本、模板资源，分别由相应的方法进行 diff 更新。

• 样式和脚本：具体的 diff 规则也很简单，对于 link 标签就判断 href 属性，对于 script 标签就判断 src 属性，内联的样式和脚本不做 diff 。然后按照约定样式插入到挂载节点的顶部，脚本则插入到挂载节点的尾部。
• 模板：模板则根据 ZanSpa 初始化时传入的容器节点 ID，清空容器节点后填充进新的模板。

3、子页面注册

在上一步中，资源解析并且 diff 更新后，样式、脚本和模板加载完成。随着业务 chunks 脚本执行，此时就会触发业务页面入口处调用的 ZanSpa.registerPage(pageInfo) ，子页面的自动注册完成。所以我们子页面的配置收集是动态完成的，不需要集中式统一维护子页面配置，只需由子页面各自进行维护， html-entry 加载完成同时也加载了子页面配置信息。但同时因为加载前不知道子页面的具体信息，目前还无法做到指定子页面的预加载。

为了减少业务接入成本时，调用 registerPage 时的 activeRoute 参数默认会使用页面加载时的 pathname 。该参数支持 string 、正则表达式和函数三种类型。如果子页面中存在冲突的，可以自定义 activeRoute 来解决。注册完成后，将子页面信息存入 microPages 数组，以方便之后的生命周期更新。

4、生命周期管理

子页面资源加载并且更新完成后，同时新的子页面通过 registerPage 已完成注册。此时就需要根据各个子页面的 activeRoute 进行生命周期的更新了。这个过程核心代码如下，这里所有的资源加载和生命周期会被包装成 Promise ，以便于异步的处理，也可根据需要直接使用 async/await 。

this._unmountPages()  
  .then(() => {
    // bootstrap
    return this._bootstrapPage(pageResouce);
  })
  .then(() => {
    // mount
    return this._mountPages();
  });
})

• unmountPages ：该方法会遍历所有目前已注册的子页面，判断其是否应该被卸载，然后调用其声明的 unmount 方法进行卸载。

• mountPages ：旧的不去，新的不来。当旧页面被卸载后，此时按照类似的逻辑，找出需要被挂载的子页面，并行的调用其 mount 生命周期回调。挂载的过程一旦出错，会暂时将该子页面状态设置为 PageStatus.Mounted ，然后尝试将其卸载。

• 副作用处理：页面在通过 registerPage 注册时，会对其生命周期进行包裹，以便于在其 mount 时启动全局事件和定时器的收集，并在其卸载时清理收集到的全局事件监听器和定时器。这个方案并不是完整的沙箱，目前不支持window变量的收集与恢复。

• 开发调试信息： RouteMonitor 和 PageLoader 中记录了页面各阶段加载耗时，资源复用情况，全局事件和定时器清理统计及内存占用情况（开发环境）。考虑到单页化改造后，难免有一定的内存泄漏，再内存占比达到一定阈值时，在页面跳转时强制进行整页刷新。该特性通过 performance.memory API 实现，浏览器兼容性较差，仅作辅助使用。

  

其他坑

全局组件清理

对于不在容器节点内的全局组件如 Notify 和 Dialog ，子页面 unmount 时也需要自动清理。即使在确定这些组件是React组件和挂载节点的情况下，由于基座和子页面React实例隔离，基座内的 unmountComponentAtNode 并不能彻底清理这些组件实例。我们的解决办法是，业务应用在 registerPage 时，在 customProps 中的 unmountComponent 回传业务方卸载方法，例如 React 就是 unmountComponentAtNode ，然后在 ZanSpa 的 beforeUnmount 钩子中处理需要清理的组件，这个可以视具体技术栈和组件库而定。

子页面间通信

我们子页面间通信的场景较少，目前采用的是自定义事件，并以 zan-spa: 作为统一的事件前缀。

pushState跨域问题

需要注意业务内有没有跨域的链接存在，如果跳转时是一个跨域的 url ， pushState 的调用会出现安全错误， SecurityError: Failed to execute 'pushState' on 'History' ，导致整个流程停止，用户点击后无反应。我们的 ZanSpa 提供了 beforeLoad 的钩子，其中可以处理不允许走单页加载的情况。 RouteMonitor 在跳转前会调用该钩子，如果其返回false，则通过 window.location.href 打开该链接不走单页模式。

MPA模式下，开发者其实无需考虑很多副作用，如全局事件监听器和轮询的定时器，都会随着页面刷新烟消云散。但进入到微前端的 SPA 时代后，虽然基座本身也会处理子页面的副作用，但仍需要业务页面的开发者随时保持 我注册，我清理 的意识，不留隐患。

灰度控制规则

由于上线后影响面较大（每个页面），也要支持各个业务应用的分开接入，所以在灰度和开关控制上我们也考虑了很多，以支持一旦发现线上有意料外的 “feature”，可以精确的控制某个店铺或者页面是否开启。由于逻辑也比较复杂，这里就不展开了，感兴趣的可以私下沟通。

基座更新策略

由于基座承担着管理子页面的职责，并且在子页面更新时并不会更新，如果我们修改了基座的代码，怎么实现基座的更新呢？这里我们利用现有的打包流程，会将当前的基座资源版本信息在基座已有的配置信息接口中返回。该接口中还包含了导航菜单和权限的最新数据，这个接口会在每次子页面切换后更新（5秒的 debounce 处理），再下次子页面切换时，如果发现基座版本已落后，则强制走 MPA 模式加载。

快速连击的防御

单页化后，用户的每次跳转由浏览器处理变成了 ZanSpa 处理，而其中 PageLoader 对子页面的 bootstrap （资源diff后的更新）过程是不适宜被中断的，所以考虑到稳定性的问题，在用户点击跳转时，需要确认是否有页面正出于 bootstrap 状态，如果有则需要拦截并进行提示。

效果展示

页面切换速度提高明显，而且对于基座本身依赖的一些接口请求（仅限时效性要求不高的接口），在单页化后基本只需访问一次，大大地件减少了基座依赖接口的后端压力。

下面是改造前后的对比图，测试前已清除缓存。在页面静态资源已缓存的情况下，速度的差异较小，但相对于多页切换时的整页白屏，改造后的体验要好很多。

改造前：

改造后：

四、待完成的事项

如果要作为完整的微前端方案，还有不少的事情要做，这是接下来的一些计划，欢迎有兴趣的有赞同学来提想法和添砖加瓦~

config-entry

以下是个人微信，方便交流。

欢迎关注我们的公众号