互联网大厂200道高频微前端技术面试题

微前端篇

1. 什么是微前端？它解决了什么问题？

答案解析
微前端是一种将前端应用拆分为多个独立模块的技术架构，每个模块可以由不同团队开发、部署和维护。它借鉴了微服务的思想，解决了传统单体前端应用在大型项目中的以下问题：

• 团队协作：多个团队并行开发，避免代码冲突。
• 技术栈异构：支持不同技术栈（如 React、Vue、Angular）共存。
• 独立部署：每个模块可独立上线，提升发布效率。
• 规模扩展：解决单体应用代码臃肿、维护困难的问题。

应用场景：电商平台（如淘宝）的商品详情、支付模块可独立开发。

---

2. 微前端与传统单体前端的区别是什么？

答案解析

• 架构：单体前端是一个整体应用，微前端是多个子应用的组合。
• 部署：单体前端一次部署整个应用，微前端支持子应用独立部署。
• 技术栈：单体前端通常使用单一技术栈，微前端允许多技术栈共存。
• 耦合性：单体前端模块间耦合度高，微前端通过约定解耦。

代码示例（单体 vs 微前端结构）：

// 单体前端
const App = () => (
  <div>
    <Header />
    <MainContent />
    <Footer />
  </div>
);

// 微前端
const MicroApp1 = () => <Header />;
const MicroApp2 = () => <MainContent />;
const MicroApp3 = () => <Footer />;

---

3. 微前端的核心原则有哪些？

答案解析

• 技术无关性：子应用可自由选择技术栈。
• 独立性：每个子应用独立开发、测试、部署。
• 隔离性：子应用间互不干扰（JS、CSS 隔离）。
• 通信性：提供统一通信机制（如事件总线）。
• 组合性：主应用负责加载和整合子应用。

---

4. 微前端有哪些常见的实现方案？

答案解析

• iframe：通过 iframe 嵌入子应用，简单但性能差。
• Web Components：利用 Shadow DOM 实现隔离，适合小型模块。
• qiankun：基于 single-spa 的微前端框架，支持 JS/CSS 隔离和预加载。
• single-spa：轻量级微前端框架，提供路由和生命周期管理。
• Module Federation：Webpack 5 的模块联邦，支持动态加载模块。

---

5. single-spa 的工作原理是什么？

答案解析
single-spa 是一个微前端框架，通过注册子应用并管理其生命周期（load、bootstrap、mount、unmount）实现动态加载。它的工作流程如下：

1. 注册子应用：定义子应用的入口和生命周期函数。
2. 路由匹配：根据 URL 激活对应子应用。
3. 生命周期管理：加载、挂载或卸载子应用。

代码示例：

import {
   
    registerApplication, start } from 'single-spa';

registerApplication({
   
   
  name: 'app1',
  app: () => import('./app1.js'),
  activeWhen: '/app1',
});

start();

---

6. qiankun 与 single-spa 的区别是什么？

答案解析

• 基础：qiankun 基于 single-spa，增加了更多功能。
• 隔离：qiankun 提供 JS 沙箱（Proxy Sandbox）和 CSS 隔离，single-spa 不原生支持。
• 预加载：qiankun 支持子应用预加载，single-spa 需要手动实现。
• 易用性：qiankun 开箱即用，single-spa 配置更灵活但复杂。

---

7. 如何在微前端中实现 JS 隔离？

答案解析
JS 隔离防止子应用间的全局变量冲突，常见方法：

• 沙箱（Sandbox）：使用 Proxy 或 with 语句隔离全局作用域。
• 命名空间：为每个子应用分配独立命名空间。
• 闭包：将子应用逻辑封装在闭包中。

代码示例（Proxy Sandbox）：

const sandbox = new Proxy(window, {
   
   
  get(target, key) {
   
   
    return target[key];
  },
  set(target, key, value) {
   
   
    if (!target.hasOwnProperty(key)) target[key] = value;
    return true;
  },
});

---

8. 如何在微前端中实现 CSS 隔离？

答案解析
CSS 隔离避免样式冲突，方法包括：

• BEM 命名：通过命名约定区分样式。
• CSS Modules：生成唯一类名。
• Shadow DOM：利用 Web Components 隔离样式。
• 动态样式：运行时为子应用添加前缀。

