# 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
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 已经在路上