qiankun微前端为什么不更新了

好多朋友私信说，微前端我是用梅 cry 还是用乾坤，今天咱们就来聊聊，如果你团队里面需要用到微前端这两个，你应该选择哪个比较合适？首先来看他们的揭露成本， 对于 mixelape 来说，我的主用用肯定要配置路由的，这个路由也就是我要去分配给我的止用用，按在页面上的使用，就直接这么引入，就类似于咱们原来的那种按分母方式引入，那么咱们再看每个止用用，那么对于止用用来说的话， 他这里面有一句话说了，如果机座是黑头的路由，只用用是哈西，那么这一步完全可以省略，也就是说我的只用用基本上不用改造，那么我用乾坤呢？可以看一下乾坤，这个是在主要用注册微应用，对吧？那么他这句话也说了，我每个微 应用里面我都需要导入这三个函数，也就是说我的只用用是需要改造的啊，每个只用用我起码都需要加入这三个函数。还有呢，我在打包配置的时候，我这地方一定要勒不着人 啊。然后这个他这个要设成 umd， 整个这个乾坤和 macrope 他们的一个对比，那么从上手成本来说的话，最低的应该就是这个 macrope， 包括他内部也做了这种元素的隔离，降低上手难度，提升功能效率。 他可以说是目前市场上揭露微前端成本最低的一个框架，内科外普的呆萌也是比较全的 reit， 他作为只用用记住包括案例都有，包括 vivo 的， 他也是包括问他，如果你们团队做微前端选行的话，我建议你们团队选择这个，如果有不同的意见，欢迎评论区留言讨论。

