涵蓋範圍:找出未使用的 JavaScript 和 CSS

凱斯巴斯克文
Kayce Basques

Chrome 開發人員工具的「涵蓋率」分頁可協助你找出未使用的 JavaScript 和 CSS 程式碼。移除用不到的程式碼可加快網頁載入速度,並節省行動裝置使用者的行動數據。

正在分析程式碼涵蓋率。
圖 1. 分析程式碼涵蓋率。

總覽

在網頁開發過程中,常會運送未使用的 JavaScript 或 CSS。舉例來說,假設您想要在網頁上使用 Bootstrap 的按鈕元件。如要使用按鈕元件,您必須在 HTML 中新增 Bootstrap 的樣式表連結,如下所示:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

此樣式表不只包含按鈕元件的程式碼,其中包含用於「所有」Bootstrap 元件的 CSS。但是您並未使用任何其他 Bootstrap 元件你的網頁正在下載許多 不需要的 CSS這個額外的 CSS 發生問題,原因如下:

  • 額外的程式碼會拖慢網頁載入速度。請參閱「轉譯封鎖 CSS」。
  • 如果使用者在行動裝置上存取網頁,額外程式碼就會佔用他們的行動數據。

開啟「涵蓋範圍」分頁

  1. 開啟指令選單
  2. 開始輸入 coverage 並選取「Show Coverage」指令,然後按下 Enter 鍵執行指令。「Coverage」分頁會在「Drawer」中開啟。
「涵蓋範圍」分頁。
圖 2. 「涵蓋範圍」分頁。

記錄程式碼涵蓋率

  1. 在「涵蓋範圍」分頁中點選下列任一按鈕:
    • 如要查看載入網頁所需的程式碼,請按一下「Start Instrumenting Coverage And Reload Page」圖示 重新載入
    • 如果想查看與網頁互動後使用的程式碼,請按一下「Instrument Coverage」錄音
  2. 如要停止記錄程式碼涵蓋率,請按一下「Stop Instrumenting Coverage andShow Results」停止

分析程式碼涵蓋率

「Coverage」分頁中的表格會顯示接受分析的資源,以及每項資源中使用的程式碼數量。按一下資料列,在「Sources」面板中開啟該資源,即可查看已使用的程式碼和未使用程式碼的逐行明細。任何未使用的程式碼行開頭都會加上紅線。

程式碼涵蓋率報表。
圖 3. 程式碼涵蓋率報表。
  • 「網址」欄是指所分析資源的網址。
  • 「類型」欄會指出資源是否包含 CSS、JavaScript 或兩者皆包含。
  • 「Total Bytes」(總位元組) 欄是資源的總大小,以位元組為單位。
  • 「Unused Bytes」資料欄是未使用的位元組數。
  • 最後,未命名的資料欄是「Total Bytes」(總位元組) 和「Unused Bytes」(未使用的位元組) 資料欄。長條的紅色部分是未使用的位元組。綠色區段使用的是位元組。