字节跳动开源微前端框架Garfish

2,417 阅读4分钟

李月喜:ToB Dev及大厂杂谈公众号主理人,本文来自大厂杂谈(关注大厂及大牛的开源项目及技术文章分享),欢迎大家关注我掘金号。

大厂杂谈关注:字节最近成立开源委员会发力开源,从去年开始已经陆续开源了不少项目《字节跳动成立开源委员会!如何从0到1打造一个开源项目!部分字节开源项目推荐》,本文末尾附字节部分开源项目。

今天为大家推荐去年与Modern.js差不多同时出来的开源微前端框架Garfish。

字节开源微前端框架Garfish

大部分内容来源于Garfishjs官网www.garfishjs.org

www.garfishjs.org

图片

介绍

**
**

什么是微前端?

微前端是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用,而在用户看来仍然是内聚的单个产品。

它主要解决了两个问题:

  • 随着项目迭代应用越来越庞大,难以维护;

  • 跨团队或跨部门协作开发项目导致效率低下的问题;

Garfish 起源

Garfish 起源于 头条号 的实际场景,随着业务发展变成一个 Monolithic-Applications (巨石应用)。同时由于维护的团队人员都比较分散,工程大,导致开发调试效率低、上线困难(代码合并相互依赖),成为阻塞业务发展的一个重要因素。

于是在 2018 年衍生了 Garfish 这个微前端框架,经过大量业务方实际场景的验证和打磨,Garfish 逐渐趋于成熟。并且随着更多的业务对微前端的需求,Garfish 也在不断迭代之中,已经积累了丰富的微前端问题解决经验。

Garfish 是什么

Garfish 是一套 微前端 解决方案,主要用于解决现代 web 应用在前端生态繁荣和 web 应用日益复杂化两大背景下带来的跨团队协作、技术体系多样化、web 应用日益复杂化等问题:从架构层面出发将多个独立交付的前端应用组成整体,这些前端应用能够「独立开发」、「独立测试」、「独立部署」,但是最终在用户看来仍然是内聚的单个产品。

框架特性

🌈 丰富高效的产品特征

  • Garfish 微前端子应用支持任意多种框架、技术体系接入
  • Garfish 微前端子应用支持「独立开发」、「独立测试」、「独立部署」
  • 强大的预加载能力,自动记录用户应用加载习惯增加加载权重,应用切换时间极大缩短
  • 支持依赖共享,极大程度的降低整体的包体积,减少依赖的重复加载
  • 内置数据收集,有效的感知到应用在运行期间的状态
  • 支持多实例能力,可在页面中同时运行多个子应用提升了业务的拆分力度

📦 高扩展性的核心模块

  • 通过 Loader 核心模块支持 HTML entry、JS entry 的支持,接入微前端应用简单易用
  • Router 模块提供了路由驱动、主子路由隔离,用户仅需要配置路由表应用即可完成自主的渲染和销毁,无需关心内部逻辑
  • Sandbox 模块为应用的 Runtime 提供运行时隔离能力,能有效隔离 JS、Style 对应用的副作用影响
  • Store 提供了一套简单的通信数据交换机制

🎯 高度可扩展的插件机制

  • 提供业务插件满足各种定制需求

设计理念

图片

具体可参考 微前端架构设计 这篇文章中的详细介绍

什么时候用

如果你的团队成员多、项目类型多,并且想将其打造成「内聚的单个产品」:

  • 项目的团队成员来自多个团队
  • 项目内多条迭代出现需求挤兑,影响测试、发布效率
  • 跨空间、跨时间维度导致团队内技术体系无法统一
  • 多个前端应用需要达到「内聚的单个产品」特征
  • 「内聚的单个产品」中部分内容希望达到独立开发、独立发布、独立测试、独立灰度等能力

Garfish 地址

官网地址:

www.garfishjs.org/

图片

GitHub地址:

github.com/modern-js-d…

图片

如果本篇文章对你有帮助
别忘了点赞、收藏、转发、评论 等支持我们
你的支持是我们更新的动力