当前位置：首页 > news >正文

qiankun知识点

news 2025/10/18 8:28:28

1，什么是微前端

1，微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。
2，如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。
3，一般呢，微前端多应用于企业中的中后台项目中，因为企业内部的中后台项目存活时间都比较长，动辄三五年或者更多，最后演变成一个巨石应用的概率往往高于其他类型的web应用。这就带来了技术栈落后

2，微前端的好处

1，团队自治:在公司里面，一般团队都是按照业务去划分的，在没有微前端的时候，如果几个团队维护一个项目肯定会遇到一些冲突，比如合并代码的冲突，上线时间的冲突等。应用了微前端之后，就可以将项目根据业务模块拆分成几个小的模块，每个模块都由不同的团队去维护，单独开发，单独部署上线，这样团队直接就能实现自治，减少甚至不会出现和其他团队冲突的情况。

2，老项目兼容:如果公司中有故事中存在的古老的jquery或者其他巨石项目的话，但是又不想用旧的技术栈去维护，选择使用微前谎的方式去拆分项目是—个很好的选择。

3，跨技术栈：如果我们的微前端系统中需要新增一个业务模块时，只需要单独的新建一个项目，至于项目采用什么技术栈，完全可以由团队自己去定义，即使和其他模块用的不同的技术栈也不会有任何的问题

3，现有的微前端方案

ifrmae

iframe大家都很熟悉，通过iframe实现的话就是每个子应用通过iframe标签来嵌入到父应用中
iframe具有天然的隔离属性，各个子应用之间以及子应用和父应用之间都可以做到互不影响。
但是iframe也有很多缺点︰
1，url不同步，如果刷新页面，iframe中的页面的路由会丢失;

2，全局上下方完全隔离，内存变量不共享；

3，UI不同步，比如iframe中的页面如果有带遮罩的弹窗组件，则遮罩就不能覆盖整个浏览器。只能在iframe中生效；

4，很慢。每次子应用进入都是一次浏览吕上下文重建，资源重新加载的过程；

single-spa

single-spa是最早期的微前端框架,可以兼容很多技术栈。

single-spa首先在基座中注册所有子应用的路由，前URL进行改变时就会去进行匹配，匹配到那个子应用就会去加载对应的那个子应用。

相对于iframe的实现方案，single-spa中基座和各个子应用之间共享着一个全局上下文，并且不存在URL不同步和UI不同步的情况，但是single-spa也有以下缺点；

1，没有实现js和css的隔离；

2，需要修改大量的配置，包括基座和子应用的，不能开箱即用；

quiankun

qiankun是阿里开源的一个微前端框架，在阿里内部已经通过一批线上应用的充分检验及打磨了，可以放心使用。qiankun有什么优势呢？

1，基于single-spa封装的，提供了更加开箱即用的API
2，技术栈无关，任意技术栈的应用均可使用/接入，不论是React/Vue/AngularlJQuery还是其他等框架。
3，HTML Entry的方式接入，像使用iframe一样简单
4，实现了single-spa不具备的样式隔离和js隔离
5，资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。