我们介绍一下红任务和微任务，通过前面学习，我们知道咱们可以把任务呢分成同步任务和 e 步任务，而我们 gs 中又可以把 e 步任务分成红任务和 v 任务。在我们 e s 五之后呢， g s 呢，引入了 pro mis。 所以说现在呢，即使不需要浏览器，我们 gs 引擎自身也能够发起异步任务了， 比如说我们红任务啊，是由宿主环境来进行发起的，比如说浏览器啊， no 的。而我们的微任务呢，注意啦，它是由 ds 引擎发起的任务，那我们主要的一步任务呢，由 promise， 其实 promise 本身呢，它是同步的，只不过 promise 里面的尊和 cat 这些回调函数属于一步的。 所以说呢，我们可以整体把代码呢分成三类，第一大类呢，就是我们的同步代码，这也是优先执行的代码，因为呢，它是由我们 gs 执行站或者回调站来执行的。那紧跟着我们会优先执行我们的微任务，因为微任务啊是由 gs 引擎发起的，哎，离着我们 gs 更近嘛，所以说会优先执行微任务。好，微任务里面包含了我们这些，比如说啊，森格威特啊， prom， 死森和 catch 等等的。再次说一遍 promis 本身，哎，它是同步的，只不过森和 catch 啊，它属于异补任务中的，为任务好了，那为任务执行完毕之后呢，我们再执行候任务， 红任务呢，是由我们的速度环境来去执行的，比如说浏览器，还有我们的 note 等等。哎，同学们一定要注意我们整个 scurp 的这个大马块呀，它本身就属于我们的红任务，除了 scurp 的之外呢，还有我们的定时器呀，啊，还有我们的 io 啊等等，这一些都属于我们的红任务了。 好，那我们来看一下这三种代码到底按照什么顺序来去执行？那首先我们看见执行的是同步代码喽，因为同步代码是放到执行站里面进行去执行的 好。第二步呢是执行微任务，把微任务里面的一步大码呢，放到微任务队列里面去排队，因为我有可能我们有多个的微任务，那根据的是先进先出的原则，谁先进来的谁先出去。好了，那微任务执行完毕之后呢，就是我们的红任务了，把红任务中的一步大码呢，放到红任务队列里面去来进行依次排队。同样的原则也是先进 先出，他一个完整的执行过程呢，是这样子，首先是执行执行站里面所有的同步单码看看，如果所有的同步单码执行完毕之后呢，哎，先去微任务对着里面看一看有没有微任务去竞排队。 如果有的话，根据先进先出的原则呢，把这个微任务拿过来，通过事件循环的方式呢，推到我们执行站里面去执行这个微任务好了。那这个微任务执行完毕之后呢，再回头看看我们的微人物队列还有没有排队的，如果有的话，哎，再利用事件循环呢，取出来推到执行站里面去执行 好了。如果所有的微任务都执行完了，再去看一下我们的红任务队列，看一看红任务里面有多少个排队的，还是先进先出的原则，哎，利用实验循环呢，把它推到我们执行站里面去执行好了，那如果所有的红任务队列都执行完毕之后呢，说明我们整个代码就执行完毕了。 好了，这是他的一个简单的执行过程，那接下来呢，我们通过一个小例子给同学们再次去演练一下，当然看过文档的小伙伴有可能有也有疑惑啊，说啊，有的时候呢，是红人 优先，其实呢，是因为我们整个 scarf 的本身就属于一个大的红任务，所以说他肯定是先执行这个大的 scarf 的啊，里面所有的代码还是去执行的，所以说这是一个大的红任务，这是没问题的。也说我们接下来所有的代码的操作呢，其实在一个大的红任务里面去执行的啊， 好，那我们啊，忽略 scurpa， 我们先进入这里面的代码，看一下它的执行过程，那代码从上往下读，先到 ctrl 的 logue 一，这一个一看就属于同步任务，所以说我们只需要把这个同步任务呢，哎，直接给他拿过来，推到执行站里面去执行就可以了。 好了，那我们再往下看，哎，这里面是不是有个塞得他们奥特，塞得他们奥特呢，属于一个一步的红任务，所以说呢，他应该是交给我们的速度环境去执行，他会把后面这个回跳函数呢，哎，给他进行放到我们的红人物队列里面去好，根据先进先出的原则 好了，再往下走，哎，我们发现了有一个叫做 new promes， 哎，我再次说一遍， promes 本身是同步的，是里面的点增和点开始属于微任务，属于一步的啊，所以说呢，当他读到 promes 之后呢，会立马去 执行的，所以说我们看到一个啃色的 logo 三，所以说依次会去打印啊，所以说带去执行啃色的 logo 三是属于同步人物。再说一遍，普尔密斯里面的代码呢，属于同步人物，所以说他会放到执行站里面去。执行。好了，那执行完之后呢，再看一个 result 啊，那 result 呢？我说明我们标记是成功的，所以他会调用普尔密斯里面这个字的这个回答函数， 那所以说呢，他只是标记为成功而已，按照我们稍后再去调这个微任务，但是下面代码是不会阻止的，会继续去执行，所以说呢，哎，我们再去找到这个四，哎，然后呢，我们这个四也属于同步任务，也会放到执行站里面去。好了，那继续往下走的时候呢？哎，我们就到了点赞了啊， 刚才这个人造我标记位是成功的，会执行你们的字，但是我们说了，普尔密斯里面这个字属于一步任务，一步任务中的微任务，所以说呢，他会把字里面这个回调函数呢，哎，也取过来给他放到我们的微任务对立里面去排队，先进先出，所以说已经排好队了，好了，再往下走，又看到了一个肯坐着 五，这个一看就是一个同步任务，所以说同步任务呢，依次会放到我们这个直行站里面去。好了，所以说呢，现在执行过程我们就一目了然了。首先直行站里面同步任务会打印一次，打印一三四五， 好，到此为止，我们执行站里面所有的代码都执行完了，执行完之后会怎么办呢？先执行微任务，再执行红任务，所以说呢，他去把微任务里面对列，去利用实验循环的方式看看微任务对列，哎，有一个要执行的， 说要 log 打印一下地段，地段，刚才我们三个里面是一千，所以会把这个一千打印出来，也就是说他会把这个微人物队列呢先取过来放到执行站里面去，所以这个打印的是一千。好，那我们再去看看我们的微人物队列里面已经没有排队的了，是一名微任务执行完毕。那最后呢，我们就执行一下我们的红任务，红任务里面执行的是老个二，所以说再打印一下我们的老个二，这样的话我们代码就执行完毕了， 所以说你通过画图的形式非常直观的就表现出来了，所以最终输出的结果分别是一三、四五，一千和二。这就是我们 讲到红任务和微任务的一个简单执行过程。咱们下个视频呢，我会利用一个比较好用的实验循环的一个小的网站呀，给同学们再分析一下这个代码。那我们再举几个面试中常见的一些面试体验，给同学们去演示一下。

