微前端的新纪元:Vite + Module Federation 最强指南（2025 全面技术解析）

告别 Webpack 的复杂配置。

利用 @originjs/vite-plugin-federation 在 Vite 生态中构建高性能、分布式的微前端架构。

在 Web 架构不断演进的今天，"微前端"已成为大型团队、多业务线、跨技术栈项目的首选方案之一。而随着 Vite 的极速构建体验成为事实标准，如何在 Vite 中优雅地使用 Module Federation 也成为前端架构师们关注的重点。

得益于 @originjs/vite-plugin-federation 与 Vite原生构建能力 的升级，现在我们终于可以做到：

React、Vue、Svelte、Angular 等多技术栈之间共享模块
主应用与子应用可独立部署
自动依赖共享
热更新流畅（HMR）
极速开发体验
支持 SSR、CSR、Vite 构建优化

本文将带你一次性掌握：

微前端概念 → Module Federation 原理 → Vite federation 插件 → 从零构建 → 跨应用组件共享 → 环境变量 → 部署策略 → 实战经验与坑点

1. 什么是 Module Federation？

Module Federation（模块联邦）允许 JavaScript 应用动态地从另一个应用加载代码。它是微前端架构的核心拼图，使得多个独立的构建可以组成一个单一的应用。

Module Federation 来自 Webpack 5，用于解决两个核心需求：

不同 Web 应用之间可以共享运行时代码
互相加载对方的模块（React/Vue 组件、工具函数、页面等）

优势：

特性	描述
独立部署	每个应用独立构建上线，不影响其它应用
运行时共享	不重复加载依赖（如 React 只加载一次）
动态模块	子应用可以动态升级，不需重新发布主应用
跨技术栈	Vue 可以加载 React 组件，反之亦然

2. 为什么选择 Vite + Module Federation？

传统 MF 基于 Webpack，但 Webpack 在现代前端中：

构建慢
启动慢
热更新体验不佳

而 Vite 的优势非常明确：

对比项	Webpack	Vite
启动速度	慢（打包依赖）	快（依赖预构建 + 原生 ES 模块）
构建速度	中等	快（Rollup + 按需构建）
HMR	中	极快
配置成本	高	低
微前端能力	原生支持	通过插件完美支持

因此，我们只需要使用官方的：

复制代码

@originjs/vite-plugin-federation

即可在 Vite 中完美使用 Module Federation 技术。

3. 插件介绍：vite-plugin-federation

安装：

复制代码

yarn add @originjs/vite-plugin-federation -D

这个插件提供：

exposes: 暴露模块
remotes: 引用远程模块
shared: 共享依赖（如 React）

支持：

Vite Dev Server
构建产物 Rollup Output
HMR
React/Vue/Svelte 等任意框架
TypeScript

4. 构建一个 Vite Federation 微前端项目（完整示例）

我们会搭建：

复制代码

- host-app（主应用）
- remote-app（子应用，暴露 React 组件）

Step 1：remote-app 暴露组件

remote-app/vite.config.ts

javascript 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './HelloRemote': './src/HelloRemote.tsx'
      },
      shared: ['react', 'react-dom']
    })
  ],
  build: {
    target: 'esnext'
  }
})

remote-app/src/HelloRemote.tsx

javascript 复制代码

export default function HelloRemote() {
  return <h2>你好，我是 Remote App 暴露的组件！</h2>
}

运行：

bash 复制代码

yarn dev

remote 应用将在 http://localhost:5001 暴露：
http://localhost:5001/assets/remoteEntry.js

Step 2：host-app 引入 remote 应用组件

host-app/vite.config.ts

javascript 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'hostApp',
      remotes: {
        remoteApp: "http://localhost:5001/assets/remoteEntry.js"
      },
      shared: ['react', 'react-dom']
    })
  ],
  build: {
    target: 'esnext'
  }
})

host-app/src/App.tsx

javascript 复制代码

import { Suspense } from 'react'

