前端微前端：大型应用的模块化解决方案
常见误区
前端微前端并非过度设计。
'我的应用不大，不需要微前端'——结果应用越来越大，维护困难； '微前端太复杂了，不如一个大单体'——结果团队协作困难，部署冲突； '我用 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().;
. = {
: [
({
: ,
: {
: ,
:
},
: {
: { : , : },
: { : , : }
}
})
]
};
{ } = ().;
. = {
: [
({
: ,
: ,
: {
:
},
: {
: { : , : },
: { : , : }
}
})
]
};
, { lazy, } ;
= ( ());
= ( ());
() {
(
);
}
