技术方案	特点	通信方式	优点	缺点
基于Web Components	使用 Web Components的四个主要技术： Custom Elements、Shadow DOM、HTML Templates、HTML Imports。 将前端应用程序拆分为多个Web Components。	CustomEvent	标准化技术，具有广泛的浏览器支持 高内聚、低耦合，易于维护和扩展良好的封装性和隔离性 Shadow DOM 天生的作用域隔离	需要一定的学习成本来掌握Web Components的使用 浏览器兼容性问题 可能需要额外处理不支持全局样式和JavaScript的共享 修改样式困难
基于自定义元素和Shadow DOM	使用自定义元素封装微前端应用， 并使用Shadow DOM提供隔离性。		高内聚、低耦合，易于维护和扩展良好的封装性和隔离性 支持自定义元素和Shadow DOM的浏览器兼容性较好	需要一定的学习成本来掌握自定义元素和Shadow DOM的使用 不支持全局样式和JavaScript的共享可能受到浏览器
基于iframe	使用iframe将每个微前端应用嵌入到主框架中，实现隔离。	postMessage	简单、快速 实现良好的隔离性，避免样式和全局变量的冲突 支持跨域通信	性能开销较大，因为每个iframe都是独立的浏览器上下文 难以共享资源，如全局状态、数据等页面刷新和导航问题 用户体验差：弹窗只能在 iframe中，在内部切换刷新会丢失状态
基于微服务网关路由分发	使用微服务网关作为微前端应用的代理和调度器， 根据请求转发到不同的微前端应用。		支持跨域请求和API网关功能 可以实现统一的身份认证和权限管理 灵活性强，支持多种微前端技术	实现复杂，需要配置和维护微服务网关 对网络通信有较高要求可能增加额外的性能开销
基于单页面应用（SPA）	通过在主框架中配置路由， 根据路由加载不同的微前端应用。		简单易用，适用于SPA架构 支持全局状态和数据共享 易于集成第三方库和框架	隔离性较差，样式和全局变量可能冲突 对SPA架构有依赖，不适合传统多页面应用 需要处理路由冲突和嵌套问题兼容性的限制
Module fedearation	webpack5 的模块联邦机制		通过模块联动将组件打包导出 共享模块的方式通信<	无 CSS 沙箱和 JS 沙箱 需要 webpack5

什么是微前端？

微前端是一种技术手段及方法策略，旨在通过多个团队独立发布功能的方式，共同构建现代化的Web应用。

它借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用（即微应用），每个微应用都可以独立开发、独立运行、独立部署，然后再将这些小型应用联合为一个完整的应用。

目标

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，确保微应用真正具备独立开发、独立运行的能力。

这种架构既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性。相比一整块的前端仓库，微前端架构下的前端仓库更小、更灵活。