本技術涉及應用前端開發，具體涉及一種基于無界微前端框架的子應用預加載方法及系統。

背景技術：

1、隨著互聯網的高速發展，用戶所需功能增多，導致基于web的應用程序日益龐大，以下簡稱web應用。常常需要將一個web應用拆分成若干個體量較小的應用，拆分得到的應用可能由不同的研發團隊進行獨立研發，再組合成為web應用。

2、現有技術中，存在一個基座項目去加載啟動拆分的應用，該基座項目被稱為主應用，被加載啟動拆分的應用被稱為子應用，由主應用提供一個獨立的環境去加載啟動子應用。在主應用初始化時，通常需要優先加載主應用自身的頁面及對應的資源。而為了提升子應用頁面打開的首屏時間，通常需要提前加載子應用的資源甚至提前啟動子應用。

3、但是若需要加載啟動的子應用數量過多，會造成同時需要加載的資源數量過多，從而造成主應用頁面渲染堵塞等性能問題；且子應用的加載啟動順序為固定順序，無法更改，也即無法優化子應用資源的優先加載。可見，現有技術中主應用與子應用的加載啟動存在沖突，導致web應用啟動加載的速度較慢。

技術實現思路

1、有鑒于此，本技術提供一種基于無界微前端框架的子應用預加載方法及系統，通過當前路由信息確定需要優先預加載的子應用，保證主應用正常加載，在事件循環的空閑時間完成子應用的預加載，弱化主應用與子應用的加載啟動沖突，提高web應用啟動加載的速度。

2、為解決上述問題，本技術提供的技術方案如下：

3、第一方面，本技術實施例提供一種基于無界微前端框架子應用預加載方法，所述預加載方法包括：

4、響應于啟動指令，初始化主應用，所述主應用基于vue框架搭建而成；

5、調用mounted函數，在所述mounted函數中定義mircoapps數組變量，所述mounted函數用于基于無界微前端框架的子應用的預加載，所述mircoapps數組變量用于存儲所述子應用的配置信息；

6、獲取當前路由信息，所述當前路由信息包括路由前綴；

7、若所述路由前綴與所述子應用中目標子應用的配置信息相匹配，則前置所述目標子應用的配置信息，直接為runstartapp遞歸函數賦值，通過所述無界微前端框架內置的startapp方法預加載所述目標子應用，所述runstartapp遞歸函數用于循環獲取所述mircoapps數組變量中子應用的配置信息；

8、若所述路由前綴與所述子應用的配置信息不匹配，則加載所述主應用的頁面，將runstartapp遞歸函數作為window.requestidlecallback()的參數執行，在事件循環的空閑時間中預加載所述子應用。

9、在一種可能實現的方式中，所述前置所述目標子應用的配置信息，直接為runstartapp遞歸函數賦值，通過所述無界微前端框架內置的startapp方法預加載所述目標子應用，包括：

10、獲取所述子應用的配置信息在所述mircoapps數組變量的索引；

11、基于所述索引，將與所述路由前綴匹配的所述目標子應用的配置信息存儲至index變量；

12、在所述mircoapps數組變量中刪除所述目標子應用的配置信息；

13、將所述index變量以及數值1插入到firstapp變量；

14、將所述firstapp變量前置到所述mircoapps數組變量的第一個位置；

15、將所述runstartapp遞歸函數的deadline對象參數賦值為空，immediate參數賦值為true，通過所述無界微前端框架內置的startapp方法預加載所述目標子應用。

16、在一種可能實現的方式中，所述將runstartapp遞歸函數作為window.requestidlecallback()的參數執行，在事件循環的空閑時間中預加載所述子應用，包括：

17、若所述mircoapps數組變量的長度大于0，則確定還存在未啟動的子應用，判斷所述runstartapp遞歸函數的immediate參數是否為true，或，判斷當前時刻是否處于事件循環的空閑時間；

18、若所述immediate參數為true，或，所述當前時刻處于事件循環的空閑時間，則通過所述無界微前端框架內置的startapp方法預加載當前順位的子應用，并將下一順位的子應用的配置信息作為所述runstartapp遞歸函數的參數，將賦值后的所述runstartapp遞歸函數作為window.requestidlecallback()的參數執行，在事件循環的空閑時間中預加載所述子應用。

