npm 等註冊資料庫讓任何人都能下載及使用超過 100 萬個公開套件，讓 JavaScript 環境更臻完善。但我們仍常常有些不盡理想使用的程式庫如要修正這個問題，請分析套件以偵測未使用的程式碼，然後移除未使用的和非必要程式庫。
對網站體驗核心指標的影響
只要移除未使用的程式碼，就能改善網站的網站體驗核心指標。舉例來說，如果最大內容繪製，就會因為未使用的程式碼與其他資源競爭頻寬而受到影響。如果大型 JavaScript 資產只會在用戶端上轉譯標記，含有 LCP 候選項目參照，原因為在這些資源可載入時延遲，則也會影響 LCP。
未使用的程式碼也可能會影響與下一個繪製內容互動 (INP)，因為即使是未使用的 JavaScript，您還是必須下載、剖析、編譯並執行。未使用的程式碼可能會對資源載入時間、記憶體用量和主要執行緒活動造成不必要的延遲，進而導致頁面回應不佳。
本指南說明如何分析專案的程式碼集，找出未使用的程式碼，並提供相關策略，從您提供給實際工作環境使用者的 JavaScript 資產中，縮減未使用的程式碼。
分析您的軟體包
開發人員工具可顯示所有網路要求的大小：
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
- 按一下 [網路] 分頁標籤。
- 勾選「停用快取」核取方塊。
- 重新載入網頁。
開發人員工具中的「涵蓋率」分頁也會告訴您應用程式中有多少 CSS 和 JS 程式碼未使用。
透過 Node CLI 指定完整的 Lighthouse 設定後，即可執行 Reduce 未使用的 JavaScript 稽核，追蹤有多少未使用的程式碼與應用程式一併傳送/
如果使用 webpack 做為組合器，Webpack Bundle 分析工具可協助您調查組合的組成部分。就像其他外掛程式一樣，請在 webpack 設定檔中加入外掛程式：
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
雖然 Webpack 通常用於建構單頁應用程式，但其他套件 (例如 Parcel 和 Rollup) 也有可用於分析套件的視覺化工具。
如果以此外掛程式重新載入應用程式，系統會顯示整個套件的可縮放樹狀結構。
此圖表會顯示套件中哪些部分比其他部分更大，可讓您進一步瞭解應用程式匯入的程式庫數量和大小。這有助於確認您是否使用任何未使用或不必要的程式庫。
移除未使用的程式庫
在先前的樹狀圖圖片中，單一 @firebase 網域內有多個套件。如果您的網站只需要 Firebase 資料庫元件，請更新匯入作業以擷取該程式庫：
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
針對令人印象深刻的套件，且確定未在任何地點使用，您可以退一步查看哪個頂層依附元件正在使用該套件。請試著設法只匯入所需的元件。如果您目前不需使用某個程式庫，請移除該程式庫。如果初始頁面不需要載入程式庫，請考慮延遲載入。
如果您使用 Webpack，請參閱自動從熱門程式庫中移除未使用的程式碼的外掛程式清單。
移除不必要的程式庫
並非所有程式庫都能細分為部分，或選擇性匯入。在這種情況下，請考慮您是否能完全移除程式庫。建立自訂解決方案或使用較淺的替代方案，應一律考慮採用。不過，在完全從應用程式中移除程式庫之前，請務必審慎衡量上述任一策略的複雜度和力氣。