一、遗留系统：路由分发
- 路由分发式微前端
- 适用场景
- 不同技术栈之间差异较大，难以兼容、迁移、改造
- 项目不想花费大量的时间在这个系统的改造上
- 现在的系统在未来将会被取代
- 系统功能已经很完善，基本不会有新需求
- 基于路由分发的Nginx配置示例
http { server { listen 80; server_name www.demo.com; location /api/ { proxy_pass http://www.test1.com/api; } location /web/admin { proxy_pass http://www.test2.com/web/admin; } location /web/notifications { proxy_pass http://www.test3.com/web/notifications; } location / { proxy_pass /; } }}路由分发的测试
- 单元测试：URL验证
- 集成测试：URL重定向测试
二、遗留系统微前端：使用iframe作为容器
- 设计应用管理机制
- 应用加载、卸载时机
- 动画过渡
- 设计应用通信机制
- 通过iframeEl.contentWindow获取iframe元素的window对象
- 定义通信规范：事件名格式、何时开始监听事件、何时解绑监听事件
三、微应用化
- 形式和原理
- 构建时以单体应用的形式构建
- 运行时以应用模块的形式存在
- 原理：从多个项目中复制出代码，合并到一个项目中
- 架构实施
- 持续集成设计
- 子应用代码更新，触发对应模块的持续构建
- 主应用代码更新，触发整个系统的持续构建
- 一旦子应用持续构建成功，就会触发整个系统的持续构建
- 设计占位方式
- 子应用中指向其他子应用的路由
- 主应用中的子应用模块
- 测试策略
- 依赖一致性测试
- 比对子应用中package.json的依赖版本
- 功能模块生成测试
- 测试复制的模块能否复制到对应的目录上：编写脚本，在持续集成的过程中运行测试脚本，如果没有检测到exit(-1)，则持续集成构建失败
- 测试生成的模块代码大小是否正常：正常情况下每个chunk.js文件要大于空白的模块；同时在持续集成中运行脚本，并执行exit(-1)
- E2E测试
四、前端微服务化
- 微服务化设计方案
- 基座控制系统
- 主工程在运行的时候，会去服务器获取最新的应用配置
- 主工程在获取配置后，将逐一创建应用，并为应用绑定生命周期
- 当主工程监测到路由变化时，将寻找是否有对应的路由匹配到应用
- 当匹配到对应的应用时，则加载相应的应用
- 应用间事件
- 避免应用间事件名冲突
- 可以将应用名作为应用内事件前缀
- 设计路由响应机制
- 基座应用只负责自己相应的路由，剩下的路由用一个统一的模块来处理，如Angular中的入口模块AppModule
- 当基座应用的路由发生变化后，会发出对应的路由变化的全局事件
- 在子应用启动后，它们将监听是否有相应的路由变化
- 通用型前端微服务化：Single-SPA
- 基座部分
import * as singleSpa from 'single-spa';sinleSpa.registerApplication( 'app-1', () => import('app1/app1.js'), pathPrefix('/app1'));singleSpa.registerApplication( 'app2', () => import('app2/app2.js'), pathPrefix('/app2'));singleSpa.start()- 子应用部分
- React例子
import React from 'react';import ReactDOM from 'react-dom';import singleSpaReact from 'single-spa-react';import Root from './root.component.js';const reactLifecycles = singleSpaReact({ React, ReactDOM, rootComponent: Root, domElementGetter});export function bootstrap(props) { return reactLifecycles.bootstrap(props);}export function mount(props) { return reactLifecycles.mount(props);}export function unmount(props) { return reactLifecycles.unmount(props);}- Angular例子
const ngLifecycles = singleSpaAngular({ domElementGetter, mainModule, angularPlatform: platformBrowserDynamic(), template: ``, Router,})- 优缺点
- 优势
- 能支持大部分主流的前端框架，也能支持传统的前端框架
- 提供更好的用户体验，即不需要页面跳转，直接在当前页面载入
- 方便迁移旧的遗留系统
- 缺陷
- 系统构建复杂，应用需要集成在一起进行构建
- 不支持不同应用的部署分离
- 代码结构复杂
- 有额外的大量学习成本
- 定制型前端微服务化：Mooa
- 主工程部分
- 初始化微前端框架相关的配置
- 从远程获取所有子应用的配置
- 配置所有的子应用
- 进行主工程和子应用的路由配置
- 监测路由变化，一旦匹配到对应的路由，则加载对应的应用，并卸载旧的应用
- 子应用部分
- 路由更新
- 适配框架的基准URL
- 解决依赖冲突
- iframe隔离
- 为不同的子应用分配ID
- 在子应用中进行hook，以通知主应用：子应用已加载
- 在子应用中创建对应的事件监听，来响应主应用的URL变化事件
- 在主应用中监听子程序的路由跳转等需求
五、组件化微前端：微件化
- 运行时编译微件化：动态组件渲染
- Vue微件化
- 编写应用容器模板
"app-2"> "message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！
- 编写实例化应用脚本
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于' + new Date().toLocaleString() }}- 将模板和脚本放置在远程，在需要调用的地方创建与容器id对应的元素，接着运行相应脚本即可
- Angular微件化
- 在核心工程中提供微件化所需要的环境
SystemJs.set('@angular/core', SystemJs.newModule(angularCore));SystemJs.set('@angular/common', SystemJs.newModule(angularCommon));SystemJs.set('@angular/common/http', SystemJs.newModule(angularCommonHttp));- 在微件工程里，构建出能运行在核心工程的代码
// 导入微件const module = await SystemJs.import(widget.moduleBundlePath);// 编译模块const moduleFactory = await this.compiler.compileModuleAsync(module[widget.moduleName]);// 解析 ComponentFactoryconst moduleRef = moduleFactory.create(this.injector);const componentProvider = moduleRef.injector.get(widget.name);const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(componentProvider);// 编译组件this.content.createComponent(componentFactory);- 预编译微件化
- React微件化
- 编写统一的API，封装React的根组件
export const init = (config) => { ReactDOM.render(<App/>, document.getElementById('root')); serviceWorker.unregister();}- 修改构建系统的配置，让其输出可在浏览器上直接运行的版本
var config = { // ... output: { // ... library: 'MyApp', libraryTarget: 'umd', umdNameDefine: true, }}- 加载对应的JavaScript脚本，并调用组件的初始化方法
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