一分钟带你了解京东微前端框架 micro app 微前端是拆分庞大前端应用的高效开发模式，但实现无缝集成、隔离、安全和性能优化式挑战。京东前端团队推出 mcro app 框架，将微前端封装为组件，实现组件化渲染， 无关技术站适用于任何前端框架。 micro app 的核心特点，一、站式微前端解决方案 micro app 将微前端封装为组件，实现组件化渲染，为用户提供了一种简单高效的微前端解决方案。二、重隔离机制 通过 js 隔离、样式隔离和路由隔离， micro app 确保子应用之间相互独立，从而避免了可能的冲突和污染。三、大性能优化 micro app 对杀 沙箱性能进行了深度优化，采用变量前置和一步防抖技术，大幅提升了沙箱的运行效率。同时还提供了快兆缓存和预加载等功能，以加快子应用的加载速度。 字为路由系统， miko app 实现了一个虚拟路由系统，能够模拟浏览器的路由行为，让子应用的路由与机所应用的路由相互隔离，从而解决了路由冲突的问题。 此外，还提供了一系列自定 api， 增强了应用之间的交互能力。五星开发工具 micro app 附带的 chrome 浏览器插件 micro app dev tools 可以帮助开发者提高效率，实现调试、模拟、查看、设置和获取等多种功能，使得开发者可以更好地理解和使用 micro app。

大家好啊，呃，我们今天呢给大家讲一下这个网文的一些计算公式啊。网文的计算公式啊，很多小伙伴私信我说啊，这些东西不太懂，那我们首先来看一下啊，啊我们网文啊。我们首先啊，图纸上可能会标一个魔术啊，我这边随便随便写了一个魔术 m 二的， 那么我们的网距啊，也就是我们的一个魔术乘以三点一四啊。网距是什么意思？就是网格啊，就是网格之间的距离，叫网距，其实也相当于是罗距啊。 网文的头数等于多少呢？等于我们的外径除以我们的一个魔术啊，等于我们的一个头数啊，假设外径是五十啊，那么五十除以二二十五，那就是我们二十五头啊，就是二十五头导成等于我们的一个周长啊，周长等于直径乘以什么呀，三点一四啊，这是我们周长主轴旋转一千是三百六十度啊，三百六十度除。 对于我们这个头数等于每头递增的一个角度啊，是十四点四度啊。那么我们假设啊，设为变量啊，假设设为变量 初始角度啊，是简易，那么我们外径是五十的啊，我们定位在四十九点五啊， z 一的一个定位啊，然后变量的一个负值啊，角度初始负值，然后通过 g 三二的一个来回的一个拉啊，来回拉啊，来回拉，那么 z 负一百车过去啊，也就是说是我们网纹的一个长度啊，然后呢，是我们一个 z e 啊，拉回来， 每次呢角度递增啊，十四点四啊，角度递增。那么我们判断条件，如果仅一小于了三百六十度啊，那么我们 go to 一啊循环。那么我们现在来看一下这个加工的一个效果啊。我们看一下我们会发现啊，一直来回拉，来回拉啊，形成我们一个网格啊，形成我们 这个呢，就是我们这个呃，加工网纹的几个必要的一个数值计算啊。因为啊，原来我们讲过用 g 九二啊，但是 g 九二呢，他不太方便，时间比较慢啊。那我们用 g 三二的话呢，我们配合红尘水啊，相对来说比较方便啊。关注保洁不迷路啊！

