本發(fā)明涉及web應(yīng)用程序開發(fā)領(lǐng)域，具體地說是一種基于vue的項(xiàng)目拆分方法、系統(tǒng)、設(shè)備及介質(zhì)。

背景技術(shù)：

1、在web開發(fā)領(lǐng)域，隨著項(xiàng)目規(guī)模的擴(kuò)大和功能的復(fù)雜化，代碼量會(huì)急劇增加，同時(shí)伴隨著一系列問題，如代碼冗余、代碼重復(fù)、依賴關(guān)系復(fù)雜等。當(dāng)項(xiàng)目需要拆分模塊時(shí)，往往會(huì)耗費(fèi)極大的人力資源來確認(rèn)代碼依賴路徑及留存關(guān)系。

2、為了解決上述問題，react和angular框架社區(qū)已經(jīng)有了可用的工具如：react-modules，ng-cli，只是使用率最高vue.js框架還缺少類似功能的工具。

3、故如何實(shí)現(xiàn)對(duì)vue.js項(xiàng)目代碼的模塊拆分是目前亟待解決的技術(shù)問題。

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

1、本發(fā)明的技術(shù)任務(wù)是提供一種基于vue的項(xiàng)目拆分方法、系統(tǒng)、設(shè)備及介質(zhì)，來解決如何實(shí)現(xiàn)對(duì)vue.js項(xiàng)目代碼的模塊拆分的問題。

2、本發(fā)明的技術(shù)任務(wù)是按以下方式實(shí)現(xiàn)的，一種基于vue的項(xiàng)目拆分方法，該方法是通過tree-shaking技術(shù)，并結(jié)合模塊化設(shè)計(jì)、代碼拆分即按需加載策略，實(shí)現(xiàn)對(duì)vue.js項(xiàng)目代碼的模塊拆分；具體如下：

3、解析目標(biāo)區(qū)域文件為ast(抽象語法樹)對(duì)象：將vue項(xiàng)目中的源代碼文件解析為ast對(duì)象，用于后續(xù)的代碼分析和操作；其中，vue項(xiàng)目中的源代碼文件格式包括.vue、.js及.ts；

4、收集記錄目標(biāo)區(qū)域文件的導(dǎo)入導(dǎo)出依賴、狀態(tài)函數(shù)定義內(nèi)容：遍歷ast對(duì)象，收集并記錄每個(gè)文件的導(dǎo)入和導(dǎo)出語句，每個(gè)文件的導(dǎo)入和導(dǎo)出語句反應(yīng)文件之間的依賴關(guān)系；同時(shí)收集文件中定義的狀態(tài)及函數(shù)內(nèi)容，用于后續(xù)分析組件的依賴和狀態(tài)管理；再將收集的依賴實(shí)體狀態(tài)、依賴關(guān)系以及引用目錄記錄于全局的數(shù)據(jù)結(jié)構(gòu)map中生成依賴鏈路；

5、遍歷解析需要保留的文件：根據(jù)用戶需要或預(yù)設(shè)規(guī)則，確定需要保留的關(guān)鍵文件或模塊，再從需要保留的關(guān)鍵文件或模塊出發(fā)，遍歷需要保留的關(guān)鍵文件或模塊，并分析需要保留的關(guān)鍵文件或模塊內(nèi)部引用的依賴鏈路；其中，依賴鏈路包括直接依賴和間接依賴；

6、根據(jù)需要保留的文件引用的依賴鏈路標(biāo)記被使用的文件依賴：在遍歷過程中，對(duì)于每個(gè)被引用的依賴(無論是直接還是間接)標(biāo)記相應(yīng)的依賴文件，表明相應(yīng)的依賴文件在項(xiàng)目中被實(shí)際使用；

7、根據(jù)使用標(biāo)記刪除未使用的代碼：在完成所有文件的依賴標(biāo)記后，遍歷整個(gè)項(xiàng)目的源代碼文件，檢查每個(gè)文件的導(dǎo)入和導(dǎo)出語句以及內(nèi)部代碼；其中，對(duì)于未被任何保留文件或模塊引用的導(dǎo)入語句、導(dǎo)出語句以及相關(guān)的內(nèi)部代碼(如未使用的變量、函數(shù)等)，執(zhí)行刪除操作，消除未使用的代碼，并對(duì)刪除后的代碼結(jié)構(gòu)進(jìn)行驗(yàn)證和優(yōu)化，確保刪除操作不會(huì)破壞項(xiàng)目的正常運(yùn)行或引入新的錯(cuò)誤。

