本發(fā)明公開(kāi)一種基于微模塊的微前端構(gòu)建方法，涉及云資源評(píng)估。

背景技術(shù)：

1、隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，web應(yīng)用的復(fù)雜度和規(guī)模不斷增長(zhǎng)，現(xiàn)有的單體應(yīng)用開(kāi)發(fā)模式已經(jīng)難以滿足市場(chǎng)的需求。微前端作為一種新興的開(kāi)發(fā)模式，允許多個(gè)團(tuán)隊(duì)獨(dú)立發(fā)布和維護(hù)應(yīng)用的不同部分，但是存在每個(gè)子應(yīng)用打包體積大，多個(gè)子應(yīng)用同時(shí)加載性能開(kāi)銷(xiāo)大等問(wèn)題。

技術(shù)實(shí)現(xiàn)思路

1、本發(fā)明針對(duì)現(xiàn)有技術(shù)的問(wèn)題，提供一種基于微模塊的微前端構(gòu)建方法，將微前端中的功能拆分成微模塊，并將微模塊的運(yùn)行時(shí)抽取到微前端，實(shí)現(xiàn)了微模塊與微前端的有機(jī)結(jié)合，有效提升了開(kāi)發(fā)效率、降低了維護(hù)成本，并增強(qiáng)了應(yīng)用的可擴(kuò)展性和可維護(hù)性。

2、本發(fā)明提出的具體方案是：

3、本發(fā)明提供一種基于微模塊的微前端構(gòu)建方法，使用import-html-entry作為微模塊框架，基于微前端框架qiankun構(gòu)建新型微前端框架，包括：

4、步驟1：創(chuàng)建微模塊：使用vue-cli創(chuàng)建一個(gè)vue項(xiàng)目，將main.js中創(chuàng)建vue實(shí)例的內(nèi)容修改為導(dǎo)出vue自定義組件mycomponent，

5、步驟2：創(chuàng)建微模塊的微前端：使用vue-cli創(chuàng)建一個(gè)vue項(xiàng)目，修改main.js文件，導(dǎo)出新型微前端框架需要的相應(yīng)的生命周期鉤子，

6、步驟3：通過(guò)主應(yīng)用加載微前端：使用新型微前端框架的loadmicroapp方法加載微前端，

7、步驟4：通過(guò)微前端使用import-html-entry加載微模塊，

8、步驟5：通過(guò)微前端渲染mycomponent組件，實(shí)現(xiàn)微前端框架封裝微模塊，減小微模塊的體積，用于提高運(yùn)行效率。

9、進(jìn)一步，所述的一種基于微模塊的微前端構(gòu)建方法的步驟3中通過(guò)主應(yīng)用加載微前端，包括：

10、從新型微前端框架導(dǎo)入微前端加載方法loadmicroapp，

11、設(shè)置微前端加載方法loadmicroapp的選項(xiàng)信息，包括名稱(chēng)值name為container，入口地址值entry為微前端應(yīng)用的入口，容器值container為html中對(duì)應(yīng)div的id值。

12、進(jìn)一步，所述的一種基于微模塊的微前端構(gòu)建方法的步驟4中通過(guò)微前端使用import-html-entry加載微模塊，包括：

13、導(dǎo)入來(lái)自import-html-entry的importhtml，

14、異步執(zhí)行importhtml，得到函數(shù)execscripts，

15、異步執(zhí)行execscripts方法，得到mymodule定義。

16、進(jìn)一步，所述的一種基于微模塊的微前端構(gòu)建方法的步驟5中通過(guò)微前端渲染mycomponent組件，包括：

17、定義組件名稱(chēng)為mycomponent，

18、引入得到的mymodule中的mycomponent的值，

19、使用vue的component組件，渲染mycomponent組件。

20、本發(fā)明還提供一種基于微模塊的微前端構(gòu)建裝置，包括微模塊管理模塊、微前端管理模塊、加載模塊和渲染模塊，

21、微模塊管理模塊使用import-html-entry作為微模塊框架，微前端管理模塊基于微前端框架qiankun構(gòu)建新型微前端框架，其中

22、微模塊管理模塊創(chuàng)建微模塊：使用vue-cli創(chuàng)建一個(gè)vue項(xiàng)目，將main.js中創(chuàng)建vue實(shí)例的內(nèi)容修改為導(dǎo)出vue自定義組件mycomponent，

23、微前端管理模塊創(chuàng)建微模塊的微前端：使用vue-cli創(chuàng)建一個(gè)vue項(xiàng)目，修改main.js文件，導(dǎo)出新型微前端框架需要的相應(yīng)的生命周期鉤子，

24、主應(yīng)用通過(guò)微前端管理模塊加載微前端：使用新型微前端框架的loadmicroapp方法加載微前端，

25、微前端通過(guò)加載模塊使用import-html-entry加載微模塊，

26、微前端通過(guò)渲染模塊渲染mycomponent組件，實(shí)現(xiàn)微前端框架封裝微模塊，減小微模塊的體積，用于提高運(yùn)行效率。

