当前位置：首页 > news >正文

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

news 2026/5/12 20:53:00

微前端的新纪元: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

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") 时：

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

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

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