8、作為優(yōu)選，解析目標(biāo)區(qū)域文件為ast對(duì)象過程中，使用javascript或typescript解析器(如babel、acorn等)進(jìn)行，確保準(zhǔn)確地將源代碼轉(zhuǎn)換為ast對(duì)象；具體為：

9、使用javascript或typescript解析器中的babel插件將項(xiàng)目里的主要代碼文件解析為ast對(duì)象，babel插件在前端項(xiàng)目構(gòu)建腳手架(如webpack)或者node.js服務(wù)中執(zhí)行，使用專門解析vue代碼的babel插件(如vue-loader)可以提高處理ast對(duì)象的準(zhǔn)確率；同時(shí)根據(jù)babel插件的期望運(yùn)行環(huán)境使用對(duì)應(yīng)的語言編寫自定義插件，即使用babel插件的parse部分解析項(xiàng)目代碼為ast對(duì)象，收集對(duì)應(yīng)ast對(duì)象的狀態(tài)函數(shù)實(shí)體定義及實(shí)體的導(dǎo)入導(dǎo)出關(guān)聯(lián)信息。

10、作為優(yōu)選，ast對(duì)象包括源代碼的完整結(jié)構(gòu)信息，用于后續(xù)的優(yōu)化處理。

11、作為優(yōu)選，收集記錄目標(biāo)區(qū)域文件的導(dǎo)入導(dǎo)出依賴、狀態(tài)函數(shù)定義內(nèi)容過程中，還包括對(duì)vue組件特有屬性的處理，對(duì)vue組件特有屬性的處理包括props、data、computed，以便更全面地了解組件的依賴關(guān)系和狀態(tài)管理。

12、作為優(yōu)選，全局的數(shù)據(jù)結(jié)構(gòu)map中存儲(chǔ)信息的形式為：

13、以一個(gè)文件信息作為一個(gè)對(duì)象節(jié)點(diǎn)，文件目錄作為節(jié)點(diǎn)id，應(yīng)用的導(dǎo)入導(dǎo)出實(shí)體作為關(guān)鍵屬性，通過不同對(duì)象節(jié)點(diǎn)的導(dǎo)入和導(dǎo)出屬性關(guān)聯(lián)起來形成依賴鏈路，方便后續(xù)步驟檢索應(yīng)用；

14、作為優(yōu)選，遍歷解析需要保留的文件過程中，支持動(dòng)態(tài)配置，允許用戶根據(jù)需要自定義保留文件的規(guī)則和條件。

15、更優(yōu)地，根據(jù)需要保留的文件引用的依賴鏈路標(biāo)記被使用的文件依賴過程中，采用深度優(yōu)先搜索(dfs)算法或廣度優(yōu)先搜索(bfs)算法，確保準(zhǔn)確無遺漏地標(biāo)記所有被使用的依賴。

16、一種基于vue的項(xiàng)目拆分系統(tǒng)，該系統(tǒng)用于實(shí)現(xiàn)如上述的基于vue的項(xiàng)目拆分方法；該系統(tǒng)包括：

17、解析模塊：用于將源代碼文件解析為ast對(duì)象；

18、依賴收集模塊：用于收集并記錄文件的導(dǎo)入導(dǎo)出依賴及狀態(tài)函數(shù)定義內(nèi)容；

19、依賴分析模塊：用于遍歷解析需要保留的文件，并根據(jù)需要保留的文件引用的依賴鏈路標(biāo)記被使用的文件依賴；

20、優(yōu)化處理模塊：用于根據(jù)使用標(biāo)記刪除未使用的代碼，并優(yōu)化剩余代碼的結(jié)構(gòu)。

21、一種電子設(shè)備，包括：存儲(chǔ)器和至少一個(gè)處理器；

22、其中，所述存儲(chǔ)器上存儲(chǔ)有計(jì)算機(jī)程序；

23、所述至少一個(gè)處理器執(zhí)行所述存儲(chǔ)器存儲(chǔ)的計(jì)算機(jī)程序，使得所述至少一個(gè)處理器執(zhí)行如上述的基于vue的項(xiàng)目拆分方法。

24、一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)中存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序可被處理器執(zhí)行以實(shí)現(xiàn)如上述的基于vue的項(xiàng)目拆分方法。

25、本發(fā)明的基于vue的項(xiàng)目拆分方法、系統(tǒng)、設(shè)備及介質(zhì)具有以下優(yōu)點(diǎn)：

26、(一)本發(fā)明可以在需要拆分vue項(xiàng)目代碼的業(yè)務(wù)場(chǎng)景下提高開發(fā)人員的工作效率，減少人力成本；

