移除用不到的程式碼

npm 等註冊服務讓任何人都能下載及使用超過 五十萬個公開套件,進而改變 JavaScript 世界,讓這個世界變得更美好。但我們經常會納入未完全使用的程式庫。如要修正這個問題,請分析套件,偵測未使用的程式碼,然後移除未使用不必要的程式庫。

移除未使用的程式碼,即可改善網站的Core Web Vitals。舉例來說,如果不必要的大型素材資源與其他資源爭奪頻寬,Largest Contentful Paint 就可能受到未使用的程式碼影響。如果大型 JavaScript 素材資源只在用戶端算繪標記,且包含 LCP 候選項目的參照,則 LCP 也會受到影響,因為這會延遲這些資源的載入時間

未使用的程式碼也會影響 Interaction to Next Paint (INP),因為即使是未使用的 JavaScript 也必須下載、剖析、編譯,然後執行。未使用的程式碼可能會在資源載入時間、記憶體用量和主執行緒活動中造成不必要的延遲,導致頁面回應速度變慢。

本指南說明如何分析專案的程式碼庫,找出未使用的程式碼,並提供從您在實際工作環境中提供給使用者的 JavaScript 資產中裁剪未使用的程式碼的策略。

分析套裝組合

開發人員工具可顯示所有網路要求的大小:

  1. 按下 `Control + Shift + J` 鍵 (在 Mac 上為 `Command + Option + J` 鍵) 開啟開發人員工具。
  2. 按一下 [網路] 分頁標籤。
  3. 勾選「Disable cache」核取方塊。
  4. 請重新載入頁面。
含有套裝組合要求的網路面板
開發人員工具顯示 JavaScript 檔案的大小。

開發人員工具中的「Coverage」分頁也會顯示應用程式中未使用的 CSS 和 JS 程式碼數量。

開發人員工具中的程式碼涵蓋率
「涵蓋率」分頁。

透過 Node CLI 指定完整的 Lighthouse 設定,您可以執行「減少未使用的 JavaScript」稽核作業,追蹤應用程式會傳送多少未使用的程式碼。

Lighthouse「減少未使用的 JavaScript」報表
減少未使用的 JavaScript 報表。

如果您使用 webpack 做為套件編譯器,Webpack Bundle Analyzer 可協助您調查套件的組成元件。就像其他外掛程式一樣,在 webpack 設定檔中加入外掛程式:

module.exports = {
 
//...
  plugins
: [
   
//...
   
new BundleAnalyzerPlugin()
 
]
}

雖然 webpack 通常用於建構單頁應用程式,但其他套件處理器 (例如 ParcelRollup) 也提供可用於分析套件的視覺化工具。

重新載入含有此外掛程式的應用程式,即可顯示可縮放的整個套件的樹狀圖。

Webpack Bundle Analyzer
Webpack Bundle Analyzer 的樹狀圖檢視畫面。

這項示意圖會顯示套件的哪些部分比其他部分大,讓您更瞭解應用程式匯入的程式庫數量和大小。這有助於找出您是否使用任何未使用的或不必要的程式庫。

移除未使用的程式庫

在前述樹狀圖影像中,單一 @firebase 網域內有許多套件。如果您的網站只需要 Firebase 資料庫元件,請更新匯入作業,以便擷取該程式庫:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

如果您認為某個神秘的套件不會在任何地方使用,請退一步,查看哪些頂層依附元件會使用該套件。嘗試找出方法,只從中匯入所需的元件。如果您沒有使用程式庫,請將其移除。如果初始網頁載入作業不需要使用程式庫,請考慮延遲載入

如果您使用 webpack,請查看自動從熱門程式庫移除未使用的程式碼的外掛程式清單

移除不必要的程式庫

並非所有程式庫都能細分為部分,並選擇性匯入。在這些情況下,請考慮是否可以完全移除程式庫。您不妨考慮建立自訂解決方案,或使用較輕量化的替代方案。不過,在從應用程式中完全移除程式庫之前,請務必評估這兩種策略的複雜度和所需的努力程度。