微前端介绍

微前端介绍

微前端定义

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
简单的说：微前端就是在一个Web应用中独立运行其他的Web应用。

微前端特点

1. 技术栈无关：主框架不限制接入应用的技术栈，微应用具备完全自主权；
2. 独立开发、独立部署：微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新；
3. 增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略；
4. 独立运行时：每个微应用之间状态隔离，运行时状态不共享；
5. 环境隔离：应用之间 JavaScript、CSS 隔离避免互相影响；
6. 消息通信：统一的通信方式，降低使用通信的成本；
7. 依赖复用：解决依赖、公共逻辑需要重复维护的问题；

微前端常见框架

路由分发式微前端

路由分发式微前端，即通过路由将不同的业务分发到不同的独立前端应用上。最常用的方案是通过 HTTP 服务的反向代理来实现。

下面是一个基于路由分发的 Nginx 配置：

 http {
   
        server {
   
            listen 80;
            server_name  xxx.xxx.com;
            location /api/ {
   
                proxy_pass http://localhost:3001/api;
            }
            location /web/admin 

 - List item

{
   
                proxy_pass http://localhost:3002/api;
            }
            location / {
   
                proxy_pass /;
            }
        }
    }

优点：

• 实现简单；
• 不需要对现有应用进行改造；
• 完全技术栈无关；

缺点：

• 用户体验不好，每次切换应用时，浏览器都需要重新加载页面；
• 多个子应用无法并存；
• 局限性比较大；
• 子应用之间的通信比较困难；
• 子应用切换时需要重新登录；

iframe

iframe 作为一项非常古老的技术，也可以用于实现微前端。通过 iframe，我们可以很方便的将一个应用嵌入到另一个应用中，而且两个应用之间的 css 和 javascript 是相互隔离的，不会互相干扰。
优点：

实现简单；

• css 和 js 天然隔离，互不干扰；
• 完全技术栈无关；
• 多个子应用可以并存；
• 不需要对现有应用进行改造；

缺点：

• 用户体验不好，每次切换应用时，浏览器需要重新加载页面；
• UI 不同步，DOM 结构不共享；
• 全局上下文完全隔离，内存变量不共享，子应用之间通信、数据同步过程比较复杂；
• 对 SEO 不友好；
• 子应用切换时可能需要重新登录，体验不好；

single-spa

single-spa 提供了新的技术方案，可以帮忙我们实现类似单页应用的体验。

在 single-spa 方案中，应用被分为两类：基座应用和子应用。其中，