?背景

作者在開發過程中，有遇到以下此場景:

PM：請把關于出價場景的邏輯優化下，在出價前進行判斷是否命中風控。

FE：安排。

在開發過程中，經常會通過搜索關鍵詞來快速找到對應文件。此次也不例外，當在代碼倉庫搜索時，結果卻有多個對應文件。經過長時間的排查驗證發現有些文件是沒有被引用的，影響了開發效率。

能不能通過一種方式來提高此類問題的開發效率？

拆解問題

表面原因

項目倉庫存在未引用的文件，干擾開發人員的判斷，影響開發效率。

未引用的文件一開始就是未被引用的？

深層原因

?人為原因，需求迭代過程中，未及時移除或者標記無用文件。

?對于深層原因，不再敘述，因地制宜。

?接下來主要聊聊表面原因如何解決，有沒有方法可以將倉庫中無用的文件檢索出來并適當移除？

分析整理

?構建工具：webpack

?技術棧：vue、react

?基于這些，可以劃定解決的方向：基于webpack?搭建的vue?或者react項目。

?webpack官網有這么一段話：

?本質上，webpack? 是一個用于現代 JavaScript? 應用程序的 靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部從一個或多個入口點構建一個 依賴圖(dependency graph)，然后將你項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態資源，用于展示你的內容。

?這段話有提到依賴圖，也是解決問題的突破口。大致如下圖：

思路

?整體思路如上圖，接下來將圍繞三個方向去細聊下。

• 如何獲取所有文件
• 如何獲取依賴文件
• 如何獲取無用文件

設計思路

如何獲取所有文件

?所有文件是指什么？

?是指能覆蓋webpack?構建時依賴文件的集合。通俗的講就是[所有文件]?的文件數量一定大于等于[依賴文件]的文件數量。

?使用webpack?構建時是需要指定入口文件的位置。比如vue?的項目通常為[src/main.js]?，同時大多數依賴文件都會放在[src/**]文件夾下。

?基于此思考，參考vue與react?項目目錄結構，需要設計[所有文件]?的獲取入口位置，默認為src，可通過配置參數傳入。

?讀取文件的實現可以使用node?能力。通過node遞歸讀取指定入口目錄下的所有文件。

node讀取文件

如何獲取依賴文件

?簡介上有這么一句話：webpack 提供了多種接口來自定義編譯過程。

?而webpack又是基于依賴分析的構建方式。

?結合這些就可以在編譯過程中獲取到當前的依賴文件。

?獲取并不復雜，webpack的插件接口允許用戶直接介入編譯過程，只需開發一個自定義插件，在合適的編譯階段執行即可。

?目標是獲取依賴文件集合，故可以在webpack?編譯完成后，即將退出時搞些事情。查閱plugins?相關鉤子，確定使用compiler?鉤子下的done鉤子。

done鉤子: 在 compilation 完成時執行。

獲取依賴文件

如何獲取無用文件

?截止目前，已經獲取到兩份數據：[所有文件]與[依賴文件]。

?那么無用文件就很簡單，只要將依賴文件從所有文件剔除，剩余的既是無用文件~

方案復盤

?通過上述流程，已經可以滿足當前訴求。

?不過在反復測試驗證過程中，發現一些不足并進行了優化。比如：

• 支持輸出執行的文件記錄日志
• 支持自動刪除無用文件
• 支持分析指定類型結尾的文件
• 支持忽略無需分析的文件夾
• 其他優化

?詳細代碼可以參考：??https://s1.zhuanstatic.com/common/u/article-dependencyAnalysisPlugin.js??