微前端架构实战：如何用Garfish解决多团队协作难题

架构选择决策树：你是否需要微前端？

当你的前端项目遇到以下情况时，微前端架构可能是理想选择：

• 团队规模超过10人且按业务模块划分
• 项目需要集成多种技术栈（React、Vue、Angular等）
• 不同模块有独立发布需求
• 系统需要渐进式升级而不影响整体功能

如果以上情况中符合2项以上，Garfish微前端框架值得考虑。微前端就像餐厅的模块化厨房，每个厨师（团队）专注于特定菜品（业务模块），同时共享基础设施（主应用）。

技术选型对比：为什么选择Garfish？

方案	适用场景	集成难度	隔离性	性能开销
Garfish	中大型应用，多框架共存	★★☆	★★★★	★★☆
Single-spa	简单场景，单一框架	★★★	★★★	★★★
qiankun	中大型应用，React生态	★★★	★★★★	★★★★

Garfish的核心优势在于其灵活的沙箱机制和低侵入式设计，特别适合需要长期演进的企业级应用。

核心实现：从问题到解决方案

如何实现应用间的完全隔离？

问题：多个子应用共享同一浏览器环境，容易出现全局变量冲突和样式污染。

方案：使用Garfish的沙箱隔离机制，通过VM环境模拟浏览器API，实现JS和CSS的双重隔离。

验证：创建两个子应用，故意定义同名全局变量，观察是否相互影响。

// 主应用初始化配置
import { Garfish } from 'garfish';

Garfish.run({
  sandbox: {
    // 开启JS沙箱隔离
    snapshot: true,
    // 开启样式隔离
    strictStyleIsolation: true,
  },
  apps: [
    {
      name: 'react-app',
      entry: 'http://localhost:8080',
      activeWhen: '/react',
    },
    {
      name: 'vue-app',
      entry: 'http://localhost:8081',
      activeWhen: '/vue',
    },
  ],
});

📌 要点提示：strictStyleIsolation会为每个子应用的样式添加唯一属性选择器，确保样式不会泄漏到其他应用。

如何解决跨应用状态共享？

问题：子应用间需要共享用户信息、权限等公共数据，但又不能破坏应用独立性。

方案：使用Garfish的Provider机制，通过全局状态池实现安全的数据共享。

验证：在主应用中设置用户信息，在不同子应用中读取并验证数据一致性。

// 主应用提供共享数据
Garfish.provide('userInfo', {
  name: 'Garfish User',
  roles: ['admin'],
  // 提供修改方法，便于追踪数据变更
  setName: (newName) => {
    this.name = newName;
    // 通知所有订阅者
    Garfish.emit('userInfo:change', this);
  }
});

// 子应用消费共享数据
const userInfo = Garfish.useProvider('userInfo');
console.log(userInfo.name); // 输出: "Garfish User"

💡 优化建议：敏感数据应通过方法调用获取，而非直接暴露对象，便于添加权限控制和日志记录。

快速上手：30分钟搭建微前端应用

目标：创建包含主应用和两个子应用的微前端架构

1. 环境准备

操作：

# 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/gar/garfish
cd garfish

# 安装依赖
pnpm install

预期结果：项目依赖安装完成，无错误提示。

📌 要点提示：确保Node.js版本不低于12.0.0，推荐使用nvm管理Node版本。

2. 启动主应用

操作：

# 启动主应用开发服务器
pnpm run dev:main

预期结果：主应用在本地8080端口启动，访问http://localhost:8080能看到Garfish主应用界面。

3. 启动子应用

操作：

# 启动React子应用
pnpm run dev:react17

# 启动Vue子应用（新终端）
pnpm run dev:vue3

预期结果：React应用运行在8091端口，Vue应用运行在8093端口，可通过主应用导航菜单访问两个子应用。

常见陷阱规避

1. 路由冲突问题

症状：子应用路由与主应用路由冲突，导致页面跳转异常。

解决方案：为每个子应用配置独立的路由前缀，在主应用注册时通过activeWhen精确匹配。

// 正确配置示例
apps: [
  {
    name: 'react-app',
    entry: 'http://localhost:8091',
    activeWhen: '/react-app/*', // 使用唯一前缀
  }
]

2. 资源加载失败

症状：子应用图片、样式等静态资源404错误。

解决方案：确保子应用打包时配置正确的publicPath，或使用Garfish的资源重写能力。

// webpack配置示例
output: {
  publicPath: 'auto', // 自动适应加载环境
}

3. 应用切换性能问题

症状：子应用切换时出现白屏或卡顿。

解决方案：启用预加载功能，在空闲时提前加载可能需要的子应用资源。

// 预加载配置
Garfish.run({
  preloadApps: ['react-app', 'vue-app'], // 预加载指定应用
  apps: [/* ... */]
})

真实项目迁移案例

某电商平台将原单体应用拆分为三个微应用：

• 商品展示（Vue 3）
• 用户中心（React 18）
• 购物车（Angular 14）

迁移步骤：

1. 首先将公共组件库抽离为独立npm包
2. 实现主应用框架，搭建基础导航和用户系统
3. 按业务优先级逐步迁移子应用，先非核心后核心
4. 实施灰度发布，监控性能指标

成果：发布周期从2周缩短至2天，各团队并行开发，页面加载速度提升40%。

扩展学习路径图

初级：基础使用

• 官方文档：website/docs/guide/quickStart/index.md
• 示例代码：dev/app-main/src/garfishInit.ts

中级：深入原理

• 沙箱实现：packages/browser-vm/src/sandbox.ts
• 路由机制：packages/router/src/index.ts

高级：定制开发

• 插件开发指南：website/docs/guide/advance/plugins.md
• 性能优化实践：website/docs/blog/hmr.md

通过这条学习路径，你将从基础使用逐步深入到Garfish的内部实现，最终能够根据项目需求定制微前端解决方案。

微前端架构不是银弹，但对于复杂应用的团队协作和长期演进提供了有效解决方案。Garfish作为成熟的微前端框架，平衡了易用性和灵活性，值得在实际项目中尝试和探索。