微前端是什么?
微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆.拆完后在合!
它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用。这样每个小型应用都是独立的,技术栈也不用做限制了! 从而解决了前端协同开发问题。
微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更简单。
为什么要使用微前端(能解决什么问题)?
- 解决不同团队开发同一个应用时技术栈不同的问题
- 解决团队间独立开发、独立部署的问题
- 实现增量迁移(老代码不动,不更改老项目,实现新的功能模块)
- 解决应用在长时间下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后不便维护、迭代的问题
怎么实现微前端?
1、iframe 实现微前端
iframe 最大的特性就是提供了浏览器原生的硬隔离方案与微前端概念中提到的独立开发、独立维护、相互隔离非常的吻合。但是现在iframe依然不是微前端主要的实现方式呢,在qiankun技术圆桌
中一篇关于微前端Why Not Iframe文中总结很到位:
iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题。
2、Single-SPA 实现微前端
2018年诞生了Single-SPA ,Single-SPA 是一个用于前端微服务化的JavaScript前端解决方案(本身没有处理样式隔离、js执行隔离)实现了路由劫持和应用加载。
3、qiankun 实现微前端
2019年qiankun 基于Single-SPA,解决了 Single-SPA 本身没有处理的 JS沙盒环境(样式隔离、js执行隔离)。提供了更加开箱即用的API( single-spa + sandbox + import-html-entry ),做到了技术栈无关,且接入简单。
qiankun入门
4、EMP 实现微前端
2020年 EMP 基于module Federation,接入成本低,解决第三方依赖包问题。