深入了解微前端

前言

前端的发展史相对来说，还是迭代的飞快的，从原始的html+css到后来的javascript，jquery，在到后来的单页面spa应用。正所谓合久必分、分久必合，一些前端应用在自身业务不断迭代的过程中，代码量也会不断的加大，这就给我们带来了一些问题，如git的管理、模块间的发版导致的影响、各业务模块独立性等等。也就衍生出了我们本文中要提到的微前端化的架构。

什么是微前端？

在前些年，后端流行了微服务的概念，它提倡将单一应用程序划分成一组小的服务，服务之间互相协调、互相配合，为用户提供最终价值。

那么什么又是微前端呢，微前端其实与它的概念相吻合，后端讲究的是服务解耦，前端讲究的是应用聚合，把众多的前端应用整合成一个应用，以更好的为客户服务。

微前端的好处

1. 代码隔离，更好的代码管控。在面临大型的前端项目，我们可能把它分成了很多独立的应用模块，借助微前端的结构，我们可以自由的管理不同的应用并把它分配给不同的技术团队，做到代码隔离。
2. 发布独立，开发测试范围缩小。在往常项目中，前端最终都要打包成一个dist的静态文件，在没有拆分微前端的情况下，各前端团队都会借助这一个项目，进行发版，往往都会出现大大小小的问题，只要改动，测试人员就要回归一遍，现在只需要，测试和发布一小块应用的代码。
3. 跨技术栈。各项目团队不用去过于纠结是否需要统一使用vue还是react，范围更广。

微前端设计标准

每个人的项目不同，自然而然设计标准也就不同，但是大多数情况分为以下几种

1. 根据后端的微服务进行拆分，一套前端应用对其一套后端微服务。
2. 根据业务模块拆分，可以交给不同的业务团队。
3. 按照迭代的变更频率拆分，保证系统的稳定性。
4. 按照权限拆封

微前端的实现方式

1. 路由分发式
   即通过http服务器的反向代理功能，将请求路由到对应的应用上，这种方法比较简单，但是也有巨大配置的维护成本。
2. 前端微服务化
   在不同的框架上设计通信和加载机制，以在一个页面上加载对应的应用。
3. 微应用
   通过软件工程的方式，在部署构建环境中，把多个独立的应用组合成一个单体应用
4. 微件化
   开发一个新的构建系统，将部分业务功能构建成一个独立的chunk代码，使用时只需要远程加载即可
5. 前端容器化
   将ifarme作为容器来容纳其他前端应用
   6.应用组件化
   借助于 web component技术，来构建跨框架的前端应用。

微前端框架的推荐

除了路由分发，iframe化设计以外，我们这里推荐几个成熟的微前端框架：

1. 乾坤 点击跳转
2. micro-app点击跳转
3. vue-module-loader点击跳转