第十九章(微前端 面试真题)

面试真题

题目 1：微前端概念

什么是微前端？

答案：

• 将前端应用拆分为独立部署的模块
• 每个模块可独立开发、测试、部署
• 聚合为一个完整应用
• 解决大型前端项目维护困难

题目 2：微前端方案

常见的微前端方案有哪些？

答案：

• iframe：简单但体验差
• Web Components：原生方案
• Module Federation：Webpack 5
• qiankun：基于 single-spa
• single-spa：基座方案

题目 3：qiankun

qiankun 的工作原理

答案：

• 基于 single-spa
• 统一管理子应用生命周期
• CSS 样式隔离
• JS 沙箱隔离
• 通信机制

题目 4：应用隔离

微前端如何实现应用隔离？

答案：

• JS 沙箱：代理全局变量
• CSS 隔离：Shadow DOM、CSS Modules
• 样式前缀
• 命名空间

题目 5：应用通信

微前端应用间如何通信？

答案：

• props 传递
• 自定义事件
• 消息队列
• 共享状态库
• LocalStorage

题目 6：路由管理

微前端中如何管理路由？

答案：

• 主应用管理整体路由
• 子应用使用 hash 路由
• 路由劫持
• 配置式路由

题目 7：共享依赖

微前端如何处理公共依赖？

答案：

• webpack shared
• CDN 共享
• 主应用提供
• 按需加载

题目 8：Module Federation

Webpack 5 Module Federation 特点

答案：

• 运行时共享模块
• 独立构建部署
• 异步加载
• 共享依赖

题目 9：适用场景

哪些场景适合微前端？

答案：

• 大型后台管理系统
• 多团队协作
• 老项目改造
• 独立模块复用

题目 10：缺点

微前端的缺点

答案：

• 复杂度高
• 性能开销
• 调试困难
• 样式冲突
• 依赖共享问题

题目 11：子应用加载

子应用的加载流程

答案：

• 注册子应用
• 监听路由变化
• 匹配子应用
• 加载子应用资源
• 渲染子应用

题目 12：生命周期

qiankun 的生命周期有哪些？

答案：

• bootstrap：初始化
• mount：挂载
• unmount：卸载
• update：更新（可选）

题目 13：CSS 隔离

微前端 CSS 隔离方案

答案：

• CSS Modules
• Shadow DOM
• 样式前缀
• BEM 规范
• postcss plugins

题目 14：独立部署

微前端如何实现独立部署？

答案：

• 子应用独立构建
• 部署到独立域名/CDN
• 主应用配置子应用地址
• 版本管理

题目 15：技术选型

如何选择微前端方案？

答案：

• 项目规模
• 团队技术栈
• 维护成本
• 性能要求
• 浏览器兼容性