好了，这节课呢，我们来做一下这个网站的一个底部部分，那在这呢，首先第一点我们需要先新建一个组建，然后第二呢就是把这组建的布局呢给他搞定，然后其次呢就是把数据呢一渲染就完事了，这也没有什么太多的一些逻辑可言哈，那我就直接来吧，然后这呢我们先来看一下这个文章，这文章呢我也是写好的，直接给大家复粘贴过来哈。 行，然后到这以后呢，首先我们先创建一个 foot 这样的一个微文件啊，来到我们的这个组件里边，然后在我们的公共里边啊，因为很多页面都会用到这个底部啊，所以说我们直接在这呢就新建出来就可以了。 好，然后第二步呢，就是我们需要在这个 home 点 vivo 中呢进行引入。好，我们到这呢引入一下这个 foot， 那是在公共的这个目录里边。好，那我这样呢就保存一下了啊，行，然后 呢其次就是把他的样式布局给他拿过来，然后这里边呢涉及到了一些图片啊，涉及到一些图片，那很多小伙伴会问我说，这个图片怎么去下载啊？还是我们的那个，呃，网站啊，那门课程里边都有每节课讲的一个笔记，大家直接下载就可以了， 嗯，就在这儿，或者说大家可以进入到这个这儿去搜一下啊， vivo 三什么的。嗯，然后在这儿呢是有一个下载笔。呃，下载资料是吧？每一节课都有啊，每节课都有。好，那在这儿呢他需要这么几张图片啊，大家可以看到在底部这儿，是吧？左边一个 logo 啊，这样的一个二维码，那我们这儿呢就把这些图片都给他拿过来， 我都放到呃，这个引妹子目录里边了啊，这呢一共有四张，好，放过来。行，那现在呢，我们看一下这样的一个内容好，呃，然后呢？呃，这块就比如说关于我们或者联系我们，他正常来说是跳转页面的，对吧？ 然后进入到这些页面呢，展示的是相关的一些文章，那这块内容是比较简单的，我们就不做这块东西了。然后最主要就是这有一些什么 s a p 的一个备案号，这些是数据啊，这些数据，那到这呢我们就直接的去呃，把这数据呢给它渲染过来就可以了。来我这直接就搜一下热三， 不能在这搜，在这搜的话都是笔记了。是进到这个笔站里边好，然后打开这个 vivo 三，嗯，然后这呢有个接口文档啊，在接口文档里边呢，是有一个网站配置，然后这获取网站配置啊，我们把这个接口给他拿过来， 呃，放到我们的这个 a p m 里边，我都放到这儿哈，然后它是一个 get 请求，如果没记错的话，看一下啊，是个 get 请求，然后这是路径，呃，不需要传递任何的参数， 那我们需要在复特点 vivo 中给它做一个引入 一炮， 在这个工具目录里边有一个 api 好 on before mont r s。 看一下 r e s。 点这个吧， 那这个接口文档我就给他关了。好在控制台这一块呢 可以看到啊，还有一层 data 啊，这里边呢有一个备案号，然后呢还有一个是 s c p， 呃，我们把这两个 k 都拿过来吧， r e s 点 date 点 d 点儿，还有 s t。 行，那这两个呢，我就都做一个复制吧， 把上面换成一个活数据就好了。那这个活数据呢？肯定是，呃，通过后台关系统去添加的啊，然后前台这呢直接调用就可以了。好，我们把这两个呢弄成一个数据，它是一个空自动串， i c p 也是一个控制物串儿。 ok， 那我们这儿呢就不加注视了啊，直接给他换了，然后这儿是一个 i c p。 好， a 链接呢？这儿 这有个网址，那这个网址呢我们就可以直接留下了啊，那这有一个 class， 其实这 class 呢可以不要。好，我们看一下。呃，这个底部。 ok， 那这样的话呢就已经没有问题了，那我们这一刻呢把这个底部也搞定了啊。对，呃，在这个文章里边呢，其实也写了啊，给大家看一下零九， 好，我们点进去啊，在下边这里也有渲染数据啊，不管怎么样，现在呢，我们这个项目的一个首页算是都搞定了，是吧？首页内容呢都差不多了，也没什么太多难点，就是无非布局，然后把数据渲染进来，是吧？引入了什么 m g u i， 然后用一些小图标乱七八糟东西。行了， 然后下节课呢，我们就针对于这一块呢，呃，做一些东西，比如说这一块他应该是一个义部组件，对吧？然后，呃，我们这样呢进行一些小小调整啊，加入一些 vivo 三的一些元素。好，那么有关于这个首页底部，我们就先说到这里。

