微前端錢坤源碼閱讀(二):加載子應用與沙箱的隔離
通過前面兩篇文章,我們可以對錢坤的操作有壹個大概的了解,其中可能會有壹些疑惑:壹個主應用有多個子應用,如果每次切換子應用時都要加載對應子應用的資源,切換體驗會很差。為此,錢坤提供了預加載功能,可以看到在start中調用了doPrefetchStrategy:
轉到src/prefetch.ts查看doPrefetchStrategy,可以看到其默認的預加載策略是prefetchAfterFirstMounted,即加載完當前子應用後,會預加載其他子應用。PrefetchAfterFirstMounted很簡單,就是在requestIdleCallback中調用我們之前提到的importEntry來加載每個子應用程序。
RequestIdleCallback是壹個相對較新的API,可以用來執行壹些低優先級的任務。只有在瀏覽器空閑時才會執行,以免影響當前子應用的加載。
另壹個問題是,如果我們每次切換應用程序時都去importEntry重新加載資源,那就不好了。可以節約資源。
實際上,importEntry是在這裏完成的,importEntry會將請求的資源保存在embedHTMLCache變量中。
錢坤的通信非常簡單,在initGlobalState API文檔中可以看到它的用法。
這裏的源代碼在src/globalState.ts各種通信方式在微前端框架中也適用,沒什麽可看的。
錢坤框架的源代碼閱讀暫時是這樣的。希望這個框架可以用在未來的應用場景中。