共 12 道 微前端 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。
微前端 是将大型前端应用拆分为多个独立的小应用，各自开发、部署、运行。 为什么需要微前端 - 巨石应用难以维护 ：一个项目几百万行代码 - 独立部署 ：各团队独立发布 - 技术栈无关 ：不同子应用可以…
前端架构演进 1. BFF（Backend for Frontend） 为前端定制的后端层，聚合多个微服务的数据。 优势： - 前端只需一次请求获取所有数据 - 避免前端直接依赖多个服务 - 可以做数…
微前端 是把前端应用 按业务/团队拆成多个独立开发、独立部署、运行时组合 的架构，类比后端的微服务。 解决的问题 ： - 巨石应用（monolith）越来越大、构建慢、技术栈锁定 - 多个团队想用不同…
qiankun 是阿里开源、基于 single-spa 的微前端方案，采用「 主应用（基座）+ 子应用 」模式： 1. 注册子应用 ：主应用用 registerMicroApps 声明子应用的入口（H…
几种隔离手段： 1. Shadow DOM （最强）：把子应用挂到 Shadow Root 内，样式天然不泄漏（但弹窗/全局样式会受限，且部分 UI 库兼容性差） 2. 动态样式表 + 作用域前缀 ：…
JS 沙箱让多个子应用 互不污染全局变量（window） 。 - 快照沙箱（Snapshot） ：子应用挂载前记录 window 快照，卸载时还原、挂载时恢复各自的增改。实现简单，但 不支持多个子应用…
常见方式： 1. 主应用下发 props ：qiankun 在注册子应用时通过 props 传入共享状态/方法，子应用在 mount(props) 接收 2. 全局状态（Shared State） ：…
每个子应用都打包一份 React/Vue 会 体积爆炸、且多份 React 实例导致状态不互通 。解决方案： 1. externals + CDN ：主应用通过 <script 引入 React 并挂…
主应用需要 统一控制哪个子应用被激活 ，因此要劫持路由： - hash 路由 ：监听 hashchange，根据 /sub-a/... 前缀激活对应子应用（简单、不依赖服务端） - history 路…
优点（隔离最彻底） ： - 浏览器原生隔离：JS 沙箱、样式隔离、DOM 隔离 天然成立 ，几乎零冲突 - 独立部署、独立运行，技术栈完全无关 缺点 ： - 通信麻烦 ：父子/子子间靠 postMes…
Module Federation（Webpack5/Vite 插件）让 多个独立构建的应用在运行时互相加载对方导出的模块 ，天然适合微前端： 与 qiankun 区别 ： - qiankun： 基座…
微前端是 多应用独立部署 ，需注意： 1. 入口解耦 ：子应用独立构建部署到各自域名/CDN，主应用只配置入口 URL（不打包子应用代码） 2. 版本协商 ：用 Module Federation 的…