微前端

微前端的概念

微前端并不是一个业内普遍接受的概念，更流行的概念是微服务

微前端就是前端微服务的简称

业内的微前端通常会讲 react 和 vue 的混用，但实际中这种情况并不多见

回归本真、书籍推荐

微服务的好处

• 技术异构性（不同模块可以采用不同的技术）
• 弹性（局部模块故障不影响整体）
• 扩展（特殊模块可以单独扩展）
• 简化部署（小改动不需要大测试）
• 与组织架构相匹配（康威定律 ）

微服务的核心思想

高内聚、低耦合

最简单的微前端

独立代码仓库，EN-WEB 实践

拆分仓库并没有那么复杂

拆分独立仓库的弊端

• 管理复杂
• 成本高（每个鲸云实例都代表着费用）

实际案例

更新了一个海报文案，导致课件库无法使用

如何在一个项目仓库中，做好模块的隔离

微前端可以解决什么痛点

功能漏测

假设一个项目中有 A、B、C 三个模块，如果某版本只更新了 C 模块， A、B 模块本来是不需要更新。

但由于 A、B、C 在同一个项目，若更新 C，必然打包整个项目，A、B 也必会被更新，只测 C 模块，就很有可能导致漏测。

如何使功能模块各自独立

前端模块无非就是 js chunks 文件而已

微服务管理系统

http://mfm.test.seewo.com/

微前端架构脚手架

每个文件夹代表一个独立的模块，对应的 JS Chunks

Webpack 5 Module Federation

Webpack 5 Module Federation: JavaScript 架构的变革者