27、(二)本發(fā)明通過tree-shaking技術(shù)，并結(jié)合模塊化設(shè)計(jì)、代碼拆分、按需加載等策略，解決了vue.js框架社區(qū)缺少模塊拆分工具的問題，實(shí)現(xiàn)了對(duì)vue.js項(xiàng)目代碼的模塊拆分；

28、(三)當(dāng)以vue.js為框架開發(fā)的前端項(xiàng)目需要按照功能模塊拆分時(shí)，可以通過本發(fā)明減少對(duì)項(xiàng)目功能依賴分析的投入精力資源，提高開發(fā)人員的工作效率。

技術(shù)特征：

1.一種基于vue的項(xiàng)目拆分方法，其特征在于，該方法是通過tree-shaking技術(shù)，并結(jié)合模塊化設(shè)計(jì)、代碼拆分即按需加載策略，實(shí)現(xiàn)對(duì)vue.js項(xiàng)目代碼的模塊拆分；具體如下：

2.根據(jù)權(quán)利要求1所述的基于vue的項(xiàng)目拆分方法，其特征在于，解析目標(biāo)區(qū)域文件為ast對(duì)象過程中，使用javascript或typescript解析器進(jìn)行，確保準(zhǔn)確地將源代碼轉(zhuǎn)換為ast對(duì)象；具體為：

3.根據(jù)權(quán)利要求1所述的基于vue的項(xiàng)目拆分方法，其特征在于，ast對(duì)象包括源代碼的完整結(jié)構(gòu)信息，用于后續(xù)的優(yōu)化處理。

4.根據(jù)權(quán)利要求1所述的基于vue的項(xiàng)目拆分方法，其特征在于，收集記錄目標(biāo)區(qū)域文件的導(dǎo)入導(dǎo)出依賴、狀態(tài)函數(shù)定義內(nèi)容過程中，還包括對(duì)vue組件特有屬性的處理，對(duì)vue組件特有屬性的處理包括props、data、computed。

5.根據(jù)權(quán)利要求1所述的基于vue的項(xiàng)目拆分方法，其特征在于，全局的數(shù)據(jù)結(jié)構(gòu)map中存儲(chǔ)信息的形式為：

6.根據(jù)權(quán)利要求1所述的基于vue的項(xiàng)目拆分方法，其特征在于，遍歷解析需要保留的文件過程中，支持動(dòng)態(tài)配置，允許用戶根據(jù)需要自定義保留文件的規(guī)則和條件。

7.根據(jù)權(quán)利要求1-6中任一項(xiàng)所述的基于vue的項(xiàng)目拆分方法，其特征在于，根據(jù)需要保留的文件引用的依賴鏈路標(biāo)記被使用的文件依賴過程中，采用深度優(yōu)先搜索算法或廣度優(yōu)先搜索算法，確保準(zhǔn)確無遺漏地標(biāo)記所有被使用的依賴。

8.一種基于vue的項(xiàng)目拆分系統(tǒng)，其特征在于，該系統(tǒng)用于實(shí)現(xiàn)如權(quán)利要求1至7任一項(xiàng)所述的基于vue的項(xiàng)目拆分方法；該系統(tǒng)包括：

9.一種電子設(shè)備，其特征在于，包括：存儲(chǔ)器和至少一個(gè)處理器；

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)中存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序可被處理器執(zhí)行以實(shí)現(xiàn)如權(quán)利要求1至7中任一項(xiàng)所述的基于vue的項(xiàng)目拆分方法。

技術(shù)總結(jié)
本發(fā)明公開了基于vue的項(xiàng)目拆分方法、系統(tǒng)、設(shè)備及介質(zhì)，屬于web應(yīng)用程序開發(fā)領(lǐng)域，本發(fā)明要解決的技術(shù)問題為如何實(shí)現(xiàn)對(duì)vue.js項(xiàng)目代碼的模塊拆分，采用的技術(shù)方案為：該方法是通過Tree?Shaking技術(shù)，并結(jié)合模塊化設(shè)計(jì)、代碼拆分即按需加載策略，實(shí)現(xiàn)對(duì)vue.js項(xiàng)目代碼的模塊拆分；具體如下：解析目標(biāo)區(qū)域文件為AST對(duì)象；收集記錄目標(biāo)區(qū)域文件的導(dǎo)入導(dǎo)出依賴、狀態(tài)函數(shù)定義內(nèi)容；遍歷解析需要保留的文件；根據(jù)需要保留的文件引用的依賴鏈路標(biāo)記被使用的文件依賴；根據(jù)使用標(biāo)記刪除未使用的代碼。

技術(shù)研發(fā)人員：范開鑫,魏子重,李銳
受保護(hù)的技術(shù)使用者：山東浪潮科學(xué)研究院有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/6