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

前言

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

正文

（1）预加载

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

image.png

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

image.png

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

（2）缓存

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

image.png

（3）通信

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

总结

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