本文已参与「新人创作礼」活动,一起开启掘金创作之路。
1、 场景
公司的项目由于一直是在不停的迭代更新,web平台端包含了各端(小程序、平台、大屏等)的配置以及多个大的功能模块,整体逐渐显的臃肿。
为了接下来新的功能迭代和维护,以及项目产品适用更广的用户,项目组讨论后有计划对项目进行拆分或者优化,使其功能流程更清晰明了,迭代更方便,新技术更易适用。
微前端是个不错的选择!
但是,开发都没有接触过微前端,听倒是都有听过。那怎么办呢?自然是从零开始撒。
有兴趣的小伙伴随着我一起去体验qiankun微前端吧!我会把从零学习到项目用qiankun搭建运行,以及过程中遇到的问题都呈现出来!
2、 何为微前端?
微前端(Micro-Frontends)是一种类似于微服务的架构,它将微服务的理念应用于前端,
即将 Web 应用由单一的单页面应用转变为多个小型前端应用聚合为一的应用,
然后各个前端应用还可以独立运行、独立开发、独立部署。
- 组合是应用路由开发
目前的微前端采用的技术方案是组合是应用路由开发。
每个子应用单独的打包,部署和运行。
不过需要基于父应用进行路由管理。
例如:有子应用A的路由是/testA,子应用B的路由是/testB,那么父应用在监听到/testA的时候,
如果此时处于/testB,那么首先会进行一个子应用B的卸载。完成之后,在去加载子应用A。
3、 微前端库--qiankun
qiankun 是目前应用较为广泛的一个微前端库 。
qiankun的优点:
- 简单
无论你是什么技术栈,你用的是什么 js 框架,你都可以使用 qiankun 来把你的子应用接入到你的框架应用中,接入非常简单,就像接入一个 iframe 系统一样。
- 完备
qiankun 基于 single-spa 封装了非常多的能力,把你在构建微前端系统中遇到的一些问题,如样式隔离、沙箱、预加载等等这些你需要的能力全部内置到了 qiankun 里面,所以它是一个比较完备的微前端解决方案。
Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。
末尾
本文简单了解了微前端以及微前端的库,接下去就具体接触qiankun了!回见!