微前端了解

概念

将前端应用分解成一些更小、更简单的，能够独立开发、测试、部署的小块，并明确他们之前的依赖关系。

特点

关键优势在于：

1. 代码仓库更小，更内聚，可维护性更高，独立部署；

独立部署使每个微前端都有自己持续交付的流水线（包括构建、测试、部署等）能够缩小变更范围，进而降低相关风险。

2. 在松耦合、自治的团队可扩展性更好；

代码库及周期解耦之外，微前端还有助于行程完全独立的团队。以功能块划分有时候会更高效，促使开发者明确数据和事件在应用程序中的流向问题。

3. 渐进地升级、更新甚至重写部分前端成为了可能

理想的代码自然是模块清晰、依赖明确、易于扩展、便于维护的，但是时间过程中总是会存在各式各样的原因导致不那么理想的代码，意于重构但总是很难有充裕的能力去大刀阔斧地一步到位的，在逐步重构的同时，既要能平缓过渡中间版本，又要持续交付新特性。故需要一种增量升级的能力，新旧和谐共存，再逐步转换。

实现方案

1. 多 bundle 集成
   微前端架构中一般会有一个容器应用将各个子应用集成起来：
   - 渲染公共页面元素，比如header、footer等；
   - 解决横切关注点，如身份验证和导航；
   - 将各个微应用集合为一个页面，并且控制前端的渲染区域和时机；

2. 服务端集成
   保证各个模块能够独立发布，必要情况下，可以每个子服务负责渲染并服务于对应的微前端，主服务向各个子服务发起请求；

3. 构建时集成
   不推荐，易于造成发布阶段耦合。

4. 运行时集成
   iframe、js（如前端路由）、Web Components

5. 影响隔离
   - 样式隔离：开发规范、css预处理、模块定义等
   - 作用域隔离：各个模块定义

6. 资源复用
   资源复用对UI一致性和代码复用有重要意义。主要分成3类：
   - 基础资源：完全不含逻辑的功能图标、标签、按钮等；
   - UI组件：含有一定UI逻辑的搜索框、表格等；
   - 业务组件：含有业务逻辑

7. 应用间通信
   通过自定义事件间接通信是一种避免直接耦合的常用方式。另外，路由参数除了用于分享、书签等场景外，也可以作为一种通信手段。

8. 测试
   每个子应用都应该有自己的全套测试方案：

   • 集成测试：保证子应用间集成的正确性，比如跨子应用的交互操作
   • 功能测试：保证页面组装的正确性
   • 单元测试：保证底层业务逻辑和渲染逻辑的正确性

   自下而上形成一个金字塔结构，每一层只需验证在其下层覆盖不到的部分即可

缺点

• 依赖、公共资源的冗余，增加用户的流量负担
• 团队自治程度增加，可能会破坏协作

参考自：https://juejin.cn/post/6955341801381167112