微前端的新纪元: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，用于解决两个核心需求：

1. 不同 Web 应用之间可以共享运行时代码

2. 互相加载对方的模块（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

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

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

运行：

yarn dev

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

---

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

host-app/vite.config.ts

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

import { Suspense } from 'react'
const RemoteHello = React.lazy(() => import("remoteApp/HelloRemote"))
export default function App() {return (
Host App
加载 Remote 组件中...
}>

) }

启动：

yarn dev

---

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

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

remoteEntry.js
其他 chunks…

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

1. host 远程访问 remoteEntry.js

2. remoteEntry.js 注册暴露模块

3. host 加载模块并执行

4. 实现真正的跨应用运行时代码加载

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

---

6. 共享依赖（shared）

你可以设置：

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

优点：

• React/Vue 不会重复加载

• 减少体积

• 全局实例一致（如 React context）

最佳实践：

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

---

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

Vite 的 environment variables：

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

host-app/vite.config.ts：

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

适用：

• Dev / Staging / Prod 不同 remote 地址

• 主应用与子应用环境独立（强烈推荐）

---

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

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

React remote 正常暴露组件即可。

Vue host：

import ReactWrapper from './ReactWrapper.vue'

只需一个 React-in-Vue wrapper：

<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)).defaultReactDOM.createRoot(container.value).render()
})
</script>

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 绝对值得你使用。