確定 app.module.ts 文件中未使用的 Angular 模塊

Question

我繼承了一個 angular 應用程序，它在陽光下導入所有內容，導致 vendor.bundle.js 為 8mb。

是否有實用程序可以讓我知道哪些模塊未在使用，並且可以安全地刪除？

或者 AOT 會負責嗎？

另外，如果沒有與之相關的導入，我是否需要刪除 node_modules 文件夾？ 還是因為 AOT 無論如何都不會接受它，所以將它留在那里不會有什么壞處？

Answer 1

據我所知，AOT 只會刪除未使用或未導入NgModule 。 未在任何地方導入的代碼（包括 node_modules）不會包含在包中。 有幾種方法可以找到未使用的代碼。

配置 TypeScript 以抱怨未使用的導入

使用--noUnusedLocals 編譯器選項將導致未使用的導入和局部變量引發打字稿錯誤。 其中大部分應該已經由 AOT 處理，但您可能會發現 AOT 認為可能需要的未使用的導入。

探索捆綁

瀏覽包有助於查看哪些文件占用的空間最大。 它不會向您顯示哪些依賴項觸發了它們的導入，但會幫助您確定優先級。

1. 將--sourceMap和--statsJson標志添加到您的ng build 。
2. 使用webpack-bundle-analyzer讀取dist/stats.json文件以查看包中的內容
3. 要探索在 prod 構建期間組合的模塊，請使用“source-map-explorer”

試錯

雖然這是查找未使用代碼的自動化程度最低的方法，但默認情況下，Angular 編譯器會很好地檢查以確保在運行應用程序之前將所需的組件包含在包中。 因此，如果您搜索了文件並且認為沒有使用模塊，請嘗試刪除導入並查看 CLI 是否引發編譯錯誤。