前言
【微前端】qiankun源码阅读(1):Demo与single-spa流程
【微前端】qiankun源码阅读(2):加载子应用与沙箱隔离
正文
(1)预加载
通过前面的两篇可以大概了解qiankun的运行,其中可能会有些疑问:一个主应用有多个子应用,如果每次都在切换子应用时才去加载对应子应用的资源,那切换时的体验会比较差。为此,qiankun提供了预加载功能,可以看到在start中调用了doPrefetchStrategy
:
去到src/prefetch.ts
中查看doPrefetchStrategy
,可以看到其默认预加载策略是prefetchAfterFirstMounted
,也就是等当前子应用加载完毕后,再去预加载其他子应用。prefetchAfterFirstMounted
很简单,就是在requestIdleCallback
中调用我们之前讲到的importEntry
去加载每个子应用。
requestIdleCallback是一个相对新的API,可以用它来执行一些低优先级的任务,它会在浏览器空闲的时候才去执行,从而避免影响当前子应用的加载。
(2)缓存
另外有个问题是,如果我们每次切换应用都去importEntry
重新加载资源,那不好。可以将资源保存起来。
这里其实也是importEntry
做好了,importEntry
会将请求到的资源保存在embedHTMLCache
变量中。
(3)通信
qiankun中的通信很简单,在 initGlobalState API文档可以查看其使用。
这里源码在src/globalState.ts
中。各种通信方式在微前端框架里同样适用,没啥好看。
总结
qiankun框架的源码阅读暂时先这样,希望以后有应用场景可以使用一下这个框架。