const RemoteHello = React.lazy(() => import("remoteApp/HelloRemote"))

export default function App() {
  return (
    <div>
      <h1>Host App</h1>

      <Suspense fallback={<div>加载 Remote 组件中...</div>}>
        <RemoteHello />
      </Suspense>
    </div>
  )
}

启动：

复制代码

yarn dev

5. 运行原理（超级关键）

Vite 构建完成后，remote 会生成：

bash 复制代码

remoteEntry.js
其他 chunks...

主应用执行 import("remote/xxx") 时：

host 远程访问 remoteEntry.js
remoteEntry.js 注册暴露模块
host 加载模块并执行
实现真正的跨应用运行时代码加载

没有打包合并！是真正的运行时加载！

6. 共享依赖（shared）

你可以设置：

javascript 复制代码

shared: {
  react: {
    singleton: true,
    requiredVersion: '^19.0.0'
  }
}

优点：

React/Vue 不会重复加载
减少体积
全局实例一致（如 React context）

最佳实践：

javascript 复制代码

shared: ['react', 'react-dom', 'react-router-dom']

7. 环境变量（env）在微前端中的使用

Vite 的 environment variables：

javascript 复制代码

VITE_REMOTE_URL="http://localhost:5001/assets/remoteEntry.js"

host-app/vite.config.ts：

javascript 复制代码

remotes: {
  remoteApp: `${process.env.VITE_REMOTE_URL}`
}

适用：

Dev / Staging / Prod 不同 remote 地址
主应用与子应用环境独立（强烈推荐）

8. 跨技术栈（Vue ↔ React）怎么做？

例如 Vue 主应用加载 React 子应用：

React remote 正常暴露组件即可。

Vue host：

javascript 复制代码

import ReactWrapper from './ReactWrapper.vue'

<ReactWrapper remote="remoteApp/HelloRemote" />

只需一个 React-in-Vue wrapper：

javascript 复制代码

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import React from 'react'
import ReactDOM from 'react-dom/client'

const props = defineProps<{ remote: string }>()

const container = ref()

onMounted(async () => {
  const Remote = (await import(props.remote)).default
  ReactDOM.createRoot(container.value).render(<Remote />)
})
</script>

<template>
  <div ref="container"></div>
</template>

Vite Federation 在跨框架环境下表现极佳。

9. 部署策略（Production）

只需满足：

remote 的 remoteEntry.js 可在线访问（CDN 或后端）
host 中的 remotes URL 指向线上地址

示例：

复制代码

https://cdn.mycompany.com/remote-app/remoteEntry.js

注意：

remote 部署更新后，host 无需重新构建（真正的微前端核心优势）
推荐使用 CDN（版本管理更清晰）

10. 常见坑点（2025 最新整理）

问题	解决方案
shared 版本冲突	指定 requiredVersion 并锁版本
远程组件未加载	检查 remoteEntry.js 是否能通过网络访问
TypeScript 报错	添加 `types.d.ts` 声明
开发环境热更新不生效	需要升级到最新 `vite-plugin-federation`
remote 子应用路由失效	所子应用使用 HashRouter 或 MemoryHistory

11. 性能优化建议

✔ 使用 CDN 部署 remote

加速加载速度。

✔ shared 明确版本

减少重复加载体积。

✔ remote 组件尽量颗粒化

更小的 chunk 更快的加载。

✔ 缓存策略

CDN 设置 Cache-Control: max-age=31536000 immutable

12. 最终总结

Vite + Module Federation 在 2025 已经成为：

最轻量、最快速、最现代化的微前端解决方案

它具备：

极速开发体验（Vite）
真正的运行时加载（MF）
简洁配置（仅 20 行即可）
跨框架支持（Vue、React、Svelte 等）
独立部署（真正解耦）
可以与任何工程体系共存

如果你正在构建：

大型 SaaS
多团队合作的大型前端架构
需要跨项目共享业务组件库
需要独立部署的子模块

那么 Vite Federation 绝对值得你使用。