【前端架构】微前端实战

一、遗留系统：路由分发

1. 路由分发式微前端

   • 适用场景

     • 不同技术栈之间差异较大，难以兼容、迁移、改造

     • 项目不想花费大量的时间在这个系统的改造上

     • 现在的系统在未来将会被取代

     • 系统功能已经很完善，基本不会有新需求

   • 基于路由分发的Nginx配置示例

2. 路由分发的测试

   • 单元测试：URL验证

   • 集成测试：URL重定向测试

二、遗留系统微前端：使用iframe作为容器

1. 设计应用管理机制

   • 应用加载、卸载时机

   • 动画过渡

2. 设计应用通信机制

   • 通过iframeEl.contentWindow获取iframe元素的window对象

   • 定义通信规范：事件名格式、何时开始监听事件、何时解绑监听事件

三、微应用化

1. 形式和原理

   • 构建时以单体应用的形式构建

   • 运行时以应用模块的形式存在

   • 原理：从多个项目中复制出代码，合并到一个项目中

2. 架构实施

   • 持续集成设计

     • 子应用代码更新，触发对应模块的持续构建

     • 主应用代码更新，触发整个系统的持续构建

     • 一旦子应用持续构建成功，就会触发整个系统的持续构建

   • 设计占位方式

     • 子应用中指向其他子应用的路由

     • 主应用中的子应用模块

3. 测试策略

   • 依赖一致性测试

     • 比对子应用中package.json的依赖版本

   • 功能模块生成测试

     • 测试复制的模块能否复制到对应的目录上：编写脚本，在持续集成的过程中运行测试脚本，如果没有检测到exit(-1)，则持续集成构建失败

     • 测试生成的模块代码大小是否正常：正常情况下每个chunk.js文件要大于空白的模块；同时在持续集成中运行脚本，并执行exit(-1)

     • E2E测试

四、前端微服务化

1. 微服务化设计方案

   • 基座控制系统

     • 主工程在运行的时候，会去服务器获取最新的应用配置

     • 主工程在获取配置后，将逐一创建应用，并为应用绑定生命周期

     • 当主工程监测到路由变化时，将寻找是否有对应的路由匹配到应用

     • 当匹配到对应的应用时，则加载相应的应用

   • 应用间事件

     • 避免应用间事件名冲突

     • 可以将应用名作为应用内事件前缀

   • 设计路由响应机制

     • 基座应用只负责自己相应的路由，剩下的路由用一个统一的模块来处理，如Angular中的入口模块AppModule

     • 当基座应用的路由发生变化后，会发出对应的路由变化的全局事件

     • 在子应用启动后，它们将监听是否有相应的路由变化

2. 通用型前端微服务化：Single-SPA

   • 基座部分

   • 子应用部分

     • React例子

     • Angular例子

   • 优缺点

     • 优势

       • 能支持大部分主流的前端框架，也能支持传统的前端框架

       • 提供更好的用户体验，即不需要页面跳转，直接在当前页面载入

       • 方便迁移旧的遗留系统

     • 缺陷

       • 系统构建复杂，应用需要集成在一起进行构建

       • 不支持不同应用的部署分离

       • 代码结构复杂

       • 有额外的大量学习成本

3. 定制型前端微服务化：Mooa

   • 主工程部分

     • 初始化微前端框架相关的配置

     • 从远程获取所有子应用的配置

     • 配置所有的子应用

     • 进行主工程和子应用的路由配置

     • 监测路由变化，一旦匹配到对应的路由，则加载对应的应用，并卸载旧的应用

   • 子应用部分

     • 路由更新

     • 适配框架的基准URL

     • 解决依赖冲突

   • iframe隔离

     • 为不同的子应用分配ID

     • 在子应用中进行hook，以通知主应用：子应用已加载

     • 在子应用中创建对应的事件监听，来响应主应用的URL变化事件

     • 在主应用中监听子程序的路由跳转等需求

五、组件化微前端：微件化

1. 运行时编译微件化：动态组件渲染

   • Vue微件化

     • 编写应用容器模板

     • 编写实例化应用脚本

     • 将模板和脚本放置在远程，在需要调用的地方创建与容器id对应的元素，接着运行相应脚本即可

   • Angular微件化

     • 在核心工程中提供微件化所需要的环境

     • 在微件工程里，构建出能运行在核心工程的代码

2. 预编译微件化

   • React微件化

     • 编写统一的API，封装React的根组件

     • 修改构建系统的配置，让其输出可在浏览器上直接运行的版本

     • 加载对应的JavaScript脚本，并调用组件的初始化方法

   • 通过构建工具进行微件化

六、面向未来：Web Components

1. Web Components组成

   1. Customer Elements（自定义元素），允许开发者创建自定义元素

   2. Shadow DOM

   3. HTML Templates

   4. HTML Imports

2. 纯Web Components方式

3. 结合Web Components方式

   1. 在Web Components中集成现有框架

   2. 集成在现有框架中的Web Components

推荐阅读

1. 上篇：【前端架构】微前端架构设计

参考资料

1. 《前端架构：从入门到微前端》

延伸阅读

---

▶ Walkthrough007