微前端实现方式对比

一、Iframe

优势:

1、技术成熟

2、支持页面嵌入

3、天然支持运行沙箱隔离,独立运行

劣势:

1、页面之间可以是不同域名

2、需要对应的设计一套应用通讯机制,如何监听、传参格式等内容

3、应用加载、渲染、缓存等体系的实现

二、web component

优势:

1、支持自定义元素

2、支持shadow dom,并可通过关联进行控制

3、支持模板template和插槽slot,引入自定义组件内容

劣势:

1、接入微前端需要重新当前项目

2、生态系统不完善,技术过新容易出现兼容问题

3、整体框架设计复杂,组件与组件之间拆分过细时,容易造成通讯和控制繁琐

三、自研框架

优势:

1、高度定制化,满足需要做兼容的一切场景

2、独立的通讯机制和沙箱运行环境,可以解决应用之间相互影响的问题

2、支持不同技术栈子应用,可无缝实现页面无刷新渲染

劣势:

1、技术实现难度较高

2、需要设计一套定制的通讯机制

3、首次加载会出现资源过大的情况

放弃安逸,持续努力——成长
原文地址:https://www.cnblogs.com/MarsPGY/p/15550672.html