导读：”微前端”这个词现在对前端同学来说已经比较熟悉了，各种方案也已经落地开花，比较主流如single-spa、乾坤，后来的也有webpack模块联邦。爱番番团队在项目初期后端微服务化的过程中，前端也落地了自己的微前端方案，更好的服务于敏捷开发，提升交付效率。
全文字，预计阅读时间10分钟。
一、背景
爱番番团队后端使用微服务架构，实现敏捷开发和部署。为配合微服务架构模式，前端需要对原有的web端单体项目进行拆分，每个微服务对应部分的前端需要有独立的代码库，能够独立开发、测试、部署、上线，实现团队自治；同时在用户感知层面，各个前端模块是一个整体，一个统一的系统，有相同的页面风格和交互风格。
二、初步方案
鉴于以往的项目经验，我们在运行时整合多个前端应用为一个统一的应用时多采用的是iframe的方案，但iframe方案有这些问题：
切换速度慢，影响用户体验
页面内部弹窗不能覆盖整个应用窗口，用户体验差
应用之间通信复杂
以上这些问题极大降低用户体验，是我们不能采用的。我们希望拆分了代码库之后也能保证如下这些体验：
在用户感知上，系统和之前的单体应用一样流畅
保持之前的交互风格
开发人员开发时，也能像之前开发单页应用一样方便
从单页应用的按路由拆分代码方式产生的另一个方案：
在做单页应用的性能优化时，一般都会使用按路由拆分代码的方式。用户访问一个单页应用时，并不加载全部内容，只加载必要的前置依赖，然后跟进当前页面路由异步加载路由对应js和css，异步渲染页面，提升访问性能。
沿着这个思路，结合iframe方案中统一入口的方式，我们的思路是，拆分的独立应用是页面路由对应js和css的一个集合，再有一个统一入口的应用保存所有菜单，用户点击菜单时，异步加载对应的应用中的页面路由代码，渲染对应页面。
三、需要解决的问题
3.1路由解析
主工程负责存储和渲染所有菜单，负责作为一个页面渲染的容器，同时负责前端路由的解析。主工程需要通过路由解析找出对应的子工程和对应的子工程的页面，得到页面资源地址，加载页面资源，渲染页面。
上述功能正是一个前端路由要做的事情，我们直接使用技术栈中已有的前端路由插件，并进行改造。
路由规则：
例如：访问/s1/aa=加载