當前位置:編程學習大全網 - 源碼下載 - 【源代碼】微前端錢坤源碼閱讀(三):預加載、緩存和通信

【源代碼】微前端錢坤源碼閱讀(三):預加載、緩存和通信

微前端錢坤源讀取(1):演示和單spa流程

微前端錢坤源碼閱讀(二):加載子應用與沙箱的隔離

通過前面兩篇文章,我們可以對錢坤的操作有壹個大概的了解,其中可能會有壹些疑惑:壹個主應用有多個子應用,如果每次切換子應用時都要加載對應子應用的資源,切換體驗會很差。為此,錢坤提供了預加載功能,可以看到在start中調用了doPrefetchStrategy:

轉到src/prefetch.ts查看doPrefetchStrategy,可以看到其默認的預加載策略是prefetchAfterFirstMounted,即加載完當前子應用後,會預加載其他子應用。PrefetchAfterFirstMounted很簡單,就是在requestIdleCallback中調用我們之前提到的importEntry來加載每個子應用程序。

RequestIdleCallback是壹個相對較新的API,可以用來執行壹些低優先級的任務。只有在瀏覽器空閑時才會執行,以免影響當前子應用的加載。

另壹個問題是,如果我們每次切換應用程序時都去importEntry重新加載資源,那就不好了。可以節約資源。

實際上,importEntry是在這裏完成的,importEntry會將請求的資源保存在embedHTMLCache變量中。

錢坤的通信非常簡單,在initGlobalState API文檔中可以看到它的用法。

這裏的源代碼在src/globalState.ts各種通信方式在微前端框架中也適用,沒什麽可看的。

錢坤框架的源代碼閱讀暫時是這樣的。希望這個框架可以用在未來的應用場景中。

  • 上一篇:Android小項目源代碼
  • 下一篇:建立壹個網站從頭到尾都需要什麽程序?越祥越好!謝謝
  • copyright 2024編程學習大全網