微前端方案

1.iframe

传统的是使用iframe,切换iframe的src实现切换页面。

优点：

• 多工程、多页面打包的情况适用。

缺点：

• iframe性能差。
• 不能使用redux：因为换掉页面的话，就把window对象换掉了，redux是同一个window下使用1个。
• 每次打开菜单页面都要重新加载所有的静态资源（虽然使用多页面打包能缓解这个问题带来的白屏影响，因此这个可以用在多页面打包中）

2.react-router

App.js入口文件中使用菜单框架组件，嵌入路由切换组件，即原App.js中的内容。菜单框架组件内容区域展示props.children。需要设一个初始的/路由对应组件。

优点：

• 规避了iframe方案的缺点。
• 可以很方便的使用redux，面包屑列表可以使用redux维护。

缺点：

• 不适用多工程、多页面打包的情况。

在 https://gitee.com/chenxiaoyi27/std-front-cms 中更新了使用第二种方式的示例工程。

3.qiankun等第三方插件

目前还没有使用过，后面使用了再更新细节。

大概了解过，需要将菜单组件抽离到一个工程中，里面嵌的页面需要是另外的工程，因此也支持多个工程。因此简单的单个工程中做微前端，可以使用第二种方式。