这次的主题是微前端，带大家吃透微前端。学一个东西的时候，不应该仅仅去学他的实战，他是怎么用的，这样的话你的知识体系不够完整，好比微前端一定要学他的一个背景，为什么会产生微前端，他 解决了什么问题，以及他的实现原理，包括现在业界流行的技术方案，以及到最后才是某一个方案的具体的项目实战和落地。在讲文件端之前，我们要先了解微服， 微服务通常来对比之前很早的这种单体的架构，单体来说的话，它有几大特性，一个是所有的功能都我在一块相互影响，哪怕我改一行代码，我整个项，整个软件都要重新构建部署，上线成本是非常高的，而且就是说我 改动其中一个点，可能对于车的同学来说，他整个功能都要回归一遍。随着软件服务的发展，后来单体又到了面向服务， 那就是通常说的 soa， 再往后就慢慢的形成了微服务。他有几大特性，一个是敏捷性，可以快速对待自己的微服务，就弹性部署，就可以快速的集成与部署服务独立性，增加了应用程序的对故障的弹性。技术自由， 就说你的这个服务可以选择 a 技术，这个服务可以选择 b 技术，可以重复利用代码。接着再往下看，咱们就到了 v 前端， 可以看一下这张图，最早是出现了为服务我的一个号的服务被拆分成 n 个小的，只服务，那么腾讯去访问共享的水库，那前端应用我只有一个，那么他都偶合在一起， 所以说他分别调用 abcd 这四个服务，慢慢的在发展进行一个拆分就拆分成这样，那么我们前端的服务也要和类似于后端的为服务的这种形式，也要拆分成一个一个的直营用， 这样的话就是由一一整个按照一定的规则拆分成各种前端的小应用。那么这种方案方式你可以理解为就是未前端，我们可以再从另外一个角度去看这个未前端组件，因为现在咱们都是组件化开发， 那你可以类比，就是说将微前端看成组件，只不过这个组件有点大，功能比较齐全。那么从应用场景来看，组件是不可运行的，他是被调用的，他是整个应用中的一小部分。微前端他是可以单独运行的一个应用，从技术上来说的话，组件是 基于某个框架实现了，而微前端这种应用不依赖于这个框架。整个前端他肯定有一些优点的，每个微前端都可以选择自己的技术赛和技术进化路线，因为他每一个应用他都是独立不相互影响的。 再一个是环境颗粒，就每个指向不共享运行环境，比如说这个 d 应用挂了，他不会影响 c 应用，他也是有独立性，高可用。缺点就是他会增加你的运维的成本，因为原本是由一个分成了多个拆分，力度越小，价格越复杂，那么维护成本越高。 未前端支持不同的技术站，那么可能你整个一个未前端的一个所有的项目，他可能技术站会造成不同，怎么应用这一点非常重要，就面试当中也会参考，就为什么你的项目要拆成未前端，这种方式呢？肯定有几个原则的，所以说咱们要聊聊这个原则。首先要搞清楚项目 如何拆，变成一个危险的项目。第二是选型，我应该用哪种危险的技术去落地？最后呢， 一般的话我们应该怎么样去考？如果是新项目呢，直接采用为前端，那么我在这里是直接推荐 mero rap 后为天上的技术，可以降低项目的管理成本。那拆分原则可以从这几方面去考虑，一个是是否有快速叠加的需求， 如果有快速的需求，则表示业务需要快速响应。那么采用无前端去拆分，不仅支持快速迭代，还支持业务快速支出。比如说小功能，如果影响到大版本的功能，这时候可以采用独立发布部署。那么拆分原则就是这个地方说的这几大原则。拆分的方法就是， 其实就是说白了就是一个技术选型，就是包括按你的团队有可能你的服务不同的，只服务是不同的团队的，不能 团队有可能他们的技术战是不一样的。目前前端界流行的无潜能的技术选项有这么几个，我在这里推荐大家使用的是你们的 rap app， 他的改造成本是比较低的，学习成本也比较低， 不管是你的老项目的基础，还有此项目，他的轻度也是比较低的。所以说如果大家想做选项，可以选择这个 mate robo app， 他提供了 gs 的砂箱样式的隔离元素的隔离御家宅资源等等，他其实是一个完善的，包括你怎么样和只应用，怎么样和基座通讯，基座怎么样都要用只应用，里面的方法都提供了完整的代步。这节课咱们就讲理论， 把理论历史背景发展搞清楚了，然后再去看实战。这时候你的一个知识点，起码你能够从 pro 到玩串起来，也就是逐渐形成微前端技术的一个知识体系。如果大家有什么问题，可以评论区留言。