前端微前端：大型应用的模块化解决方案
背景与挑战
在大型应用中，单体架构常面临维护困难、团队协作冲突等问题。虽然有人尝试使用 iframe 解决，但往往导致性能差、用户体验不佳。微前端并非银弹，但对于特定规模的大型应用，它是有效的解决方案。
核心优势
- 团队协作：不同团队可以独立开发和部署
- 技术栈灵活：不同微前端可以使用不同的技术栈
- 独立部署：单个微前端可以独立部署，不影响其他部分
- 可扩展性：可以轻松添加新的微前端
常见误区
使用 iframe 加载微前端是常见的错误实践：
<!-- 反面教材：使用 iframe 实现微前端 -->
<!DOCTYPE html>
<html>
<head>
<title>主应用</title>
</head>
<body>
<h1>主应用</h1>
<!-- 使用 iframe 加载微前端 -->
<iframe src="https://micro-app1.example.com"></iframe>
<iframe src="https://micro-app2.example.com"></iframe>
</body>
</html>
实现方案
基于 Module Federation
主应用 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, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
}
})
]
};
微应用 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, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
}
})
]
};
主应用中使用微应用：
import React, { lazy, Suspense } from 'react';
// 懒加载微应用
const MicroApp1 = lazy(() => import('microApp1/App'));
const MicroApp2 = lazy(() => import('microApp2/App'));
function App() {
return (
<div>
<h1>主应用</h1>
<Suspense fallback={<div>加载中...</div>}>
<MicroApp1 />
<MicroApp2 />
</Suspense>
</div>
);
}
基于 Single-SPA
主应用配置：
import { registerApplication, start } from 'single-spa';
// 注册微应用
registerApplication({
name: 'micro-app-1',
app: () => import('@org/micro-app-1'),
activeWhen: (location) => location.pathname.startsWith('/micro-app-1'),
customProps: { authToken: 'token' }
});
registerApplication({
name: 'micro-app-2',
app: () => import('@org/micro-app-2'),
activeWhen: (location) => location.pathname.startsWith('/micro-app-2')
});
// 启动应用
start();
微应用配置：
import { mountRootParcel } from 'single-spa';
// 导出生命周期函数
export const bootstrap = async () => { console.log('微应用 1 启动'); };
export const mount = async (props) => {
console.log('微应用 1 挂载', props);
// 挂载应用
const el = document.getElementById('micro-app-1');
// 渲染应用
return Promise.resolve();
};
export const unmount = async () => { console.log('微应用 1 卸载'); return Promise.resolve(); };
总结
- Module Federation：Webpack 5 的内置功能，支持模块共享
- Single-SPA：最早的微前端框架，支持多种技术栈
- Qiankun：基于 Single-SPA 的微前端方案，提供了更多功能
- 独立部署：每个微前端可以独立构建和部署
- 技术栈灵活：不同微前端可以使用不同的技术栈
- 模块共享：共享公共依赖，减少重复加载
- 路由管理：统一的路由管理，实现微前端间的导航
- 状态管理：跨微前端的状态管理方案
微前端旨在让大型应用的开发和维护变得更加简单，需配合合理的架构设计和团队协作。