19、在一種可能實現的方式中，所述子應用預加載方法還包括：

20、確定所述mircoapps數組變量的長度為0，完成所述啟動指令的響應。

21、在一種可能實現的方式中，所述子應用預加載方法還包括：

22、判斷所述子應用是否處于無界環境中；

23、若所述子應用處于無界環境中，則阻止所述子應用在預加載過程中重復調用服務端接口獲取所述子應用的配置信息所指示的資源。

24、在一種可能實現的方式中，所述子應用預加載方法還包括：

25、在所述子應用的vue?router對象中注冊全局前置路由守衛，所述全局前置路由守衛的回調函數提供路由跳轉的跳轉信息，所述跳轉信息包括to路由對象、next方法；

26、若所述to路由對象指示路由跳轉為所述子應用的初始化路由跳轉，則執行所述初始化主應用時，將false參數傳入所述next方法，中斷所述路由跳轉；

27、若所述to路由對象指示路由跳轉不為所述子應用的初始化路由跳轉，則直接執行所述next方法，完成所述路由跳轉。

28、在一種可能實現的方式中，所述子應用預加載方法還包括：

29、按照注冊順序確定所述全局前置路由守衛的初始執行順序；

30、將所述to路由對象指示不為初始化路由跳轉的子應用對應的全局前置路由守衛作為第一個元素，更新所述初始執行順序，得到目標執行順序；

31、基于所述目標執行順序依次執行路由跳轉。

32、第二方面，本技術實施例提供一種基于無界微前端框架的子應用預加載系統，所述預加載系統包括：

33、初始化模塊，用于響應于啟動指令，初始化主應用，所述主應用基于vue框架搭建而成；

34、定義模塊，用于調用mounted函數，在所述mounted函數中定義mircoapps數組變量，所述mounted函數用于基于無界微前端框架的子應用的預加載，所述mircoapps數組變量用于存儲所述子應用的配置信息；

35、獲取模塊，用于獲取當前路由信息，所述當前路由信息包括路由前綴；

36、預加載模塊，用于若所述路由前綴與所述子應用中目標子應用的配置信息相匹配，則前置所述目標子應用的配置信息，直接為runstartapp遞歸函數賦值，通過所述無界微前端框架內置的startapp方法預加載所述目標子應用，所述runstartapp遞歸函數用于循環獲取所述mircoapps數組變量中子應用的配置信息；

37、所述預加載模塊，還用于若所述路由前綴與所述子應用的配置信息不匹配，則加載所述主應用的頁面，將runstartapp遞歸函數作為window.requestidlecallback()的參數執行，在事件循環的空閑時間中預加載所述子應用。

38、在一種可能實現的方式中，所述預加載模塊，用于前置所述目標子應用的配置信息，直接為runstartapp遞歸函數賦值，通過所述無界微前端框架內置的startapp方法預加載所述目標子應用，包括：

39、獲取子模塊，用于獲取所述子應用的配置信息在所述mircoapps數組變量的索引；

40、存儲子模塊，用于基于所述索引，將與所述路由前綴匹配的所述目標子應用的配置信息存儲至index變量；

41、刪除子模塊，用于在所述mircoapps數組變量中刪除所述目標子應用的配置信息；

42、插入子模塊，用于將所述index變量以及數值1插入到firstapp變量；

43、前置子模塊，用于將所述firstapp變量前置到所述mircoapps數組變量的第一個位置；

44、預加載子模塊，用于將所述runstartapp遞歸函數的deadline對象參數賦值為空，immediate參數賦值為true，通過所述無界微前端框架內置的startapp方法預加載所述目標子應用。

45、在一種可能實現的方式中，所述預加載模塊，用于將runstartapp遞歸函數作為window.requestidlecallback()的參數執行，在事件循環的空閑時間中預加載所述子應用，包括：

46、判斷模塊，用于若所述mircoapps數組變量的長度大于0，則確定還存在未啟動的子應用，判斷所述runstartapp遞歸函數的immediate參數是否為true，或，判斷當前時刻是否處于事件循環的空閑時間；

