Xoá JavaScript không dùng đến

JavaScript không được sử dụng có thể làm chậm tốc độ tải trang của bạn:

  • Nếu JavaScript ở trạng thái chặn hiển thị, trình duyệt phải tải xuống, phân tích cú pháp, biên dịch và đánh giá tập lệnh trước khi có thể thực hiện tất cả các tác vụ khác cần thiết để hiển thị trang.
  • Ngay cả khi JavaScript không đồng bộ (không chặn hiển thị), mã này vẫn cạnh tranh để giành băng thông với các tài nguyên khác trong khi tải xuống. Điều này ảnh hưởng đáng kể đến hiệu suất. Việc gửi mã không sử dụng qua mạng cũng gây lãng phí đối với người dùng thiết bị di động không có gói dữ liệu không giới hạn.

Cách quy trình kiểm tra JavaScript không sử dụng thất bại

Lighthouse sẽ gắn cờ mọi tệp JavaScript có hơn 20 kibibyte mã chưa sử dụng:

Ảnh chụp màn hình về quá trình kiểm tra.
Nhấp vào một giá trị trong cột URL để mở mã nguồn của tập lệnh trong thẻ mới.

Cách xoá JavaScript không dùng đến

Phát hiện JavaScript không dùng đến

Thẻ Phạm vi lập chỉ mục trong Công cụ của Chrome cho nhà phát triển có thể cung cấp cho bạn thông tin chi tiết theo từng dòng về mã không dùng đến.

Lớp Coverage trong Puppeteer có thể giúp bạn tự động hoá quy trình phát hiện mã không dùng đến và trích xuất mã đã dùng.

Công cụ xây dựng hỗ trợ xoá mã không dùng đến

Hãy xem các hoạt động kiểm thử Tooling.Report sau đây để tìm hiểu xem trình đóng gói của bạn có hỗ trợ các tính năng giúp tránh hoặc xoá mã không dùng đến dễ dàng hơn hay không:

Hướng dẫn dành riêng cho ngăn xếp

Angular

Nếu bạn đang sử dụng Angular CLI, hãy thêm sơ đồ nguồn vào bản dựng chính thức để kiểm tra các gói của bạn.

Drupal

Hãy cân nhắc xoá các tài sản JavaScript không dùng đến và chỉ đính kèm các thư viện Drupal cần thiết vào trang hoặc thành phần liên quan trên trang. Xem phần Xác định thư viện để biết thông tin chi tiết.

Joomla

Hãy cân nhắc giảm hoặc chuyển đổi số lượng tiện ích Joomla tải JavaScript không dùng đến trên trang của bạn.

Magento

Tắt tính năng nhóm JavaScript tích hợp của Magento.

Thể hiện cảm xúc

Nếu bạn không muốn hiển thị phía máy chủ, hãy phân tách các gói JavaScript bằng React.lazy(). Nếu không, hãy phân tách mã bằng một thư viện của bên thứ ba, chẳng hạn như các thành phần có thể tải.

Vue

Nếu bạn không kết xuất phía máy chủ và đang sử dụng bộ định tuyến Vue, hãy phân tách các gói theo các tuyến tải từng phần.

WordPress

Hãy cân nhắc giảm hoặc chuyển đổi số lượng trình bổ trợ WordPress tải JavaScript không dùng đến trong trang của bạn.

Tài nguyên