前言
前端的发展史相对来说,还是迭代的飞快的,从原始的html+css到后来的javascript,jquery,在到后来的单页面spa应用。正所谓合久必分、分久必合,一些前端应用在自身业务不断迭代的过程中,代码量也会不断的加大,这就给我们带来了一些问题,如git的管理、模块间的发版导致的影响、各业务模块独立性等等。也就衍生出了我们本文中要提到的微前端化的架构。
什么是微前端?
在前些年,后端流行了微服务的概念,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调、互相配合,为用户提供最终价值。
那么什么又是微前端呢,微前端其实与它的概念相吻合,后端讲究的是服务解耦,前端讲究的是应用聚合,把众多的前端应用整合成一个应用,以更好的为客户服务。
微前端的好处
- 代码隔离,更好的代码管控。在面临大型的前端项目,我们可能把它分成了很多独立的应用模块,借助微前端的结构,我们可以自由的管理不同的应用并把它分配给不同的技术团队,做到代码隔离。
- 发布独立,开发测试范围缩小。在往常项目中,前端最终都要打包成一个dist的静态文件,在没有拆分微前端的情况下,各前端团队都会借助这一个项目,进行发版,往往都会出现大大小小的问题,只要改动,测试人员就要回归一遍,现在只需要,测试和发布一小块应用的代码。
- 跨技术栈。各项目团队不用去过于纠结是否需要统一使用vue还是react,范围更广。
微前端设计标准
每个人的项目不同,自然而然设计标准也就不同,但是大多数情况分为以下几种
- 根据后端的微服务进行拆分,一套前端应用对其一套后端微服务。
- 根据业务模块拆分,可以交给不同的业务团队。
- 按照迭代的变更频率拆分,保证系统的稳定性。
- 按照权限拆封
微前端的实现方式
- 路由分发式
即通过http服务器的反向代理功能,将请求路由到对应的应用上,这种方法比较简单,但是也有巨大配置的维护成本。 - 前端微服务化
在不同的框架上设计通信和加载机制,以在一个页面上加载对应的应用。 - 微应用
通过软件工程的方式,在部署构建环境中,把多个独立的应用组合成一个单体应用 - 微件化
开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可 - 前端容器化
将ifarme作为容器来容纳其他前端应用
6.应用组件化
借助于 web component技术,来构建跨框架的前端应用。
微前端框架的推荐
除了路由分发,iframe化设计以外,我们这里推荐几个成熟的微前端框架: