Federation vs Garfish vs Micro-app 微前端选型（二）

前言

基于上一篇文章对微前端框架的调研，为和目前多数项目的框架保持一致，确定主框架选型 Vite+Vue3 技术栈......

Vite 的 ES 模块天然优势：微前端最头疼的 "模块隔离" 和 "资源加载"，在 Vite 的原生 ES 模块支持下直接降维打击 ------ 开发环境不用打包，子应用随用随加载，热更新速度比 webpack 快 10 倍不止
Vue3 的 Composition API：子应用和主应用的状态通信、逻辑复用更灵活，配合 TypeScript 的类型提示，多人协作不容易出乱子
生态成熟度：插件生态已经能轻松搞定微前端的样式隔离、路由劫持、依赖共享，比两年前省心太多

继续调研

比较模块联邦、字节的Garfish、mico-app

|--------------------------|----------------|---------------------------------|
| 场景 | 推荐方案 | 理由 |
| 全新 Vite+Vue3 项目，追求极致开发体验 | 模块联邦 | 性能好，与 Vite 生态无缝衔接，模块级共享带来丝滑开发感受 |
| 超大型中后台，需要稳定性和监控 | 字节Garfish | 对 Vue3 适配深入且有性能监控等工具 |
| 偏好组件化思路构建微前端 | 京东 micro - app | 组件化封装子应用，隔离性较好，适合对子应用进行组件化管理的场景 |

模块联邦（Module Federation）

由于工作中多数项目都用了vue3+vite进行开发，因此，在调研了老牌选手乾坤后，先看向vite亲生的模块联邦。

模块联邦（Module Federation）是Webpack 5引入的一项革命性特性，它允许JavaScript应用在运行时动态共享代码，实现微前端架构的独立开发、构建和部署，同时优化资源加载和避免重复依赖。‌其核心价值在于通过容器应用（Container）与远程应用（Remote）的协作，实现跨应用的模块共享，提升开发效率和系统性能‌。‌‌

2025 年的模块联邦已经不是 webpack 的专属了，Vite 的vite-plugin-federation插件经过两年迭代，已经成为 Vue3 微前端的首选方案之一。

模块联邦基于运行时动态加载机制，主要角色包括：

‌**容器应用（Container）**‌：作为宿主应用，负责加载和协调远程微应用，声明远程模块来源。‌
‌**远程应用（Remote）**‌：独立微应用，暴露自身模块供其他应用消费，并可共享依赖。‌
‌共享模块（Shared Modules） ‌：通过shared配置实现跨应用依赖共享（如React、Vue），避免重复加载；singleton: true确保单例模式，解决版本冲突。‌

核心优势

‌模块级共享‌：和 Vite 的 ES 模块理念完美契合
‌独立开发与部署‌：微应用可独立更新，无需重新部署容器应用，提升协作效率。‌
‌资源优化‌：通过代码分割和异步加载，减少初始包体积，仅加载使用过的模块。‌
‌灵活复用‌：支持共享UI组件、工具函数及完整路由页面，适用于微前端、多团队协作或动态功能扩展。‌能共享任意模块（组件、路由、状态），不止是整个应用。

缺点

对团队规范要求高，乱共享模块容易导致依赖混乱
样式隔离需要自己处理（不过 Vue3 的 scoped+CSS Modules 基本能解决）
不适合老项目迁移，更适合全新的 Vite+Vue3 生态

配置

复制代码

// 主应用

<template>
  <div>
    <h2>这是来自app2的组件</h2>
    <App2Component />
  </div>
</template>

<script setup>
// 直接导入子应用暴露的组件（开发环境也能实时热更新！）
const App2Component = defineAsyncComponent(() => 
  import('app2/App') // 'app2'对应子应用的name
);

// 甚至能直接用子应用的路由
import app2Routes from 'app2/routes';
console.log('app2的路由配置', app2Routes);
</script>

直接基于 ES 模块共享代码，主应用和子应用就像 "模块超市"，你可以按需导入任何子应用的组件、路由甚至状态，完全摆脱 HTML 入口的束缚。

字节Garfish

Garfish通过独立开发、测试、部署多个微应用，实现整体内聚的用户体验，支持React、Vue等技术栈的快速接入。其架构设计强调应用间的状态隔离与资源复用，支持应用实例缓存和执行上下文缓存机制，提升切换效率并保持单页应用流畅性。

性能优化策略

‌应用实例缓存‌：存储已加载的子应用实例，避免重复加载资源
‌执行上下文缓存‌：缓存子应用的执行环境，减少初始化代码重复执行
‌Provider函数‌：定义渲染和清理逻辑，精确控制子应用挂载与卸载过程

优点

字节内部验证过的稳定性，支持超大规模应用（据说抖音后台在用）
对 Vue3 的适配最深入，甚至能共享app实例和全局指令
内置性能监控和错误追踪，适合大型团队

缺点

生态不如 qiankun 和模块联邦丰富，第三方插件少
文档是中文的（这算缺点吗？对国内团队其实是优点）

配置

复制代码

//主应用
import Garfish from '@garfish/core';

const garfish = new Garfish({
  router: {
    historyType: 'hash',
    publicPath: '/',
    routes: [
      {
        path: '/app1',
        microApp: {
          name: 'app1',
          entry: '//localhost:8081',
          container: '#root',
          activeRule: (location) => location.pathname === '/app1',
        },
      },
      {
        path: '/app2',
        microApp: {
          name: 'app2',
          entry: '//localhost:8082',
          container: '#root',
          activeRule: (location) => location.pathname === '/app2',
        },
      },
    ],
  },
});

garfish.start();

//子应用（几乎不需要设置）
// app1/main.js
import { bootstrap, mount, unmount } from '@garfish/runtime-vue';
import App from './App.vue';

bootstrap(App).then(mount(App)).catch(console.error);

window.unmount = unmount;

基于 "应用容器" 模型，每个子应用运行在独立的容器中，支持 JS 沙箱、样式隔离、预编译等特性，同时内置了 Vue3 的加载器，不用额外配置。

京东 micro - app

MicroApp 是京东前端团队开发的微前端框架，基于类 WebComponent 设计，通过组件化方式实现微前端架构，具有低侵入性、高兼容性和丰富的隔离特性‌。

优点

组件化优势：以组件化思维构建微前端，使得子应用的集成和管理更加直观，方便在主应用中灵活组合和复用。
较好的隔离性：借助 ShadowDom 实现了一定程度的样式和脚本隔离，减少了子应用之间以及子应用与主应用之间的干扰。
支持 Vite：通过插件支持 Vite 项目，能够在 Vite 的开发和构建环境中良好运行。

缺点

沙箱限制：虽然支持 Vite 运行，但 js 代码没办法做完整的沙箱隔离，在一些对安全性和隔离性要求极高的场景下可能不太适用。
插件依赖：子应用依赖特定的插件进行改造，增加了一定的配置复杂度，并且如果插件更新不及时，可能会影响到项目的升级和维护。

配置

复制代码

//主应用
// main - app/src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import microApp from '@micro - app/vue3';

const app = createApp(App);
app.use(microApp, {
  apps: [
    {
      name:'sub-app-vue',
      entry: '//localhost:5175',// Vite子应用地址
      container: '#sub-app-container',
      activeRule: '/sub-app'
    }
  ]
});
app.mount('#app');


//模块中调用
<template>
  <div id="sub-app-container"></div>
</template>

//子应用vite.config.ts
//需要使用@micro - app/vite - plugin插件进行改造：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin - vue';
import microAppPlugin from '@micro - app/vite - plugin';

export default defineConfig({
  plugins: [
    vue(),
    microAppPlugin({
      name:'sub - app - vue'
    })
  ],
  server: {
    port: 5175,
    cors: true
  }
});

喜欢组件化思维构建微前端的则可以考虑京东 micro - app。

结论

遗留系统迁移 ‌：逐步替换旧技术栈‌；‌跨团队协作 ‌：独立开发与部署子应用‌。动态加载需求‌：按需加载子模块提升首屏性能‌。等项目场景适合使用微前端进行组合式开发。

但是依然要注意：共享依赖时，别把lodash这种工具库也共享 ------ 子应用升级版本容易冲突，实测只共享核心库就够了；路由模式统一用 history，避免嵌套问题，配合base配置隔离路由；用应用前缀手动控制应用间隔离，不能完全依赖于框架。