Mức độ phù hợp: Tìm JavaScript và CSS không dùng đến

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Bảng điều khiển Phạm vi lập chỉ mục trong Công cụ của Chrome cho nhà phát triển có thể giúp bạn tìm thấy mã JavaScript và CSS không dùng đến. Việc xoá các đoạn mã không dùng đến có thể giúp tăng tốc độ tải trang và tiết kiệm dữ liệu di động của người dùng.

Phân tích mức độ sử dụng mã.

Tổng quan

Việc vận chuyển JavaScript hoặc CSS không dùng đến là một vấn đề thường gặp trong quá trình phát triển web. Ví dụ: giả sử bạn muốn sử dụng thành phần nút của Bố cục trên trang. Để sử dụng thành phần nút, bạn cần thêm một đường liên kết đến biểu định kiểu củaBootstrap trong HTML như sau:

...
<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>
...

Biểu định kiểu này không chỉ bao gồm mã cho thành phần nút. Tệp này chứa CSS cho tất cả các thành phần của Tự thân khởi nghiệp. Nhưng bạn không sử dụng bất kỳ thành phần Tự thân khởi nghiệp nào khác. Trang của bạn đang tải xuống nhiều CSS không cần thiết. CSS bổ sung này gây vấn đề vì những lý do sau:

  • Mã bổ sung làm chậm tốc độ tải trang. Xem CSS chặn hiển thị.
  • Nếu người dùng truy cập vào trang trên thiết bị di động, mã bổ sung sẽ sử dụng hết dữ liệu di động của họ.

Mở bảng điều khiển Mức độ phù hợp

  1. Mở trình đơn Command.

  2. Bắt đầu nhập coverage, chọn lệnh Show Coverage (Hiện mức độ sử dụng), rồi nhấn phím Enter để chạy lệnh này. Bảng điều khiển Phạm vi bao phủ sẽ mở ra trong Ngăn.

    Bảng điều khiển Mức độ phù hợp.

Mức độ sử dụng mã ghi lại

Để nắm bắt mức độ phù hợp của mã:

  1. Để đặt phạm vi mức độ phù hợp, trong thanh thao tác ở đầu bảng điều khiển Phạm vi bao phủ, hãy chọn Mỗi hàm hoặc Trên mỗi khối trong danh sách thả xuống.

  2. Để bắt đầu ghi, hãy nhấp vào làm mới Bắt đầu đo lường mức độ phù hợp và tải lại trang Bảng Phạm vi lập chỉ mục sẽ tải lại trang, ghi lại mã cần thiết để tải trang và tiếp tục quá trình ghi trong khi bạn tương tác với trang.

  3. Để ngừng ghi lại phạm vi của mã, hãy nhấp vào stop_circle Dừng đo lường phạm vi và hiển thị kết quả.

Phân tích mức độ sử dụng mã

Bảng trong bảng Phạm vi lập chỉ mục cho bạn biết những tài nguyên đã được phân tích và lượng mã được sử dụng trong mỗi tài nguyên.

Hãy nhấp vào một dòng để mở tài nguyên đó trong bảng điều khiển Nguồn và xem bảng chi tiết từng dòng về mã đã sử dụng và mã không dùng đến. Mọi dòng mã không sử dụng sẽ được đánh dấu bằng các đường màu đỏ bên cạnh cột có số dòng ở bên trái.

Báo cáo mức độ sử dụng mã.

  • Cột URL là URL của tài nguyên đã được phân tích.
  • Cột Type (Loại) cho biết tài nguyên đó chứa CSS, JavaScript hay cả hai.
  • Cột Tổng số byte là tổng kích thước của tài nguyên tính bằng byte.
  • Cột Số byte chưa dùng là số lượng byte không được dùng.
  • Cột cuối cùng chưa đặt tên là hình ảnh của các cột Tổng số byte và Số byte không sử dụng. Phần màu đỏ của thanh là các byte không được sử dụng. Phần màu xám là các byte được sử dụng.

Để lọc báo cáo theo URL, hãy chỉ định URL đó trong bộ lọc trên thanh thao tác.

Thanh trạng thái ở cuối bảng điều khiển Phạm vi lập chỉ mục cho bạn biết tỷ lệ phần trăm mã đã sử dụng. Thanh trạng thái có tính đến việc lọc.

Bên cạnh thanh bộ lọc, trong danh sách thả xuống, bạn có thể chọn Tất cả hoặc chỉ CSS hoặc JavaScript để xuất hiện trong báo cáo.

Để đưa mã phần mở rộng vào báo cáo, hãy bật check_box Tập lệnh nội dung.

Để xuất báo cáo, hãy nhấp vào tải xuống Xuất mức độ phù hợp.