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

前端微前端架构：别再把所有代码都放在一个仓库里了

news 2026/4/14 10:40:38

前端微前端架构：别再把所有代码都放在一个仓库里了

什么是前端微前端架构？

前端微前端架构是一种将前端应用分解为多个独立的、可独立部署的微应用的架构风格。别以为微前端只是后端微服务的前端版本，它有自己的特点和挑战。

为什么需要前端微前端架构？

团队协作：不同团队可以独立开发、部署和维护各自的微应用
技术栈灵活性：不同微应用可以使用不同的技术栈
可维护性：减少单体应用的复杂性，提高可维护性
可扩展性：可以独立扩展各个微应用
渐进式迁移：可以逐步将传统应用迁移到微前端架构

前端微前端架构模式

1. iframe 模式

iframe 模式是最直接的微前端实现方式，通过 iframe 嵌入其他微应用。

<!-- 主应用 --> <div class="main-app"> <header>Main App Header</header> <div class="content"> <iframe src="https://micro-app-1.example.com" frameborder="0" width="100%" height="500"></iframe> <iframe src="https://micro-app-2.example.com" frameborder="0" width="100%" height="500"></iframe> </div> <footer>Main App Footer</footer> </div> <!-- 微应用 1 --> <div class="micro-app-1"> <h1>Micro App 1</h1> <p>This is micro app 1</p> </div> <!-- 微应用 2 --> <div class="micro-app-2"> <h1>Micro App 2</h1> <p>This is micro app 2</p> </div>

2. Single-SPA 模式

Single-SPA 是一个前端微服务框架，允许在同一页面上运行多个前端框架。

// 主应用配置 import { registerApplication, start } from 'single-spa'; // 注册微应用 registerApplication({ name: 'micro-app-1', app: () => import('https://micro-app-1.example.com/main.js'), activeWhen: (location) => location.pathname.startsWith('/app1') }); registerApplication({ name: 'micro-app-2', app: () => import('https://micro-app-2.example.com/main.js'), activeWhen: (location) => location.pathname.startsWith('/app2') }); // 启动应用 start(); // 微应用 1 配置 import { registerApplication } from 'single-spa'; export const bootstrap = async () => { console.log('Micro App 1 bootstrap'); }; export const mount = async (props) => { console.log('Micro App 1 mount', props); // 渲染应用 document.getElementById('micro-app-1').innerHTML = '<h1>Micro App 1</h1>'; }; export const unmount = async () => { console.log('Micro App 1 unmount'); // 清理应用 document.getElementById('micro-app-1').innerHTML = ''; };

3. Qiankun 模式

Qiankun 是基于 Single-SPA 的微前端框架，提供了更完整的功能。

// 主应用配置 import { registerMicroApps, start } from 'qiankun'; // 注册微应用 registerMicroApps([ { name: 'micro-app-1', entry: 'https://micro-app-1.example.com', container: '#micro-app-1', activeRule: '/app1' }, { name: 'micro-app-2', entry: 'https://micro-app-2.example.com', container: '#micro-app-2', activeRule: '/app2' } ]); // 启动应用 start(); // 微应用 1 配置 // webpack.config.js const { name } = require('./package.json'); module.exports = { output: { library: `${name}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${name}` } }; // src/main.js export async function bootstrap() { console.log('Micro App 1 bootstrap'); } export async function mount(props) { console.log('Micro App 1 mount', props); // 渲染应用 ReactDOM.render(<App />, props.container.querySelector('#root')); } export async function unmount(props) { console.log('Micro App 1 unmount'); // 清理应用 ReactDOM.unmountComponentAtNode(props.container.querySelector('#root')); }

4. Module Federation 模式

Module Federation 是 Webpack 5 引入的特性，允许不同的应用共享代码。

// 主应用 webpack 配置 const { ModuleFederationPlugin } = require('webpack').container; module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { microApp1: 'microApp1@http://localhost:3001/remoteEntry.js', microApp2: 'microApp2@http://localhost:3002/remoteEntry.js' }, shared: { react: { singleton: true }, 'react-dom': { singleton: true } } }) ] }; // 微应用 1 webpack 配置 const { ModuleFederationPlugin } = require('webpack').container; module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'microApp1', filename: 'remoteEntry.js', exposes: { './App': './src/App' }, shared: { react: { singleton: true }, 'react-dom': { singleton: true } } }) ] }; // 主应用使用微应用 import React, { lazy, Suspense } from 'react'; const MicroApp1 = lazy(() => import('microApp1/App')); const MicroApp2 = lazy(() => import('microApp2/App')); function App() { return ( <div> <h1>Host App</h1> <Suspense fallback={<div>Loading Micro App 1...</div>}> <MicroApp1 /> </Suspense> <Suspense fallback={<div>Loading Micro App 2...</div>}> <MicroApp2 /> </Suspense> </div> ); } export default App;

5. 组合式微前端

组合式微前端是一种更灵活的微前端实现方式，通过组合多个微应用的组件来构建页面。

// 微应用 1 导出组件 // src/components/Button.js export function Button({ children, onClick }) { return ( <button className="btn" onClick={onClick}> {children} </button> ); } // 微应用 2 导出组件 // src/components/Card.js export function Card({ title, children }) { return ( <div className="card"> <h3>{title}</h3> <div className="card-content">{children}</div> </div> ); } // 主应用使用微应用组件 import { Button } from 'microApp1/Button'; import { Card } from 'microApp2/Card'; function App() { return ( <div> <Card title="Welcome"> <p>Hello from host app</p> <Button onClick={() => console.log('Clicked')}> Click me </Button> </Card> </div> ); } export default App;