技术选型思路
当时对比了single-spa、qiankun和Module Federation三个方案。single-spa配置太复杂，得自己搞定沙箱隔离；Module Federation对Webpack5版本要求高，老项目迁移成本大；最终选择qiankun看中的就是开箱即用的沙箱机制和通信方案。这里特别提醒：如果子应用包含jQuery等老代码，建议开启严格沙箱模式，虽然性能有损耗但能避免全局变量污染。
具体实现步骤
主应用搭建：用vue-cli创建基座工程，安装qiankun后注册子应用。关键配置在main.js里：
子应用改造：重点在webpack配置中设置跨域和publicPath：
样式隔离方案：实测shadow DOM在antd组件下会出现样式丢失，最终采用css-scoped方案+约定样式前缀的方式解决。建议子应用统一使用BEM命名规范，比如.vue-app__button这样的类名结构。
踩坑实录
路由冲突：主应用用hash模式时，子应用history模式的路由跳转会失效。解决方案是所有应用统一使用history路由，nginx配置需要增加try_files uri uri/ /index.html;
资源加载：子应用字体文件路径错误导致图标丢失。需要在子应用webpack配置__webpack_public_path__动态路径：
数据通信：初期直接使用window全局通信导致数据流混乱，后来改用qiankun的initGlobalState配合actions通信，严格遵循单向数据流原则。
性能优化点
预加载策略：非首屏子应用配置prefetch，比如用户停留在首页时预加载管理后台的静态资源
依赖共享：将react、vue等基础库提到externals，主应用统一加载避免重复
缓存策略：子应用打包文件名增加contenthash，充分利用浏览器缓存
目前这套架构已稳定运行三个月，支持了6个业务团队的并行开发。虽然初期搭建花了三周时间，但后期新功能上线效率提升40%以上。个人觉得微前端特别适合中后台管理系统，不同团队可以独立技术选型，老项目也能逐步迁移。不过要注意如果业务关联紧密且交互复杂，还是建议优先考虑单体应用，毕竟微前端带来的复杂度提升是实打实的。
最近发现qiankun官方出了2.0版本预告，据说要支持Vite生态，等正式发布后准备在测试环境升级试试。各位如果在落地过程中遇到具体问题，欢迎在评论区交流讨论~