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

前端微前端架构：别让你的应用变成一个大泥球

news 2026/8/23 1:27:11

前端微前端架构：别让你的应用变成一个大泥球

什么是微前端？

微前端是一种将前端应用分解为多个独立、可部署的微应用的架构模式。别以为微前端只是后端微服务的翻版，它解决了前端应用随着规模增长而变得难以维护的问题。

为什么需要微前端？

独立开发和部署：不同团队可以独立开发和部署各自的微应用
技术栈灵活性：不同微应用可以使用不同的技术栈
渐进式迁移：可以逐步迁移旧应用，而不是一次性重写
容错性：单个微应用的故障不会影响整个应用
可扩展性：可以根据业务需求轻松添加新的微应用

微前端实现方案

1. iframe

最简单的微前端实现方案，使用 iframe 嵌入其他应用。

<!-- 主应用 --> <div class="main-app"> <h1>主应用</h1> <iframe src="https://micro-app1.example.com" title="微应用1"></iframe> <iframe src="https://micro-app2.example.com" title="微应用2"></iframe> </div>

优点：

实现简单，隔离性好
技术栈完全独立

缺点：

性能开销大
页面刷新问题
跨域通信复杂
SEO 不友好

2. Single-SPA

Single-SPA 是一个用于前端微服务的 JavaScript 框架。

// 安装 // npm install single-spa // 主应用配置 import { registerApplication, start } from 'single-spa'; // 注册微应用 registerApplication({ name: 'micro-app1', app: () => import('@org/micro-app1'), activeWhen: (location) => location.pathname.startsWith('/micro-app1'), customProps: { /* 传递给微应用的属性 */ } }); // 启动应用 start(); // 微应用配置 import { mountRootParcel } from 'single-spa'; export const bootstrap = async () => { console.log('微应用1 启动'); }; export const mount = async (props) => { console.log('微应用1 挂载', props); // 挂载应用逻辑 }; export const unmount = async () => { console.log('微应用1 卸载'); // 卸载应用逻辑 };

优点：

性能好，无 iframe 开销
支持多种技术栈
路由管理简单

缺点：

需要修改现有应用
样式隔离需要额外处理

3. Qiankun

Qiankun 是基于 Single-SPA 的微前端解决方案，提供了更完善的功能。

// 安装 // npm install qiankun // 主应用配置 import { registerMicroApps, start } from 'qiankun'; // 注册微应用 registerMicroApps([ { name: 'micro-app1', entry: '//localhost:8081', container: '#micro-app1', activeRule: '/micro-app1' }, { name: 'micro-app2', entry: '//localhost:8082', container: '#micro-app2', activeRule: '/micro-app2' } ]); // 启动应用 start(); // 微应用配置 // main.js import { createApp } from 'vue'; import App from './App.vue'; let instance = null; function render(props) { instance = createApp(App); instance.mount(props.container ? props.container.querySelector('#app') : '#app'); } if (!window.__POWERED_BY_QIANKUN__) { render({}); } export async function bootstrap() { console.log('微应用1 启动'); } export async function mount(props) { console.log('微应用1 挂载', props); render(props); } export async function unmount() { console.log('微应用1 卸载'); instance.unmount(); instance = null; }

优点：

开箱即用，配置简单
自动处理样式隔离
支持多种技术栈
提供了丰富的 API

缺点：

对现有应用有一定侵入性

4. Module Federation

Webpack 5 的 Module Federation 功能，可以在运行时共享模块。

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

优点：