微前端学习摘要（3 day）

[sqliang]

介绍

前面总结了微前端常用的集成方式，以及微前端和单体前端在路由分发阶段的区别。
本次继续总结微前端如何聚合不同应用，以及怎么做到路由分发加载不同应用的组件。

js 集成方式聚合与路由机制分析

js 集成方式中有一个比较好的实践案例：美团的使用微前端的方式搭建类单页应用-HR系统。详细参考：https://tech.meituan.com/2018/09/06/fe-tiny-spa.html

• 一个前端入口项目（容器）对应多个业务前端子项目
• 多个前端项目对应多个后端服务

• 对于登录认证这样公用的功能，前端由入口项目来实现；服务由统一的SSO服务来实现，每个子业务服务也统一调用SSO服务

• 前端入口项目（容器）提供应用注册和路由注册

应用注册与路由注册机制总结

应用注册即需要聚合的子项目需要进行注册，并独立部署自己的js、css、image等静态资源。这些并不独特，也不是关键配置。真的的关键配置路由注册。其原理主要是：

• 通过配置的方式使前端子项目的code、path和component注册到 window.app.routes中：

import reducers from './redux/kaoqin-reducer';
let app = window.app = window.app || {}; 
app.routes = (app.routes || []).concat([
{
  code:'attendance-record',	
  path: '/attendance-record',
  component: wrapper(() => async(require('./nodes/attendance-record'), 'kaoqin')),
  // ... 其他路由
}]);
 
function wrapper(loadComponent) {
  let React = null;
  let Component = null;
  let Wrapped = props => (
    <div className="namespace-kaoqin">
      <Component {...props} />
    </div>
  );
  return async () => {
    await window.app.init('namespace-kaoqin',reducers);
    React = require('react');
    Component = await loadComponent();
    return Wrapped;
  };
}

• 入口项目从 window.app.routes中获取合并的路由信息，路由合并的同时也把具体的功能做了引用关联，再到构建时就可以把所有的功能与路由管理起来。

分析与总结

以上描述的路由注册与分发机制从实践层面来说简单易于执行，特别适用于子项目之间特别独立的场景。
即使出现了子项目之间有数据通信的情况，也可以借助路由参数由路由分发机制来互传通信数据。也是大部分团队在初步实践中采用的一种方案，但其局限性也是很明显的：

• 适用场景有限，只提供了子项目做简单通信的可能，若是通信机制复杂的场景需求到来，很难聚合进来
• 虽然子项目做到了微前端的单独开发、构建、测试与部署的目标，也能管理其内部的数据。但入口项目的聚合能力基本靠约定好的规则进行人工配置，在聚合能力与加载能力方面有提高的空间。

正是因为有进一步提高的空间，目前业界也出现了mooa、qiankun等框架的解决方案，在js集成方式的基础上，借助web-component来做到减少全局变量依赖，并在路由机制、加载机制以及通信机制方面做了优化，使入口项目能更高效地聚合不同的子项目。从而达到微前端的适用场景更多一些。