微前端不是银弹，但救了我们双11的命
早上8点刚泡好咖啡，工位还没坐热，钉钉就弹出一条消息：“双11大促页面要提前两周上线，主站和活动页必须无缝集成。”我盯着屏幕，心里一万个草泥马奔腾而过——这活儿要是用传统单体架构干，光是两个团队代码冲突就能吵到年底。
我是上海一家小厂的后端开发，独立负责一条电商业务线。虽然title叫“后端”，但因为团队人少（准确说是“极度精简”），前后端都得摸。最近半年被逼着搞微前端，说是为了提升迭代速度、解耦业务模块。一开始我还挺抗拒：又是新概念，又是新工具链，咱小厂哪有精力折腾？结果去年双11前的一场“事故”，让我彻底改变了想法。
事情是怎么开始的？
去年9月，产品突然甩过来一个需求：要在主商城首页嵌入一个全新的“限时秒杀”活动页，要求独立开发、独立部署，且不能影响主站稳定性。更离谱的是，这个活动页要用React写（我们主站还是Vue2），而且开发周期只有三周。
我当时就懵了：“你让Vue项目里塞个React组件？还独立部署？产品经理你是从火星来的吗？”
但吐槽归吐槽，deadline不等人。运维那边也火上浇油：“别整那些花里胡哨的iframe，SEO要崩，性能要炸，用户体验直接GG。”
思来想去，微前端成了唯一出路。虽然之前只在掘金上看过几篇水文，但“代码人生”这东西，有时候就是被逼出来的。
选型：qiankun 还是自己造轮子？
调研了一圈，主流方案无非三种：iframe（被否）、Module Federation（Webpack5太新，我们还在Webpack4）、qiankun（蚂蚁开源，文档全，社区活跃）。
作为小厂打工人，我可没时间重复造轮子。qiankun支持React/Vue/Angular混搭，生命周期管理清晰，还能沙箱隔离——听起来很美。但真上手才发现，坑比想象中多。
比如，主应用和子应用共用Ant Design时，样式冲突直接让UI变“赛博朋克”；再比如，子应用里的axios拦截器会污染主应用的请求逻辑；最要命的是，本地开发时子应用路由跳转会刷新整个页面……
当时真的想砸电脑。但想到房租还没交（公司附近一室户月租6K，肉疼），只能硬着头皮debug。
实战：如何让 React 子应用优雅地“寄生”在 Vue 主站里？
我们的主站是Vue2 + Vue Router + Vuex，子应用是React 18 + React Router v6。目标：用户访问 /flash-sale 时，加载React子应用，其他路径走主站逻辑。
第一步：主应用改造（Vue）
安装 qiankun：
npm install qiankun --save
在 main.js 中注册子应用：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'flash-sale-app',
entry: '//localhost:3001', // 开发环境
// entry: '//cdn.yourcompany.com/flash-sale/', // 生产环境
container: '#subapp-container',
activeRule: '/flash-sale',
props: {
// 透传给子应用的数据，比如用户token
globalStore: store,
routerBase: '/flash-sale'
}
}
]);
start({
sandbox: { strictStyleIsolation: true }, // 开启严格样式隔离
});
注意：container 必须是一个真实存在的DOM节点。我们在主站App.vue里加了个空div：
<template>
<div id="app">
<router-view />
<div id="subapp-container"></div> <!-- 微前端容器 -->
</div>
</template>
第二步：子应用改造（React）
关键是要暴露出三个生命周期函数：bootstrap、mount、unmount。
在 src/micro-app.js 中：
let rootInstance = null;
export async function bootstrap() {
console.log('React子应用 bootstrap');
}
export async function mount(props) {
const { container, routerBase } = props;
rootInstance = ReactDOM.createRoot(container
? container.querySelector('#root')
: document.getElementById('root')
);
rootInstance.render(
<BrowserRouter basename={routerBase || '/'}>
<App />
</BrowserRouter>
);
}
export async function unmount() {
if (rootInstance) {
rootInstance.unmount();
rootInstance = null;
}
}
然后在 webpack.config.js 中配置输出为umd格式（qiankun要求）：
output: {
library: 'flashSaleApp',
libraryTarget: 'umd',
publicPath: '//localhost:3001/' // 开发环境
}
第三步：解决那些“要命”的坑
坑1：样式污染
即使开了 strictStyleIsolation，某些全局样式（比如body字体）还是会互相影响。我们的解法是在子应用入口加一层CSS Reset，并约定所有子应用使用CSS Modules或Scoped CSS。
坑2：路由跳转刷新
React Router v6 的 useNavigate 在微前端环境下会触发全页刷新。原因是qiankun默认劫持了 window.history，但React Router没感知到。
解决方案：在子应用中使用主应用传递的 props.history（如果主应用是React的话），或者手动监听路由变化。我们最终选择在子应用内部用 window.addEventListener('popstate', ...) 自行处理。
坑3：公共依赖重复加载
主站和子应用都用了lodash、axios，导致bundle体积暴涨。通过externals把公共库抽出来，由主应用统一提供：
// 主应用 window 上挂载
window.sharedDeps = {
react: React,
'react-dom': ReactDOM,
axios: axios,
lodash: _
};
// 子应用 webpack externals
externals: {
react: 'sharedDeps.react',
'react-dom': 'sharedDeps["react-dom"]',
axios: 'sharedDeps.axios',
lodash: 'sharedDeps.lodash'
}
性能与体验：别让用户感知到“拼凑感”
微前端最容易翻车的就是用户体验。用户可不管你是几个团队开发的，页面卡顿、白屏、跳转闪烁，锅都是前端的。
我们做了几件事：
预加载子应用：在用户hover导航栏“秒杀”按钮时，提前加载子应用JS。
import { loadMicroApp } from 'qiankun'; let preloadedApp = null; navButton.addEventListener('mouseenter', () => { if (!preloadedApp) { preloadedApp = loadMicroApp({ name: 'flash-sale-app', entry: '...' }); } });首屏骨架屏：子应用加载期间，主站显示loading占位图，避免白屏。
错误边界兜底：子应用崩溃时，主站捕获异常并展示友好提示，而不是整个页面挂掉。
意外收获：爬虫也能正常抓取了！
本来没指望SEO，但上线后发现百度爬虫居然能正常索引秒杀页内容！原来qiankun在服务端渲染（SSR）场景下也有方案，但我们没做SSR。后来一查，是因为子应用虽然是客户端渲染，但主站做了基础meta信息注入，且路由结构清晰，爬虫能顺着链接爬进去。
不过为了保险，我们还是在Nginx层做了简单判断：如果是爬虫UA，就直出静态HTML（用Puppeteer预渲染）。这招虽然糙，但有效。
效果如何？数据说话
| 指标 | 单体架构（预估） | 微前端落地后 |
|---|---|---|
| 秒杀页上线周期 | 4周+ | 2周 |
| 主站发布失败率 | 15% | 3% |
| 子应用独立部署次数 | 0 | 27次（双11期间） |
| 首屏加载时间 | - | 1.8s（含子应用） |
最爽的是，双11当天凌晨，活动页出了个样式bug，React团队直接热更新修复，主站完全不受影响。我躺在出租屋里刷着监控面板，看着流量平稳，终于睡了个安稳觉。
写在最后：微前端适合你吗？
如果你是小厂，团队小于10人，业务线清晰但需要快速试错——微前端值得一试。它不是银弹，但能帮你把“大项目”拆成“小项目”，让不同技术栈和平共处。
但别为了用而用。如果你的项目就一个页面，或者团队沟通成本极低，那纯属自找麻烦。
我现在每天8点开工，第一件事就是检查微前端监控日志。虽然偶尔还会遇到沙箱逃逸、内存泄漏这种玄学问题，但比起以前merge冲突到凌晨，现在的“代码人生”舒服多了。
对了，上周五团建，产品经理敬我酒说：“你们技术真牛，页面无缝切换，用户都说像原生一样。”
我笑了笑，没告诉他背后有多少个通宵和多少行脏话。
微前端这玩意儿，用得好是架构，用不好就是“微灾难”。但无论如何，它让我这个小厂后端，第一次觉得自己像个“架构师”了。
评论 0