微前端架构设计与实战示例
微前端架构设计与实战示例
微前端架构将大型前端应用拆分为多个独立的子应用，实现独立开发、测试和部署，提升应用的可维护性和扩展性。
一、微前端架构设计
1. 核心设计原则
（1）应用拆分
- 原则：将单体应用拆分为独立的子应用，每个子应用负责特定的业务功能。
- 示例：电商应用拆分为商品、购物车、订单等子应用。
（2）技术栈无关
- 原则：子应用可使用不同的技术栈，如React、Vue、Angular等。
- 示例：商品子应用使用React，购物车子应用使用Vue。
（3）独立运行
- 原则：子应用具备独立的运行时环境，不依赖主应用或其他子应用。
- 示例：每个子应用有自己的入口文件和生命周期管理。
（4）按需加载
- 原则：根据用户操作或路由动态加载子应用，提升性能。
- 示例：访问订单页面时，仅加载订单子应用。
（5）隔离与通信
- 原则：实现子应用间的样式和运行环境隔离，提供安全的通信机制。
- 示例：使用CSS隔离技术防止样式冲突，通过事件总线进行通信。
2. 架构模式
（1）基座模式（主从架构）
- 特点：主应用作为基座，负责路由分发、子应用加载、全局状态管理和公共依赖共享。
- 示例：主应用管理路由，根据路由加载对应的子应用。
（2）去中心化模式
- 特点：无中心主应用，子应用通过约定协议直接通信。
- 示例：子应用通过URL参数或自定义事件进行交互。
（3）模块联邦（Module Federation）
- 特点：通过Webpack 5的Module Federation实现模块级共享，子应用可互相引用暴露的模块。
- 示例：商品子应用暴露
Header组件，订单子应用引用该组件。
3. 关键技术
（1）路由控制
- 实现：主应用监听URL变化，根据路由规则加载子应用。
- 示例：访问
/product时加载商品子应用。
（2）沙箱隔离
- 实现：使用Proxy隔离全局变量，采用CSS隔离技术防止样式冲突。
- 示例：使用
qiankun提供的沙箱机制隔离子应用的运行环境。
（3）资源加载
- 实现：动态加载子应用的JS/CSS资源。
- 示例：使用
SystemJS或Webpack联邦按需加载子应用代码。
（4）通信机制
- 实现：自定义事件、全局状态管理（如Redux/Mobx）、URL参数传递等。
- 示例：通过事件总线在子应用间传递数据。
（5）部署集成
- 实现：子应用独立部署，主应用通过配置动态获取子应用入口。
- 示例：主应用配置文件中维护子应用的访问地址和加载规则。
二、实战示例：基于qiankun构建微前端应用
1. 项目背景
假设有一个电商平台，包含用户管理、商品展示、订单管理等模块。我们将这些模块拆分为独立的微前端应用，使用qiankun进行集成。
2. 环境准备
- 安装Node.js和npm
- 创建项目目录
3. 初始化主应用
（1）创建主应用
mkdir micro-frontend-main
cd micro-frontend-main
npm init -y
（2）安装依赖
npm install qiankun --save
（3）编写主应用代码
index.html:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微前端主应用title>
head>
<body>
<div id="subapp-container">div>
<script src="index.js">script>
body>
html>
index.js:
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'user-app', // 子应用名称
entry: '//localhost:7101', // 子应用入口地址
container: '#subapp-container', // 子应用渲染容器
activeRule: '/user', // 激活规则，匹配路由时加载子应用
},
{
name: 'product-app',
entry: '//localhost:7102',
container: '#subapp-container',
activeRule: '/product',
},
{
name: 'order-app',
entry: '//localhost:7103',
container: '#subapp-container',
activeRule: '/order',
},
]);
start();
4. 创建子应用
（1）创建用户管理子应用
mkdir user-app
cd user-app
npm init -y
（2）安装依赖（以React为例）
npm install react react-dom --save
（3）编写子应用代码
index.html:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理子应用title>
head>
<body>
<div id="root">div>
<script src="index.js">script>
body>
html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
function render(props) {
ReactDOM.render(<App {...props} />, document.getElementById('root'));
}
// 导出生命周期函数
export async function bootstrap() {
console.log('用户管理子应用 bootstrap');
}
export async function mount(props) {
console.log('用户管理子应用 mount', props);
render(props);
}
export async function unmount() {
console.log('用户管理子应用 unmount');
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}
App.js:
import React from 'react';
const App = (props) => {
return (
<div>
<h1>用户管理子应用</h1>
<p>欢迎，{props.name}！</p>
</div>
);
};
export default App;
（4）配置子应用打包
package.json:
{
"name": "user-app",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'index.js',
library: 'userApp', // 指定库名称
libraryTarget: 'umd', // 通用模块定义
publicPath: '//localhost:7101/', // 子应用访问路径
chunkFilename: '[name].js',
},
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 7101,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
},
],
},
};
（5）重复上述步骤创建商品展示和订单管理子应用
5. 运行项目
（1）启动子应用
cd user-app
npm start
同样启动product-app和order-app。
（2）启动主应用
cd micro-frontend-main
npx http-server -p 8080
访问http://localhost:8080，通过路由切换查看不同子应用的展示效果。
三、总结
通过以上设计与实战示例，展示了微前端架构的核心原则、架构模式和关键技术。使用qiankun框架，成功构建了一个包含用户管理、商品展示、订单管理等模块的微前端应用，实现了子应用的独立开发、部署和集成，提升了应用的可维护性和扩展性。