27、進(jìn)一步，所述的一種基于微模塊的微前端構(gòu)建裝置的主應(yīng)用通過(guò)微模塊管理模塊加載微前端，包括：

28、從新型微前端框架導(dǎo)入微前端加載方法loadmicroapp，

29、設(shè)置微前端加載方法loadmicroapp的選項(xiàng)信息，包括名稱(chēng)值name為container，入口地址值entry為微前端應(yīng)用的入口，容器值container為html中對(duì)應(yīng)div的id值。

30、進(jìn)一步，所述的一種基于微模塊的微前端構(gòu)建裝置的微前端通過(guò)加載模塊使用import-html-entry加載微模塊，包括：

31、導(dǎo)入來(lái)自import-html-entry的importhtml，

32、異步執(zhí)行importhtml，得到函數(shù)execscripts，

33、異步執(zhí)行execscripts方法，得到mymodule定義。

34、進(jìn)一步，所述的一種基于微模塊的微前端構(gòu)建裝置的微前端通過(guò)渲染模塊渲染mycomponent組件，包括：

35、定義組件名稱(chēng)為mycomponent，

36、引入得到的mymodule中的mycomponent的值，

37、使用vue的component組件，渲染mycomponent組件。

38、本發(fā)明的有益之處是：

39、將業(yè)務(wù)邏輯代碼放在微模塊的組件中，通過(guò)容器微前端加載微模塊的組件，有效解決了現(xiàn)有微前端方法每個(gè)子應(yīng)用打包體積大，多個(gè)子應(yīng)用同時(shí)加載性能開(kāi)銷(xiāo)大的問(wèn)題。實(shí)現(xiàn)了技術(shù)棧無(wú)關(guān)、獨(dú)立開(kāi)發(fā)部署、增量升級(jí)等核心價(jià)值，提高了開(kāi)發(fā)效率，降低了維護(hù)成本，增強(qiáng)了應(yīng)用的可擴(kuò)展性和可維護(hù)性。

技術(shù)特征：

1.一種基于微模塊的微前端構(gòu)建方法，其特征是使用import-html-entry作為微模塊框架，基于微前端框架qiankun構(gòu)建新型微前端框架，包括：

2.根據(jù)權(quán)利要求1所述的一種基于微模塊的微前端構(gòu)建方法，其特征是步驟3中通過(guò)主應(yīng)用加載微前端，包括：

3.根據(jù)權(quán)利要求1所述的一種基于微模塊的微前端構(gòu)建方法，其特征是步驟4中通過(guò)微前端使用import-html-entry加載微模塊，包括：

4.根據(jù)權(quán)利要求1所述的一種基于微模塊的微前端構(gòu)建方法，其特征是步驟5中通過(guò)微前端渲染mycomponent組件，包括：

5.一種基于微模塊的微前端構(gòu)建裝置，其特征是包括微模塊管理模塊、微前端管理模塊、加載模塊和渲染模塊，

6.根據(jù)權(quán)利要求5所述的一種基于微模塊的微前端構(gòu)建裝置，其特征是主應(yīng)用通過(guò)微模塊管理模塊加載微前端，包括：

7.根據(jù)權(quán)利要求5所述的一種基于微模塊的微前端構(gòu)建裝置，其特征是微前端通過(guò)加載模塊使用import-html-entry加載微模塊，包括：

8.根據(jù)權(quán)利要求5所述的一種基于微模塊的微前端構(gòu)建裝置，其特征是微前端通過(guò)渲染模塊渲染mycomponent組件，包括：

技術(shù)總結(jié)
本發(fā)明公開(kāi)一種基于微模塊的微前端構(gòu)建方法，涉及云資源評(píng)估技術(shù)領(lǐng)域；使用import?html?entry作為微模塊框架，基于微前端框架qiankun構(gòu)建新型微前端框架，包括：步驟1：創(chuàng)建微模塊：使用vue?cli創(chuàng)建一個(gè)vue項(xiàng)目，將main.js中創(chuàng)建vue實(shí)例的內(nèi)容修改為導(dǎo)出vue自定義組件MyComponent，步驟2：創(chuàng)建微模塊的微前端：使用vue?cli創(chuàng)建一個(gè)vue項(xiàng)目，修改main.js文件，導(dǎo)出新型微前端框架需要的相應(yīng)的生命周期鉤子，步驟3：通過(guò)主應(yīng)用加載微前端：使用新型微前端框架的loadMicroApp方法加載微前端，步驟4：通過(guò)微前端使用import?html?entry加載微模塊，步驟5：通過(guò)微前端渲染MyComponent組件，實(shí)現(xiàn)微前端框架封裝微模塊，減小微模塊的體積，用于提高運(yùn)行效率。

技術(shù)研發(fā)人員：吳瑞,唐勇
受保護(hù)的技術(shù)使用者：浪潮通信信息系統(tǒng)有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/5/8