iframe在线预览

也点击右上角「在线预览↗」进行全屏预览

什么是微前端

微前端核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署并且每个应用之间存在环境隔离(JS/css/dom隔离)，这些小型应用融合为一个完整的应用。

它主要解决了以下问题：

1. 随着项目迭代应用越来越庞大，难以维护。微前端可以将较大的单一项目拆分成多个子应用。

2. 跨团队或跨部门协作开发权限不足等问题导致效率低下的问题。

3. 相比于联邦模块, 微前端对不同应用的进行了js/css/dom隔离，可以减少代码影响。

4. 可以更大限度的复用第三方资源。

5. 子应用可使用不同的技术栈或同一技术栈不同版本进行开发。

现有的微前端框架

微前端框架	micro-app（京东）	qiankun（阿里）	wujie（腾讯）
原理	web-component	single-spa	web-component
是否原生支持vite	是	否（社区提供方案支持）	是
接入成本	最低	高	较低
优点	扩展性非常强	相对稳定	-
缺点	1.0正式版本还未发布	相对没有那么灵活	shadowDom不支持样式穿透 主应用不好控制子应用样式 父应用无法直接控制子应用路由跳转...

微前端 vs 联邦模块

联邦模块也可以实现应用拆分，但它和微前端的区别也是明显的:

• 联邦模块没有沙箱功能, 无法隔离js/css/dom/路由, 也就是说子应用之间很有可能会相互影响, 比如子应用A和B同时注册了一个路由.

• 联邦模块无法跨框架使用, vue3和vue2、react没法混合开发.

• 联邦模块要求对项目进行改造, 如果要接入的项目你没有权限过多进行修改就很麻烦.

• 联邦模块更适合在新的项目使用而不是无缝接入旧的系统.

如果你的项目刚好避开了这些缺陷,那么你可以使用联邦模块.

你需不需要微前端

如果有下列需求，那么微前端可能解决你的问题；反之，你可能没那么需要微前端。

1. 项目过大, 需要进行项目拆分

比如项目页面总数超过200个

2. 不同项目技术栈不一样

如vue3/vue2/react项目的融合

3. 需要融合第三方项目

不修改第三方网站的情况下嵌套第三方的网页，并进行部分模块的隐藏（比如隐藏第三方网站的头部，侧边栏，广告等...）

4. 有跨项目/跨框架公共组件的需求

比如一个复杂的业务组件需要在多个项目中使用，不同项目技术栈可能不同，且更新可能较为频繁

5. 要求无缝切换应用、应用之间切换频繁

如果不同项目之间的跳转是重新加载整个网页，那么会有一段时间的白屏