logologo
指南
API
博客
常见问题
指南
API
博客
常见问题
logologo

快速上手

介绍
快速开始
环境变量

接入指南

概述
react 子应用
vue 子应用
vite 子应用
angular 子应用

核心能力

bridge
缓存机制
生命周期
路由机制
构建配置
沙箱机制

进阶

插件指南
Next Page快速开始

#介绍

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

它主要解决了两个问题:

  • 随着项目迭代应用越来越庞大,难以维护;
  • 跨团队或跨部门协作开发项目导致效率低下的问题;

#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 提供了一套简单的通信数据交换机制
  • 🎯 高度可扩展的插件机制

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

#设计理念

image.png

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

#什么时候用

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

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