项目背景:
公司管理后台项目,项目模块越来越多,项目体积也越来越大,随之而来的是构建速度变慢,不同开发人员容易形成代码冲突。多个模块之间联系并不是很强,却都放在了一起管理。
主要的问题有:
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如下:
最终的构建结果: