实现微前端的几种方案优劣对比

前端开发 Jun 15, 2022

什么是「微前端」?

微前端官网 给予的解释是:用于构建具有多个可以独立发布功能的团队的现代 Web 应用程序的技术、策略和秘诀(Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently)。 该词于 2016 年底首次出现在 Technology Radar 中,它将微服务的概念扩展到前端世界。当前的趋势是:构建一个功能丰富且功能强大的浏览器应用程序,也就是单页应用程序,它位于微服务架构之上。随着时间的推移,通常由单独的团队开发的前端层会增长,并且变得更加难以维护。

Micro Frontends(微前端)背后的想法是:将一个网站或 Web 应用视为由独立团队拥有的功能组成。每个团队都有其关心和擅长的独特业务领域或任务。一个团队是跨功能的,从数据库到用户界面,端到端的开发其功能。

微前端及几种实现方案比较

为什么要采用微前端?

随着 Web 应用的日渐强大,随之而来的是前端项目不断膨胀。业务需求不断叠加的情况下,巨石项目越来越难维护,编译时间越来越难等。微前端的出现,就是为了解决这种大型单页面应用程序后期无法维护的问题,它可以将前端整体分解为小而简单的块,摒弃大型单体应用方式,每个模块可以独立开发、测试、部署,可以单独访问,最后将不同子系统(模块)聚合成一个完整的应用出现在客户面前。

微前端背后的核心思想

  • 与技术无关
    每个团队都应该能够选择和升级他们的堆栈,而无需与其他团队协调。 自定义元素 是隐藏实现细节同时为其他人提供中性界面的好方法。
  • 隔离团队代码
    不要共享运行时,即使所有团队都使用相同的框架。构建自包含的独立应用程序。不要依赖共享状态或全局变量。
  • 建立团队前缀
    就尚无法隔离的命名约定达成一致。命名空间 CSS、事件、本地存储和 Cookie,以避免冲突并明确所有权。
  • 优先使用本机浏览器功能而不是自定义 API
    使用 浏览器事件进行通信 ,而不是构建全局 PubSub 系统。如果你真的需要构建一个跨团队的 API,尽量让它尽可能简单。
  • 构建弹性站点
    即使 JavaScript 失败或尚未执行,您的功能也应该很有用。使用 通用渲染 和渐进增强来提高感知性能。

实现微前端的几种方案

方案 描述 优点 缺点
iframe 嵌套 子应用通过 iframe 嵌套的方式来引入 实现简单、独立部署访问、天然隔离,子应用之间自带沙箱,互不影响 应用之间通信不便、浏览器前进/后退会重置 iframe 页面、样式和兼容性具有局限性
Nginx 转发 通过 Nginx 配置的反向代理来实现不同路径映射到不同应用 改造简单、成本低、快捷 切换应用的时候、会刷新页面
npm 包引入 子应用通过 npm 构建发布的方式来部署,由主应用来引入打包集成 方案成熟、较简单 打包部署慢,不能单独部署、技术栈需统一
通用中心路由基座式 子应用可以使用不同的技术栈,并且之间相互独立,无依赖,统一由主应用进行管理,注册,节点挂载,卸载等(主要有 single-spaqiankun 等框架) 不限定技术栈、单独部署 通信方式不够灵活
封装 WebComponents Web Components 是浏览器原生组件,它有能力以组件加载的方式将微应用整合在一起作为微前端 不限定技术栈、独立开发、应用间隔离 浏览器兼容问题、微前端方面探索不成熟
去中心模式 脱离基座模式,每个应用之间都可以彼此分享资源。如基于 Webpack 5 Module Federation 实现的 EMP 微前端方案,可以实现多个应用彼此共享资源分享 通信方式多、单独部署,子应用更新同步成本低,构建速度快

关乎 qiankun 框架的简单说明

乾坤(阿里系开源微前端框架),使您和您的团队能够利用 微前端 构建下一代和企业级的 Web 应用程序。它的灵感来自并基于 single-spa 。它具备以下好处:

  • 不限定技术栈:可以接入不同技术栈开发的第三方平台、也可以使用不同技术栈的最优的开源解决方案;
  • 改造成本低:不需要对已有的巨型应用进行架构升级、代码重构,只需要对新的模块使用 qiankun 微前端的模式进行开发部署即可,主应用直接引入使用;
  • 性能优化:模块独立开发部署加载,可以做到按需加载,不浪费额外的资源;
  • qiankun 是基于 single-spa 的优化版,解决了 single-spa 遗留的样式污染、内存泄漏、没有父子应用数据通信方式等痛点。

您可能感兴趣的文章

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.