微前端解决了哪些业务问题?

为啥需要微前端我曾经给旺旺做外包,那时候做过的一个后台项目是自己第一个微前端项目。那时候很多微前端技术栈还不成熟,所以使用iframe方案。

管理后台型类型的项目,这类项目往往页面重复率高。有很多公司为了降本增效,有采用过低代码(在开发周期紧张的项目中,低代码可以有效的解决开发人力不足的问题)的方式进行过快速开发,很多低代码页面可能都存在开发和性能优化瓶颈,但是因为量大使用没办法短时间重构,于是在服务端不变的情况下,一个低代码需求就催生出来了。

微前端具有啥特性?

  1. 技术栈无关性:可以使用多类技术栈,Vue、React 或 Angular甚至JQ。

  2. 独立开发和部署:各个子应用可以独立进行开发、测试和部署,减少了相互之间的依赖和干扰,提高了开发效率和迭代速度。

  3. 低耦合:将大型前端应用拆分成多个相对独立的小应用,降低了整体的复杂度,使得每个子应用的功能更加聚焦和易于维护。

  4. 快速实现:一般服务端只需要进行极少的改动即可支持新项目。

  5. 团队自治:不同的团队可以负责各自的子应用,实现团队之间的自治和分工协作。

  6. 共享资源:在一定程度上可以共享一些通用的资源。(参考Monorepo技术方案,与我的另一篇博客 -> Monorepo-rush的入门操作)。

可以看出,微前端可以降低大型项目的开发、升级、维护以及团队协作的成本。也可以解决历史遗留的难以开发、升级和维护的大型应用,也是使用微前端的一个重要原因。

微前端有哪些方案?

在实际开发项目的过程中,如果项目本身采用 SPA 模式进行开发,则可以通过以下方案进行微前端改造:

  • 基于框架(JavaScript SDK)的微前端:使用 single-spaqiankunwujie 等通用框架。

  • 基于 iframe 的微前端:在主应用中使用 iframe 标签来加载不同的微应用;

  • 其他解决方案,原理也都是在运行时动态加载不同的微应用,八仙过海,各显神通。

如果是MPA模式更简单,部署服务后,在主应用中通过服务端的路由来请求和渲染不同的微应用就好了。

实现微前端需要啥?

  1. JS代码隔离,防止JS代码冲突,所以需要隔离。探索

  2. css代码隔离,防止样式冲突。探索

  3. 通信,子应用跟父应用要有通信的方案。探索

Iframe方案

为什么先讲Iframe,因为我第一个微前端项目就是Iframe,比较熟悉。而且iframe 最常用且超级稳定的微前端设计方案之一。

优点

  1. 兼容性,而众所周知,iframe是原生HTML标签,能加载其他web应用的内容,并且它能兼容所有的浏览器,因此,你可以用它来加载任何你想要加载的web应用。

  2. 硬隔离,不论是样式隔离、js 隔离这类问题统统都能被完美解决。

缺点:

  1. 硬隔离,过于强大的硬隔离导致应用间上下文无法被共享,随之带来开发体验、产品体验的问题(弹框类的功能无法应用到整个大应用中)。

  2. 速度,每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程,速度堪忧。

  3. 不是单页应用,会导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

  4. 搜索引擎无法读取其中的内容,自然也与SQO优化无缘

其他方案

NPM(ESM)/动态加载script/Web Components

未曾清贫难成人,不经打击老天真。 自古英雄出炼狱,从来富贵入凡尘。 醉生梦死谁成气,拓马长枪定乾坤。 挥军千里山河在,立名扬威传后人。