47、所述預加載模塊，用于若所述immediate參數為true，或，所述當前時刻處于事件循環的空閑時間，則通過所述無界微前端框架內置的startapp方法預加載當前順位的子應用，并將下一順位的子應用的配置信息作為所述runstartapp遞歸函數的參數，將賦值后的所述runstartapp遞歸函數作為window.requestidlecallback()的參數執行，在事件循環的空閑時間中預加載所述子應用。

48、在一種可能實現的方式中，所述子應用預加載系統還包括：

49、確定模塊，用于確定所述mircoapps數組變量的長度為0，完成所述啟動指令的響應。

50、在一種可能實現的方式中，所述子應用預加載系統還包括：

51、所述判斷模塊，還用于判斷所述子應用是否處于無界環境中；

52、阻止調用模塊，用于若所述子應用處于無界環境中，則阻止所述子應用在預加載過程中重復調用服務端接口獲取所述子應用的配置信息所指示的資源。

53、在一種可能實現的方式中，所述子應用預加載系統還包括：

54、注冊模塊，用于在所述子應用的vue?router對象中注冊全局前置路由守衛，所述全局前置路由守衛的回調函數提供路由跳轉的跳轉信息，所述跳轉信息包括to路由對象、next方法；

55、中斷模塊，用于若所述to路由對象指示路由跳轉為所述子應用的初始化路由跳轉，則執行所述初始化主應用時，將false參數傳入所述next方法，中斷所述路由跳轉；

56、執行模塊，用于若所述to路由對象指示路由跳轉不為所述子應用的初始化路由跳轉，則直接執行所述next方法，完成所述路由跳轉。

57、在一種可能實現的方式中，所述子應用預加載系統還包括：

58、所述確定模塊，還用于按照注冊順序確定所述全局前置路由守衛的初始執行順序；

59、更新模塊，用于將所述to路由對象指示不為初始化路由跳轉的子應用對應的全局前置路由守衛作為第一個元素，更新所述初始執行順序，得到目標執行順序；

60、所述執行模塊，還用于基于所述目標執行順序依次執行路由跳轉。

61、第三方面，本技術實施例提供一種基于無界微前端框架的子應用預加載設備，所述設備包括：處理器、存儲器、系統總線；

62、所述處理器以及所述存儲器通過所述系統總線相連；

63、所述存儲器用于存儲一個或多個程序，所述一個或多個程序包括指令，所述指令當被所述處理器執行時使所述處理器執行如上述第一方面所述的基于無界微前端框架的子應用預加載方法。

64、第四方面，本技術實施例提供一種計算機可讀存儲介質，所述計算機可讀存儲介質存儲指令，當所述指令在設備上運行時，使得所述設備執行如上述第一方面所述的基于無界微前端框架的子應用預加載方法。

65、由此可見，本技術具有如下有益效果：

66、本技術實施例提供一種基于無界微前端框架的子應用預加載方法，先初始化主應用，接著調用mounted函數，在mounted函數中定義mircoapps數組變量，該mounted函數用于基于無界微前端框架的子應用的預加載，該mircoapps數組變量用于存儲所述子應用的配置信息。獲取當前路由信息，確定當前路由信息包括的路由前綴與子應用的配置信息是否相匹配，若相匹配，則前置相匹配的目標子應用的配置信息，直接為runstartapp遞歸函數賦值，使用無界微前端框架內置的startapp方法預加載目標子應用，該runstartapp遞歸函數用于循環獲取mircoapps數組變量中子應用的配置信息；若不匹配，則加載主應用的頁面，將runstartapp遞歸函數作為window.requestidlecallback()的參數執行，在事件循環的空閑時間中預加載子應用。如此，在完成主應用初始化后，即可進行應用加載。通過當前路由信息確定需要優先預加載的目標子應用，優先完成子應用的加載啟動；而后在主應用正常加載后，利用事件循環的空閑時間完成其他子應用的預加載。優先加載目標子應用和主應用，減少同時加載的子應用數量，避免主應用頁面渲染堵塞，弱化主應用與子應用的加載啟動沖突，使得子應用預加載不影響主應用的運行，提高web應用啟動加載的速度。

67、本技術實施例還提供了與上述方法相對應的系統，具有與上述方法相同的有益效果。