用四个问答让你快速了解微前端

1,331 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情

Hi~,我是一碗周,如果写的文章有幸可以得到你的青睐,万分有幸~

🍐 写在前面

微前端这个词已经出现了很多年了,这个概念类似于后端的微服务,微前端这个概念最早是在16年提出的,微前端并不是一个框架或者工具,而是一整套的架构。

本篇文章将从什么是微前端?解决了什么问题?什么时候需要微前端?该如何落地?

🍇 Q:什么是微前端?

在文章的一开始提了一下微服务,如果是一致在做前端,对微服务肯定是陌生的,不理解微服务一点也不会耽误你理解微前端。

我们这里就以掘金举例(仅仅是举例)

掘金首页.png

上面的图片就是掘金首页,从首页我们可以看到整个稀土掘金应用最少可以拆分为如下几个单独的子应用

  • 首页(文章)
  • 沸点
  • 课程
  • 直播

上面几个模块都可以单独成为一个应用,这些拆分出的子应用完全使用不同的技术栈、独立开发、运行和部署;然后在通过一个主应用,或者说基座应用(或者理解成Layout),然后通过特定的规则将其合并到一起,从而形成现在的稀土掘金,这就是微前端

微前端的核心就是合→拆→合:将一整个应用拆分为多个独立灵活的子应用,然后在进行合并。

这些子应用的的优势就是可以独立开发、独立运行、独立部署

🍈 Q:微前端解决了什么问题?

再说微前端解决了什么问题的时候,先来说一下在开发中会遇到的一些问题:

  • 如果一个项目过大体量过大,需要好几个开发团队怎么破?
  • 如果不同的开发团队技术栈不同怎么破?
  • 每个团队都想独立开发,独立部署怎么破?
  • 如果项目中还保留一个老的项目怎么破?
  • ...

其实上面的这些问题,统统可以使用微前端来解决;微前端就是将一个应用打包成若干个子应用,将这些子应用打包成一个个独立的包,当路径切换时加载不同的子应用。

这样的话每个子应用也就是独立的,技术栈也就不需要进行限制了,从而解决了上述的问题。

🍉 Q:什么时候需要微前端?

如果出现下面这几种情况,可以考虑微前端:

  • 不同的团队合作开发一个项目,想使用自己团队用的熟练的技术栈;
  • 巨石应用的出现,微前端可以很好的解决巨石应用;
  • 子系统有独立部署独立运行的需求;
  • 想体验最新的技术栈,但为了稳定无法尝试时,可以用对某个模块使用最新的技术栈;

🍊 Q:该如何落地?

微前端的落地目前有很多的方法,有最早的single-spa、阿里开源的qiankun、京东开源的MicroApp以及资源的开源的Garfish;除此之外还有很多的方案,这里我就不一一列举了。

如何选择一个微前端框架可以从CSS样式隔离、JS沙箱、应用通信以及性能的角度去考虑和选择。

这里易师傅总结了一篇文章《除了 Qiankun, 这些微前端框架或许更适合你「建议收藏」》可以给大家一个很好的参考。

具体怎么怎么实现每个微前端框架的文档都有非常详细的文档,这里就不过多介绍了。

🍋 写在最后

又水了一篇文章

3E34A980.gif

其实也不是水啦,最近正好寻思在公司推动一下微前端,就有了这篇文章。