微前端的概念

## 微前端的概念

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。 微前端的核心在于  `如何拆` 和 `拆完后如何合`

前端架构--从入门到微前端

- 1.和业务关系不大、相同部分如何抽离+维护？

- 2.业务相关的内容，相同部分如何抽离+维护？

**当业务关系不大，可以从组件库重手：**

- 第一阶段：从项目中抽离了组件库和图表库（两个独立工程、项目中通过 git subtree引用）

- 第二阶段：对 charts、components 按照组件思路进行改造（merge + extend + template）

- 第三阶段：建立 Demo 站，为 charts、components 提供开发和展示环境（无特殊诉求无需查看源码）

- 第四阶段：抽离 charts、components 共同的 utils（独立仓库 git subtree 引用）

- 第五阶段：通过 yarn workspace 来处理公共依赖（关键点）

- 第六阶段：解决 charts、components、utils 多仓提交的问题（monorepo）

对于业务相关内容：

可以用微前端

### 微前端的优势

- 技术栈无关

- 主框架不限制介入应用的技术栈，微应用具备完全自主权

- 独立开发、独立部署

- 增量升级

- 微前端是一种非常好的实现渐进式重构的手段和策略

- 微应用仓库独立，前后端可独立开发，主框架自动完成同步更新

- 独立运行

- 每个微应用之间状态隔离，运行时状态不共享

### 劣势

- 接入难度较高

- 应用场景移动端少，管理端多

微前端的演变：

- 1.iframe方案

- 2.single-spa方案

# iframe方案

对于iframe方案，其实就是通过iframe标签在一个页面里嵌套了另一个页面，不过它有一定的弊端：

- 路由限制：在iframe内的页面里切换路由后，无法跟随浏览器进行前进后退

- 资源加载：每次iframe的页面都需要重新加载

- 资源共享：与外层的父组件隔离，无法实现状态共享

- dom结构不共享：iframe里的全局modal框也是显示在iframe里

# single-spa

single-spa方案解决了iframe方案的弊端。

[single-spa官网](https://link.juejin.cn?target=https%3A%2F%2Fsingle-spa.js.org%2F)