代码示例（动态前缀）：

function prefixStyles(appName, styles) {
   
   
  return styles.replace(/([.#]?[\w-]+)/g, `${
     
     appName}-$1`);
}

---

9. 微前端中的通信机制有哪些？

答案解析

• Props：主应用通过属性传递数据给子应用。
• 事件总线：使用 CustomEvent 或 Pub/Sub 模式。
• 全局状态：通过 Redux 或 Context 共享状态。
• URL 参数：通过路由传参。

代码示例（事件总线）：

// 主应用发送事件
window.dispatchEvent(new CustomEvent('app1-event', {
   
    detail: {
   
    data: 'hello' } }));

// 子应用监听
window.addEventListener('app1-event', (e) => console.log(e.detail.data));

---

10. 微前端如何处理路由？

答案解析

• 主应用路由：主应用控制路由，子应用通过约定路径激活。
• 子应用路由：子应用内部管理路由，主应用监听 URL 变化。
• 混合路由：主应用和子应用协作完成路由管理。

代码示例（single-spa 路由）：

registerApplication({
   
   
  name: 'app2',
  app: () => import('./app2.js'),
  activeWhen: (location) => location.pathname.startsWith('/app2'),
});

---

11. Module Federation 在微前端中的作用是什么？

答案解析
Module Federation 是 Webpack 5 的功能，允许动态加载远程模块：

• 共享模块：多个子应用共享依赖（如 React）。
• 动态加载：运行时加载其他应用的模块。
• 去中心化：无需主应用即可实现模块集成。

代码示例（webpack.config.js）：

module.exports = {
   
   
  plugins: [
    new ModuleFederationPlugin({
   
   
      name: 'app1',
      remotes: {
   
    app2: 'app2@http://localhost:3002/remoteEntry.js' },
      shared: {
   
    react: {
   
    singleton: true } },
    }),
  ],
};

---

12. 如何在微前端中实现子应用的预加载？

答案解析
预加载提升首次加载速度，方法包括：

• 手动预加载：在主应用中提前加载子应用脚本。
• qiankun 预加载：使用内置的 prefetch 功能。
• 懒加载：结合路由动态加载。

代码示例（手动预加载）：

function preloadApp(url) {
   
   
  const script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}
preloadApp('http://app1.com/app.js');

---

13. 微前端如何处理依赖冲突？

答案解析

• 版本隔离：每个子应用使用独立依赖版本。
• 共享依赖：通过 Module Federation 或 externals 指定单一版本。
• 沙箱隔离：避免依赖污染全局环境。

代码示例（externals）：

module.exports = {
   
   
  externals: {
   
    react: 'React', 'react-dom': 'ReactDOM' },
};

---

14. 微前端的性能优化有哪些策略？

答案解析

• 懒加载：按需加载子应用。
• 预加载：提前加载关键子应用。
• 缓存：利用浏览器缓存静态资源。
• 压缩：对 JS/CSS 进行压缩和 Tree Shaking。
• CDN：加速资源加载。

---

15. 微前端如何实现统一的错误处理？

答案解析

• 全局监听：主应用监听 window.onerror 和 unhandledrejection。
• 子应用上报：子应用通过事件或 API 上报错误。
• 日志收集：集成 Sentry 或自定义日志系统。

代码示例：

window.onerror = (msg, url, line) => {
   
   
  console.error(`Error: ${
     
     msg} at ${
     
     url}:${
     
     line}`);
};

---

16. 微前端如何实现跨子应用的全局状态管理？

答案解析

• Redux：主应用维护全局 Store，子应用通过事件同步。
• Context API：React 项目中使用 Context 共享状态。
• 事件总线：通过发布/订阅模式同步状态。

代码示例（Redux）：

const store = createStore(reducer);
window.dispatchEvent(new CustomEvent('state-update', {
   
    detail: store.getState() }));

---

17. 微前端如何处理版本兼容性？

答案解析

• 语义化版本：子应用遵循 SemVer，控制依赖升级。
• 主应用适配：主应用提供兼容层（如 polyfill）。
• 灰度发布：逐步升级子应用，验证兼容性。

---

18. 微前端的安全性问题有哪些？

答案解析

• XSS：子应用可能引入恶意脚本。
• 数据泄露：子应用间通信可能泄露敏感数据。
• 资源加载：外部脚本加载可能被劫持。

解决方法：

• 使用 CSP（内容安全策略）。
• 加密通信数据。
• 验证资源来源。

---

19. 如何在微前端中实现单点登录（SSO）？

答案解析

• 主应用认证：主应用完成登录，子应用通过 Token 验证。
• 共享 Token：通过 localStorage 或 Cookie 共享登录态。
• OAuth：集成 OAuth 2.0 实现统一认证。

代码示例：

const token = localStorage.getItem('authToken');
if (token) mountApp();

---

20. 微前端如何实现动态主题切换？

答案解析

• CSS 变量：主应用定义全局变量，子应用使用。
• 事件通知：主应用通过事件通知子应用切换主题。
• 独立主题：子应用各自管理主题，主应用协调。

代码示例：

:root {
   
   
  --primary-color: #007bff;
}

window.dispatchEvent(new CustomEvent('theme-change', {
   
    detail: 'dark' }));

---

21. 微前端如何处理 SEO？

答案解析

• SSR：子应用支持服务端渲染。
• 预渲染：生成静态 HTML 供爬虫抓取。
• 主应用代理：主应用统一处理 SEO 元数据。

---

22. 微前端的部署策略有哪些？

答案解析

• 独立部署：每个子应用单独部署到 CDN 或服务器。
• 统一部署：主应用和子应用打包在一起部署。
• 灰度部署：部分子应用先上线，逐步推广。

---

23. 如何在微前端中实现 A/B 测试？

答案解析

• 路由分流：主应用根据条件加载不同子应用版本。
• 动态加载：运行时加载不同模块。
• 数据埋点：收集用户行为，分析效果。

代码示例：

const version = Math.random() > 0.5 ? 'app1-v1' : 'app1-v2';
registerApplication({
   
    name: version, app: () => import(`./${
     
     version}.js`) });

---

24. 微前端如何处理子应用的生命周期？

答案解析

• 加载（load）：获取子应用资源。
• 启动（bootstrap）：初始化子应用。
• 挂载（mount）：渲染子应用到 DOM。
• 卸载（unmount）：移除子应用。

代码示例（qiankun）：

export async function bootstrap() {
   
   }
export async function mount(props) {
   
   }
export async function unmount() {
   
   }

---

25. 微前端如何实现多语言支持？

答案解析

• 主应用管理：主应用提供语言包，子应用消费。
• 子应用独立：每个子应用维护自己的语言文件。
• 动态切换：通过事件通知切换语言。

代码示例：

window.addEventListener('language-change', (e) => setLanguage(e.detail));

---

26. 微前端如何处理大型表单？

答案解析

• 分片管理：将表单拆分为多个子应用。
• 数据同步：通过事件总线或全局状态同步表单数据。
• 校验统一：主应用协调校验逻辑。

---

27. 微前端如何实现热更新？

答案解析

• Webpack HMR：子应用集成热模块替换。
• 动态加载：主应用检测版本变化后重新加载子应用。
• 服务端推送：通过 WebSocket 通知更新。

---

28. 微前端如何处理跨域问题？

答案解析

• CORS：配置服务端允许跨域。
• 代理：主应用代理子应用请求。
• JSONP：适用于简单数据获取（不推荐）。

---

29. 微前端如何实现统一的日志系统？

答案解析

• 主应用收集：子应用通过 API 上报日志。
• 事件分发：使用事件总线传递日志。
• 第三方集成：使用工具如 Logstash 或 ELK。

代码示例：

function log(message) {
   
   
  window.dispatchEvent(new CustomEvent('log', {
   
    detail: message }));
}

---

30. 微前端如何处理子应用间的依赖共享？

答案解析

• Module Federation：共享公共依赖。
• externals：将依赖提取为外部资源。
• 手动注入：主应用提供依赖给子应用。

---

31. 微前端如何实现动态路由注册？

答案解析

• 运行时注册：子应用启动时向主应用注册路由。
• 配置文件：通过 JSON 配置路由表。
• 事件通知：子应用通过事件通知路由变化。

代码示例：

window.dispatchEvent(new CustomEvent('register-route', {
   
    detail: {
   
    path: '/app1', app: 'app1' } }));

---

32. 微前端如何处理子应用的权限控制？

答案解析

• 主应用控制：主应用根据权限加载子应用。
• 子应用自检：子应用内部校验权限。
• Token 传递：通过 props 或事件传递权限信息。

---

33. 微前端如何实现统一的 UI 组件库？

答案解析

• 共享组件：通过 Module Federation 共享组件库。
• 独立维护：每个子应用使用相同版本的组件库。
• 动态加载：主应用提供组件给子应用。

---

34. 微前端如何处理大数据量渲染？

答案解析

• 虚拟列表：子应用使用虚拟滚动技术。
• 分片加载：按需加载数据块。
• 主应用协调：主应用分配渲染任务。

---

35. 微前端如何实现子应用的单元测试？

答案解析

• 独立测试：子应用单独编写测试用例。
• Mock 主应用：模拟主应用的 props 和事件。
• 集成测试：验证子应用与主应用的交互。

代码示例（Jest）：

jest.mock('main-app', () => ({
   
    mount: jest.fn() }));

---

36. 微前端如何处理子应用的构建优化？

答案解析

• 按需打包：只打包子应用所需模块。
• Tree Shaking：移除未使用代码。
• 分包：将公共依赖提取为单独 chunk。

---

37. 微前端如何实现子应用的监控？

答案解析

• 性能监控：使用 Performance API 记录加载时间。
• 错误监控：捕获子应用异常并上报。
• 行为监控：埋点收集用户交互数据。

---

38. 微前端如何处理子应用的回退机制？

答案解析

• 版本管理：保存旧版本子应用地址。
• 动态切换：主应用检测异常后加载旧版本。
• 灰度回滚：逐步切换到旧版本。

---

39. 微前端如何实现子应用的动态配置？

答案解析

• 配置文件：子应用加载外部 JSON 配置。
• 事件推送：主应用通过事件传递配置。
• API 获取：子应用从服务端动态获取配置。

---

40. 微前端如何处理子应用的离线缓存？

答案解析

• Service Worker：子应用注册独立的 SW。
• 主应用协调：主应用管理所有子应用的缓存。
• 本地存储：使用 localStorage 保存关键数据。

---

41. 微前端如何实现子应用的国际化？

答案解析

• 主应用提供：主应用分发语言包。
• 子应用独立：子应用内置多语言支持。
• 动态加载：运行时加载语言文件。

---

42. 微前端如何处理子应用的动态权限？

答案解析

• 事件通知：主应用通知权限变化。
• 状态同步：通过全局状态更新权限。
• API 验证：子应用实时查询权限。

---

43. 微前端如何实现子应用的懒加载？

答案解析

• 路由触发：路由匹配时加载子应用。
• Intersection Observer：可见时加载子应用。
• 手动控制：通过用户交互加载。

代码示例：

const observer = new IntersectionObserver((entries) => {
   
   
  if (entries[0].isIntersecting) import('./app1.js');
});

---

44. 微前端如何处理子应用的版本检测？

答案解析

• 服务端校验：子应用启动时检查版本。
• 主应用管理：主应用维护版本表。
• 事件通知：子应用上报版本信息。

---

45. 微前端如何实现子应用的动态卸载？

答案解析

• 生命周期管理：调用 unmount 方法。
• 路由控制：路由切换时卸载子应用。
• 手动触发：通过事件卸载指定子应用。

---

46. 微前端如何处理子应用的资源预加载？

答案解析

• Link Preload：使用 <link rel="preload"> 提前加载。
• 动态脚本：运行时加载资源。
• qiankun 集成：利用 prefetch 功能。

---

47. 微前端如何实现子应用的动态组合？

答案解析

• 配置驱动：通过配置文件组合子应用。
• 运行时注册：动态注册子应用。
• 条件加载：根据条件加载不同子应用。

---

48. 微前端如何处理子应用的并发加载？

答案解析

• Promise.all：并行加载多个子应用。
• 队列管理：控制加载顺序和并发数。
• 懒加载：延迟非关键子应用加载。

代码示例：

Promise.all([import('./app1.js'), import('./app2.js')]).then(