1. 什么是微前端？它的核心价值是什么？
答案：
微前端是一种将前端应用拆分为独立模块的架构模式，每个模块可由不同团队独立开发、测试、部署和运行。其核心价值包括：
- 技术栈无关性：支持 React、Vue、Angular 等不同框架共存。
- 独立部署：子应用可独立更新，降低整体风险。
- 团队自治：跨团队协作时减少耦合，提升开发效率。
- 渐进式升级：老系统可逐步替换，避免重写。
2. 微前端常见实现方案有哪些？对比它们的优缺点。
答案：
- 方案对比 ：
- iframe：天然隔离，但通信复杂、性能差、SEO 不友好。
- Web Components：浏览器原生支持，但生态较弱，兼容性要求高。
- Module Federation（Webpack 5）：动态加载远程模块，高效但依赖构建工具。
- Single-SPA：路由驱动的微前端框架，灵活但需统一生命周期管理。
- qiankun：基于 Single-SPA，提供沙箱和样式隔离，开箱即用，适合复杂场景。
3. 如何实现微前端的样式隔离？
答案：
- CSS Scoped ：通过
scoped属性或 CSS Modules 限定组件样式。 - Shadow DOM：利用浏览器原生隔离，但可能影响全局样式穿透。
- 动态前缀 ：构建时自动添加命名空间（如
qiankun的样式重写）。 - CSS-in-JS：通过运行时生成唯一类名（如 styled-components）。
- 沙箱隔离：运行时动态修改样式表作用域（常见于 JS 沙箱方案）。
4. 微前端中的 JS 沙箱如何实现？有哪些技术方案？
答案：
JS 沙箱用于隔离子应用的全局变量污染，常见方案：
- 快照沙箱：在子应用加载前保存全局状态，卸载时恢复（适合单实例场景）。
- Proxy 沙箱 ：通过 ES6 Proxy 代理
window对象，实现多实例隔离（如qiankun的ProxySandbox）。 - iframe 沙箱：利用 iframe 的天然隔离性，但通信成本高。
5. 微前端子应用间如何通信？
答案：
- Custom Events ：通过浏览器原生
CustomEvent发布订阅事件。 - 状态管理库：共享 Redux 或 Vuex Store（需主应用协调）。
- URL 参数：通过路由传参或 Query String 同步状态。
- 全局变量：主应用挂载共享对象（需谨慎使用，可能引发冲突）。
- Event Bus：基于 Mitt 或自定义事件中心实现跨应用通信。
6. 如何优化微前端的性能？
答案：
- 按需加载：子应用路由懒加载，减少首屏资源体积。
- 预加载策略：空闲时预加载潜在子应用资源。
- 共享依赖：通过 Module Federation 复用公共库（如 React、Lodash）。
- 缓存策略：对子应用的静态资源设置长期缓存（Hash 命名）。
- 代码拆分：子应用内部按功能拆分 Chunk，避免单一文件过大。
7. 微前端部署时需要注意哪些问题？
答案：
- 独立部署：确保子应用可独立发布，不影响主应用和其他子应用。
- 版本兼容性：主应用与子应用的 API 或通信协议需向后兼容。
- CDN 加速：子应用资源托管到 CDN，提升加载速度。
- 灰度发布：通过 Feature Flag 或路由配置逐步放量子应用新版本。
- 回滚机制：子应用异常时快速切换至旧版本。
8. Server Components 对微前端架构有何影响？
答案：
Server Components 将部分逻辑移至服务端渲染，可能改变微前端的实现模式：
- 混合渲染：主应用为 CSR，子应用为 SSR 或 Server Components。
- 数据获取优化：减少客户端与子应用的数据请求链。
- 动态组合：服务端按需组合微前端模块，提升首屏性能。
- 挑战：需解决服务端与客户端的生命周期协同问题。
9. 如何实现微前端的自动化测试？
答案：
- 单元测试：子应用独立测试（Jest、Vitest）。
- 集成测试：主应用与子应用联合测试（Cypress、Playwright）。
- Mock 沙箱环境：模拟主应用环境验证子应用挂载。
- 契约测试：确保主应用与子应用的接口协议一致（Pact）。
- 可视化测试：通过 Storybook 维护子应用 UI 一致性。
10. 微前端与微服务的协同设计需要注意什么？
答案：
- 垂直拆分：前后端微模块对齐，避免一个前端对应多个后端服务。
- API 网关：统一后端接口聚合，减少前端跨服务调用。
- 鉴权同步：共享 Token 或 Cookie，确保身份验证一致性。
- 错误隔离：后端服务故障不应导致前端整体崩溃。
- 监控一体化：前后端日志、链路追踪（如 OpenTelemetry）整合。
11. 如何处理微前端中的第三方依赖冲突？
答案：
- 依赖提升 ：主应用统一提供公共库（如 React、Vue），子应用通过
externals排除。 - Module Federation：共享依赖并指定版本范围（Webpack 5）。
- UMD 加载 ：通过全局变量注入依赖（如
window.React）。 - 动态加载：子应用按需加载不同版本依赖（可能增加包体积）。
12. 微前端如何实现权限控制和路由管理？
答案：
- 集中式路由：主应用控制全局路由，按权限动态注册子应用路由。
- 子应用自治：子应用内部路由自行管理，但需同步主应用的路由状态。
- 权限下发：主应用获取用户权限后，通过 Props 或 Event 传递至子应用。
- 路由守卫：主应用拦截导航，验证权限后再加载子应用。