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.](https://developer.chrome.com/static/docs/lighthouse/performance/unused-javascript/image/a-screenshot-the-audit-5e55ec7ebbacf.jpg?authuser=5&hl=vi)
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.