前端架构升级：老项目拆解，根据服务边界拆解成3个项目，通过 qiankun 实现微前端

一体化平台的启动，给前端架构升级提供了一个契机，所谓的天时，地利，人才，现在不开始更待何时。

1. 为什么要进行项目拆解？

原始项目ORIA的前端工程中包含了B、C项目，随着技术更迭、产品升级、新项目启动、人员流动带来的工程上的问题，例如：B项目、C项目无法实现单独部署；B、C项目同时开始需求迭代的时候，两个开发人员开始代码合并简直就是灾难，需要花费大量的时间小心谨慎才能完成进行这项工作。

如果还是延续当前这种开发模式，可以预测到前端工程ORIA将变成一个巨石应用。

2. 项目解构方案探讨

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用后，随之而来的应用不可维护的问题。

提到微前端，第一个想到的肯定是iframe，iframe嵌入网页几乎没有什么改造成本。

2.1 我们的项目为什么不使用iframe？

iframe  是在主应用中嵌入子应用系统，iframe 为子应用提供了一个完美的隔离环境，完美的样式隔离和js 隔离。

iframe 所带来的问题：

  1. iframe拥有独立的window 。独立的浏览器缓存（无法便捷的实现单点登陆。例如：主应用登陆后将token 存储在sessionStorage中，子应用无法直接拿到token。）

           2. 每次子应用的进入都是一次浏览器上下文重建，资源重新加载的过程。

           3. url 不同步，浏览器刷新，iframe url 状态丢失，后退、前进按钮无法使用。

2.2 为什么选用qiankun？

1. 技术栈无关。不论是 React/Vue/Angular/JQuery 还是其他等框架，不同技术栈开发的多个服务能够自由组合成一个应用。也就意味着项目能够包容更多元的人才，人才选择范围更大了。从开发者的角度看，开发人员能够尝试更多的技术解决方案。

2. 主应用与微应用能够独立运行，独立开发。优雅且快速的实现项目的渐进升级。

3. 微应用与主应用之间做到了该隔离的隔离，不该隔离的共用（浏览器缓存可共用）。

  4. 目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。

A、B、C项目基底相同，即两个项目的缓存操作方法相同，vuex store方法相同时，首选采取 qiankun 接入微应用的方式，接入即应用，升级成本最小。由于qinkun 没有隔离浏览器缓存，因此，可以不用考虑子应用的登录问题、菜单栏tab 的操作问题、通过点击 Menus 菜单栏进行系统切换 跨域问题等等。

3. 架构升级的实现方案及关键点解析（部分关键代码剖析）

主应用（A）

        1. 安装 qiankun

npm i qiankun -S

        2. 在主应用中注册微应用的路由

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

        

        3. Vue-router 改造，动态路由注入。

微应用（B）

1. 微应用入口文件 main.js 中注入导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

2. 配置微应用的打包工具

除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：

4. 公共路径配置，很重要，配置不对会导致主应用接入报找不到项目

5. 微应用路由改造