透過使用 Knip 和 PurgeCSS 刪除未使用的檔案和依賴項來提高效能

身為開發人員，我們不斷努力獲得更好的效能。無論是更快的載入時間、更靈敏的 UI 或是更小的套裝大小，效能都是直接影響使用者體驗的關鍵指標。一個可以顯著提高效能的被忽視的領域是清理未使用的檔案和依賴項。在本文中，我將探討如何識別和刪除死程式碼、未使用的套件和不必要的 CSS，從而使專案變得更精簡、更快。我們還將了解 Knip 和 PurgeCSS 等工具如何幫助自動化此流程。

為什麼清理未使用的程式碼很重要

隨著時間的推移，專案很容易累積不再使用的不必要的檔案、依賴項和 CSS 規則。這些殘留物會使您的專案變得臃腫，載入速度變慢，維護變得更加困難，並且可能會以您沒有立即意識到的方式影響效能。

透過定期刪除未使用的程式碼，您不僅可以縮小 JavaScript 套件和 CSS 檔案的大小，還可以縮短載入時間、減少記憶體使用量並減少應用程式的整體佔用空間。這種做法對於前端效能尤其重要，因為每一千位元組都很重要。

工作工具：Knip 和 PurgeCSS

現在我們了解了保持專案整潔的重要性，讓我們簡要討論一下可以用來自動化此流程的工具。 Knip 是一款旨在分析 JavaScript 專案並識別未使用的依賴項和檔案的工具，而 PurgeCSS 則專注於從樣式表中清理未使用的 CSS 類別。這些工具共同幫助確保只有您實際使用的程式碼才能投入生產。

提升績效：工作流程

1. 使用 Knip 審核您的依賴關係 清理專案的第一步是審核您的依賴項和模組。 Knip 掃描您的項目，分析匯入，並提供正在使用的內容和可以安全刪除的內容的報告。

安裝與設定

npm init @knip/config

跑步

npm run knip

Knip 產生一份報告，突出顯示未使用的依賴項和文件。這使您可以快速識別項目的哪些部分不再需要，從而幫助您縮小捆綁包大小並提高效能。

範例輸出

透過此摘要，您可以安全地查看您的文件。

2。使用 PurgeCSS 優化您的 CSS
CSS 就像 JavaScript 一樣，隨著時間的推移會變得臃腫。 PurgeCSS 是一個從樣式表中刪除未使用的 CSS 選擇器的工具，確保您的專案僅提供必要的樣式。

安裝

npm i -D @fullhuman/postcss-purgecss postcss

在建置後執行 PurgeCSS CLI

我更喜歡將其用作建置後腳本，但您可以為您需要的任何檔案配置該命令。只需指定您的建置資料夾和腳本的路徑即可。

"scripts": {
      "postbuild": "purgecss --css dist/assets/*.css --content dist/index.html dist/assets/*.js --output dist/assets"
},

透過此設置，PurgeCSS 將自動刪除未使用的 CSS 類，為您留下一個更小且優化的樣式表。
查看 PurgeCSS 文件以了解更多詳細資訊。

3。定期檢討與重構

雖然 Knip 和 PurgeCSS 等工具可以自動完成大部分清理過程，但定期檢查程式碼庫仍然很重要。養成重構舊程式碼、刪除未使用的元件的習慣，並確保您的專案保持輕量級且易於維護。使用 CI/CD 管道自動化此流程還可以幫助您在繼續開發時保持程式碼庫的精簡和高效能。

結論

提高應用程式的效能不僅在於編寫高效的程式碼；還在於編寫高效的程式碼。它還可以保持項目乾淨，沒有不必要的文件和依賴項。定期刪除未使用的程式碼不僅可以減少項目的大小，還可以縮短載入時間、簡化維護並增強使用者體驗。 Knip 和 PurgeCSS 等工具可以更輕鬆地自動執行此清理過程，但關鍵的一點是養成不斷審核和優化程式碼的習慣。

透過採用這種思維方式並利用這些工具，您可以確保您的專案保持快速、精簡和最佳化，以獲得最佳效能。

以上是透過使用 Knip 和 PurgeCSS 刪除未使用的檔案和依賴項來提高效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！