[TOC] >[success] # 微前端实现方式对比 **Iframe 、web component、自研框架** >[success] ## Iframe 方式实现 1. **优势**： * **Iframe** 的技术相对来讲比较成熟 * 支持 **页面嵌入** * 天然支持运行 **沙箱隔离、独立运行** 2. **劣势**： * 不同页面之间 **域名不一样 ，就会导致鉴权的问题跨域等等增加开发量** * **需要对应的设计一套 应用通讯机制，如何监听、传参格式等内容** * **应用加载、渲染、缓存等体系的表现** >[success] ## web component 方式实现 **web component** 是 **h5** 的一项 **新技术** ，支持我们自己 **定义自己的一些组件和标签去使用** 1. **优势**： * 支持 **自定义元素** * 支持 **shadow dom** ，并可通过关联进行控制 * 支持 **模板 template** 和 **插槽 slot ，引入自定义组件内容** 2. **劣势**： * **接入微前端需要重写当前项目** * **生态系统不完善，技术过新容易出现兼容性问题** * **整体架构设计复杂，组件与组件之间拆分过细时，容易造成通讯和控制繁琐** >[success] ## 自研框架 1. **优势**： * **高度定制化，满足需要做兼容的一切场景** * **独立的通信机制和沙箱运行环境，可解决应用之间相互影响的问题** * **支持不同技术栈子应用，可无缝实现页面无刷新渲染** 2. **劣势**： * **技术实现难度较高** * **需要设计一套定制的通信机制** * **首次加载会出现资源过大的情况** >[success] ## 最终实现 - 自研框架 * 路由分发式 * 主应用控制路由匹配和子应用加载，共享依赖加载 * 子应用做功能，并接入主应用实现主子控制和联动