【源码】微前端qiankun源码阅读(3)：预加载、缓存和通信

~ 【微前端】qiankun源码阅读(1)：Demo与single-spa流程
【微前端】qiankun源码阅读(2)：加载子应用与沙箱隔离

通过前面的两篇可以大概了解qiankun的运行，其中可能会有些疑问：一个主应用有多个子应用，如果每次都在切换子应用时才去加载对应子应用的资源，那切换时的体验会比较差。为此，qiankun提供了预加载功能，可以看到在start中调用了 doPrefetchStrategy :

去到 src/prefetch.ts 中查看 doPrefetchStrategy ，可以看到其默认预加载策略是 prefetchAfterFirstMounted ，也就是等当前子应用加载完毕后，再去预加载其他子应用。 prefetchAfterFirstMounted 很简单，就是在 requestIdleCallback 中调用我们之前讲到的 importEntry 去加载每个子应用。

requestIdleCallback 是一个相对新的API，可以用它来执行一些低优先级的任务，它会在浏览器空闲的时候才去执行，从而避免影响当前子应用的加载。

另外有个问题是，如果我们每次切换应用都去 importEntry 重新加载资源，那不好。可以将资源保存起来。
这里其实也是 importEntry 做好了， importEntry 会将请求到的资源保存在 embedHTMLCache 变量中。

qiankun中的通信很简单，在 initGlobalState API文档 可以查看其使用。
这里源码在 src/globalState.ts 中。各种通信方式在微前端框架里同样适用，没啥好看。

qiankun框架的源码阅读暂时先这样，希望以后有应用场景可以使用一下这个框架。

---

下城区13431066861： 如何阅读源代码 - ？
呼图速新： 最近有做源码阅读的事情,觉得有些费尽,做了一些思考. 一个大项目的源代码,不要过份详细的阅读.大项目,其代码量基本上是可以吓死人的.过份的关注细节,常常会拘泥于细节,而忽略了整体框架.当你能够看清框架的时候,亦花费了...

下城区13431066861： 求HTML代码,页面显示古诗的题目,按下按钮,古诗第一句替换古诗题目 - ？
呼图速新： 这个可以通过一个简单的js时间来实现, 首先创建input按钮,添加onclick=tihuan(this)事件: //替换方法将当前文件替换成其他文字. function tihuan(obj){ obj.replace(obj,其他字符); }

下城区13431066861： 如何阅读开源代码 - ？
呼图速新： 通过阅读开源代码,可以学习其中的框架和模式、代码技巧、算法等.但是经常有些人拿到开源代码以后不知道如何下手,这里分享一下我的一些经验.1.拿到代码以后编译运行它,了解它干什么的,实现了功能.2.从入口点开始阅读,按照流程,了解这个软件是怎么运行起来的.3.从整体上观察这个软件是有哪些模块组成的,最好能画一画图.4.修改软件的功能,并且能够调试它.不能仅仅停留在阅读代码上,一定要改代码,这样才能增加对开源代码的理解.5.做笔记,把这个开源代码实现的功能,实现方式、设计框架、模块组织、以及代码技巧等记录下来.以上,这些仅仅是我个人的经验,希望可以帮组到您.

下城区13431066861： 如何在Eclipse下查看JDK源代码以及java源代码阅读方法 - ？
呼图速新： 在Eclipse下查看JDK源代码以及java源代码阅读需先进行设置,方法步骤如下1.点 “window”-> ＂Preferences＂ -> ＂Java＂ -> ＂Installed JRES＂2.此时＂Installed JRES＂右边是列表窗格,列出了系统中的 JRE 环境,选择JRE,然后点边上...

下城区13431066861： 如何将spring开源代码导入idea中进行阅读 - ？
呼图速新： 打开idea软件,在欢迎页面可以看到Import Project导入项目,但spring源码已经使用了gradle构建项目,这里我们选择open的方式直接打开spring源码目录,gradle会自动帮助我们导入和构件项目代码 点击open方式,会出现Open File or Project...

下城区13431066861： 怎么修改网页源代码,如何保存? - ？
呼图速新：如何修改网页源代码,如何保存?这个很简单.右键单击需要修改的web文件,在记事本中打开它.打开修改后,保存在记事本中.请补充.html转换为文件名.例如,我的网页page.html,然后选择所有文件在保存类型和保存它们以后,就是这...

下城区13431066861： 如何阅读hadoop namenode源码 - ？
呼图速新： 1.导入查看hadoop源码 (1)选择Existing Projects into Workspace (2)选择源码路径 (3)查看源码 这样我们就完成了全部的内容. 2.阅读hadoop源码 其中比较常用的 Open Call Hierarchy: 用Open Call Hierarchy可以查看方法的调用层次.

下城区13431066861： 如何查找源代码 - ？
呼图速新： 工具如何查找源代码1、首先打开电脑的ie浏览器进去,如下图所示.进入ie浏览器首页后,点击查看,如下图所示.在查看菜单下选择源,如下图所示.最后打开源就看到本网页的源代码了,在最下方,如下图所示. 2、第二种方法就是根据浏...

下城区13431066861： 如何高效地阅读C#.NET大型项目源代码?？
呼图速新： 先用一些UML工具根据源码生成UML,先看UML图,对程序类的组成和关联情况有个大致的印象,然后再看代码,这样就会容易一些

下城区13431066861： 如何阅读github源代码 - ？
呼图速新： 只“看”源码是没办法学习的.你必须将这个项目运行起来,在调试过程中动态分析它的处理流程,才能比较好的弄清楚其中的原理.幸运的是node.js的源码非常容易编译和调试,我就是通过下面的步骤来研究它的实现机制的. 先说明一下,...