面试题[微前端]
1. 微前端基础知识
1.1 微前端技术主要解决了哪些问题？适用于什么场景？
微前端技术主要解决了传统前端开发中一些架构层面的问题，具体包括以下几个方面：
- 团队协作问题：传统的前端项目可能存在多个团队共同开发，同一仓库、代码冲突问题频发。微前端可以让每个团队独立开发、独立部署自己的模块，有效地解决了团队协作中的摩擦。
- 技术栈共存问题：不同团队可能有不同的技术选型，传统的单体前端架构难以同时使用多种技术栈。微前端允许不同的子应用使用不同的技术栈，保持各自的灵活性。
- 模块化问题：传统前端项目通常随着功能不断增加变得庞大，难以维护和迭代。微前端通过拆分成多个子应用，实现了真正的模块化，使得项目更加易于维护。
- 独立部署问题：传统前端项目的部署通常需要整体打包、发布，耗时且风险较高。微前端使得各个子应用可以独立部署，减少了发布的风险和时间成本。
微前端技术适用于以下场景：
- 大型复杂项目：尤其是那些由多个团队共同开发的大型项目。
- 多技术栈的项目：例如一个项目中需要同时使用React、Vue等不同的框架。
- 需要频繁迭代和发布的项目：微前端可以使得各个模块独立发布，降低整体项目的发布风险。
- 长生命周期的项目：项目生命周期较长，可能需要不断地加入新技术和模块，通过微前端可以使得系统逐步演进。
除了上述主要问题，微前端还带来了很多潜在的附加价值和技术细节需要了解：
- 历史重构：在一些老旧项目中，全面重构成本太高且风险较大。通过微前端，可以逐步替换老旧模块，逐步实现系统的现代化。
- 性能优化：通过懒加载和按需加载技术，微前端可以显著优化页面性能。每个子应用独立加载，从而减少单个应用的打包体积。
- 自治团队：微前端的架构使得每支团队可以更独立、更自治，从而更快地响应市场变化和需求，提升开发效率。
- 依赖管理：微前端在依赖管理上有独特的挑战，例如如何处理多个子应用间的依赖冲突和共享依赖，使用模块联邦（Webpack Module Federation）等工具可以很好地解决这些问题。
- SEO 和 SSR：如果项目需要很多SEO优化，微前端的实现需要特别注意服务器端渲染（SSR）的问题，各个子应用需要在SSR的上下文中正确渲染。
1.2 在微前端技术选型的时候是如何考虑的
1.3 微前端如何实现作用域隔离
微前端实现作用域隔离涉及解决三个核心问题：JavaScript隔离、样式隔离、元素隔离。以下是对这三个问题的详细解释：
- JavaScript隔离： 在微前端框架中，JavaScript隔离是关键问题之一。它涉及到全局变量污染和事件冲突等情况。解决方法之一是使用沙箱（sandbox）机制。沙箱允许在一个独立的环境中运行程序，可以隔离当前执行环境的作用域和外部其他作用域，确保环境间不受影响。通过使用沙箱，可以实现对全局变量的隔离，避免不同子应用之间相互干扰的情况发生。
- 样式隔离： 在微前端架构中，样式隔离是确保各个子应用之间样式不相互干扰的重要问题。一种常见的解决方案是使用Scoped CSS。Scoped CSS通过给样式选择器添加唯一的作用域属性，实现样式隔离。这样，每个子应用的样式规则只会作用于其自身的组件，不会影响到其他组件，从而保证了样式的独立性和隔离性。
- 元素隔离： 元素隔离是指在微前端架构中确保各个子应用之间的DOM元素不会相互影响。这可以通过使用Web Component中的Shadow DOM来实现。Shadow DOM允许将一个独立的DOM子树附加到元素上，并且这个子树和主文档的DOM树是分开的，从而实现了DOM元素的隔离。每个子应用都可以拥有自己的Shadow DOM，确保了DOM结构的独立性和隔离性。
综上所述，微前端实现作用域隔离需要解决JavaScript隔离、样式隔离和元素隔离这三个关键问题。通过使用沙箱机制、Scoped CSS和Shadow DOM等技术手段，可以有效地实现对代码、样式和DOM结构的隔离，确保各个子应用之间的独立性和稳定性。
1.4 在子应用单独启动的情况下，怎么获取主应用的 cookie 信息
在子应用单独启动的情况下，要获取主应用的cookie信息，通常需要进行跨域访问，并且主应用需要开放相应的跨域访问权限。具体方法如下：
- 跨域访问设置：主应用需要配置允许跨域访问的策略，通常是通过设置CORS（跨源资源共享）策略来实现。可以在主应用的服务器端配置Access-Control-Allow-Origin头部，允许子应用的域名进行跨域访问。
- 在子应用中发送请求：子应用可以通过发送HTTP请求到主应用的服务器来获取cookie信息。这可以是一个简单的GET请求，或者使用XMLHttpRequest、Fetch API等技术。
- 处理响应：主应用服务器收到子应用发送的请求后，如果已经配置了允许跨域访问，会将响应发送给子应用。子应用可以从响应中获取到主应用的cookie信息。
- 处理Cookie：在子应用中接收到主应用的响应后，可以通过相应的方式获取cookie信息，例如，使用Document.cookie属性来获取cookie信息。
需要注意的是，获取主应用的cookie信息可能涉及到安全性和隐私问题，需要确保获取cookie的操作是合法且安全的，同时用户需要明确同意共享这些信息。