# Vue 微前端

前言

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

  • 微前端的好处

    • 应用自治:独立开发、独立测试、独立部署 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新,只需要遵循统一的接口规范或者框架,以便于系统集成到一起,相互之间是不存在依赖关系的
    • 单一职责:每个前端应用可以只关注于自己所需要完成的功能
    • 技术栈无关:主框架不限制接入应用的技术栈,微应用具备完全自主权,你可以使用 Angular 的同时,又可以使用 React 和 Vue。可以尝试新的技术
    • 独立运行时:每个微应用之间状态隔离,运行时状态不共享,无需重新构建即可添加、移除或替换单个前端部分
    • 简单、松耦合的代码库
  • 微前端的缺点

    • 用户体验变差
    • 应用的拆分基础依赖于基础设施的构建,一旦大量应用依赖于同一基础设施,那么维护变成了一个挑战。
    • 拆分的粒度越小,便意味着架构变得复杂、维护成本变高。管理多个版本,复用公共组件等
    • 技术栈一旦多样化,便意味着技术栈混乱。
    • 目前现有微前端方案并不完美

# 微前端方案对比

  • iframe
    • 加载太慢
    • 用户体验太差
    • 完美 js/css 沙箱,无需子应用配合
  • single-spa
    • 没有沙箱
    • 上手成本很高
    • 文档和插件完善
  • 模块联邦
    • 需要 webpack5
    • 没有沙箱
    • 使用场景有限

# 1.singlespa

前言

Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架,参考文档 (opens new window)

  • 1.singlespa在项目中的使用
  • 2.singlespa源码解析

# 2.qiankun

前言

qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统,参考文档 (opens new window)

  • 1.qiankun在项目中的使用
  • 2.qiankun源码解析

微前端的优缺点

  • qiankun

    • 基于 single-spa
    • 有 js/css 沙箱,但沙箱存在缺陷
    • 经过大量项目实践,可参考的案例较多
  • MicroApp

    • 使用简单,子应用改动更少
    • 没有经过大量的项目实践
    • qiankun 有的功能他基本上都有

qiankun + vue 遇到的问题

  • 沙箱导致 vue 性能问题
  • vue-router4 有一些不兼容
  • vite 只能曲线救国
  • css 沙箱不完美

# 3.代码共享

前言

多个项目中处理公共子模块(微前端各个子项目中相同的组件、方法、配置、一些图片、字体静态资源等),一般有三种方案:npm、cdn、git submodule

# 4.nginx 部署

server {
  listen       8080;
  server_name  localhost;


  location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }


  location /app1 {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /app1/index.html;
  }


  location /app2 {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /app2/index.html;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 5.微前端的现状

  • 微前端的方案越来越多,但是微前端缺少一个公共标准

  • 很多公司已经开始尝试微前端,但是体验并不好

  • 微前端的展望:

    • 原生 js 沙箱正在路上:shadowrealm
    • microApp 解决了,qiankun 子应用侵入性强的问题
    • qiankun3 已经在路上