随着软件行业的快速发展,软件变得更加多元化,相应的项目也随之变得复杂起来,如何缩短页面反应时间,成为了一个技术方案难题,微前端设计思路的出现使得这个难题在一定程度上得以解决。
微前端的概念:微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。简单说就是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,而在用户看来仍然是内聚的单个产品。
微前端优点:
-
技术栈无关 主框架不限制接入应用的技术栈,子应用可自主选择技术栈
-
独立开发/部署 各个团队之间仓库独立,单独部署,互不依赖
-
增量升级 当一个应用庞大之后,技术升级或重构相当麻烦,而微应用具备渐进式升级的特性
-
独立运行时 微应用之间运行时互不依赖,有独立的状态管理
-
提升效率 应用越庞大,越难以维护,协作效率越低下。微应用可以很好拆分,提升效率
微前端缺点:
-
应用的拆分基础依赖于基础设施的构建,一旦大量应用依赖于同一基础设施,那么后续的维护工作就成了一个挑战
-
子应用拆分的粒度越小,便意味着架构会变得复杂、维护成本变高
-
技术栈一旦多样化,便意味着技术栈混乱
-
上线部署文档较少
现在常用的微前端方案有iframe、qiankun等;每个方案也都有自己的优点和缺点;
iframe的优缺点:
优点:
- 非常简单,无需任何改造
- 完美隔离,JS、CSS 都是独立的运行环境
- 不限制使用,页面上可以放多个 iframe 来组合业务
缺点:
-
无法保持路由状态,刷新后路由状态就丢失
-
完全的隔离导致与子应用的交互变得极其困难,只能采用postMessage方式
-
iframe 中的弹窗无法突破其本身
-
整个应用全量资源加载,加载太慢
qiankun的优缺点:
优点:
-
基于single-spa 封装,提供了更加开箱即用的 API
-
HTML Entry 接入方式,接入微应用像使用 iframe 一样简单
-
样式隔离,确保微应用之间样式互相不干扰
-
JS 沙箱,确保微应用之间 全局变量/事件 不冲突
-
资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度
缺点:
-
只能解决子项目之间的样式相互污染,不能解决子项目的样式污染主项目的样式
-
上线部署文档较少
-
不支持Vite
前端微应用与后端微服务的最大不同之处----生命周期。微前端应用作为一个客户端应用,每个应用都拥有自己的生命周期:
-
Load,决定加载哪个应用,并绑定生命周期bootstrap,获取静态资源
-
Mount,安装应用,如创建 DOM 节点
-
Unload,删除应用的生命周期Unmount,卸载应用,如删除 DOM 节点、取消事件绑定
在合适的生命周期做合适的事情,也是在使用微前端应用时需要特别注意的地方,毕竟每个前端框架各自不同,所需的加载方式也是各有千秋。每个项目都有自己的独特性,愿大家都可以找到合适自己项目的解决方案。