项目背景：
公司管理后台项目，项目模块越来越多，项目体积也越来越大，随之而来的是构建速度变慢，不同开发人员容易形成代码冲突。多个模块之间联系并不是很强，却都放在了一起管理。
主要的问题有：
1、历史项目，祖传代码
2、交付压力，当时求快
3、技术栈落后，甚至强行混用多种技术栈....
4、耦合混乱，不敢动，牵一发何止动全身....
关于微前端，用之前总要问下自己，费大劲来整这个，作用是什么呢？
我觉得在管理系统中，重要的一个作用就是可以让你抛弃老的代码的束缚，不用担心对老的代码产生影响，而且可以使用一些新的技术栈。微前端各个应用之间应该是解耦的，各个应用可以独立运行、开发、部署，它可以解构巨石应用，将多个小型前端应用合而为一。
关于微前端，iframe的方案算比较简单的，因为它已经有了天然的沙箱机制，但是也正是因为它的硬隔离机制，它也有一些显著的缺点：
1、主子应用通信问题，状态难以共享（登陆态）
2、url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用
3、慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程
一番考察之后，最后决定采用 qiankun框架来实现。qiankun是基于single-spa这个库来实现的，所以single-spa的功能qiankun都有。qiankun项目分为主应用和子应用，主应用也称为基座，可以接入多个子应用。
在我的项目里，主应用用来控制登陆退出逻辑、菜单展示，header展示、全局loading、全局路由拦截、以及控制哪些子应用需要展示菜单&header。子应用就是处理各个模块具体的业务逻辑。
项目中有vue-cli2.x和vue-cli4.x创建的子项目，我还补充了一个react子项目，效果demo如下：
最终的构建结果:
网友评论