背景
作者在開發過程中，有遇到以下此場景:
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
結語
發現問題、設計方案、解決問題，共勉~
作者:魯寬寬
來源:微信公衆号:大轉轉FE
出處:https://mp.weixin.qq.com/s/hHUJp3hyWVn6Iqplcuaj8Q