Các cơ sở đăng ký như npm đã cải thiện thế giới JavaScript bằng cách cho phép mọi người tải xuống và sử dụng hơn nửa triệu gói công khai. Tuy nhiên, chúng ta thường đưa vào các thư viện mà chúng ta không sử dụng hết. Để khắc phục vấn đề này, hãy phân tích gói để phát hiện mã không dùng đến, sau đó xoá các thư viện không dùng đến và không cần thiết.
Tác động đến Các chỉ số quan trọng về trang web
Bằng cách xoá mã không dùng đến, bạn có thể cải thiện Các chỉ số quan trọng về trang web của trang web. Ví dụ: Thời gian hiển thị nội dung lớn nhất có thể bị ảnh hưởng bởi mã không sử dụng khi các thành phần lớn không cần thiết cạnh tranh băng thông với các tài nguyên khác. LCP cũng có thể bị ảnh hưởng nếu các thành phần JavaScript lớn chỉ hiển thị mã đánh dấu trên máy khách chứa tệp tham chiếu đến các đề xuất LCP bằng cách trì hoãn thời điểm các tài nguyên này có thể tải.
Mã không dùng đến cũng có thể ảnh hưởng đến Lượt tương tác đến nội dung hiển thị tiếp theo (INP), vì ngay cả JavaScript không dùng đến cũng phải được tải xuống, phân tích cú pháp, biên dịch rồi mới thực thi. Mã không sử dụng có thể gây ra độ trễ không cần thiết về thời gian tải tài nguyên, mức sử dụng bộ nhớ và hoạt động của luồng chính, dẫn đến khả năng phản hồi trang kém.
Hướng dẫn này giải thích cách phân tích cơ sở mã của dự án để tìm mã không dùng đến, đồng thời đưa ra các chiến lược để loại bỏ mã không dùng đến khỏi các thành phần JavaScript mà bạn gửi đến người dùng trong phiên bản chính thức.
Phân tích gói
Công cụ cho nhà phát triển có thể cho bạn biết kích thước của tất cả các yêu cầu mạng:
- Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
- Nhấp vào thẻ Mạng.
- Chọn hộp đánh dấu Tắt bộ nhớ đệm.
- Tải lại trang.
Thẻ Coverage (Mức độ sử dụng) trong DevTools cũng cho bạn biết lượng mã CSS và JS trong ứng dụng không được sử dụng.
Bằng cách chỉ định cấu hình Lighthouse đầy đủ thông qua CLI của nút, bạn có thể chạy quy trình kiểm tra Giảm mã JavaScript không dùng đến để theo dõi lượng mã không dùng đến được vận chuyển cùng với ứng dụng của bạn.
Nếu bạn sử dụng webpack làm trình tạo gói, thì Trình phân tích gói Webpack có thể giúp bạn điều tra thành phần tạo nên gói. Thêm trình bổ trợ vào tệp cấu hình webpack như mọi trình bổ trợ khác:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Mặc dù webpack thường được dùng để tạo ứng dụng một trang, nhưng các trình tạo gói khác, chẳng hạn như Parcel và Rollup, cũng có các công cụ trực quan mà bạn có thể dùng để phân tích gói của mình.
Việc tải lại ứng dụng có trình bổ trợ này sẽ hiển thị một bản đồ cây có thể thu phóng của toàn bộ gói.
Hình ảnh trực quan này cho thấy những phần nào của gói lớn hơn các phần khác, nhờ đó, bạn có thể hiểu rõ hơn về số lượng và kích thước của các thư viện mà ứng dụng nhập. Điều này có thể giúp xác định xem bạn có đang sử dụng thư viện nào không dùng đến hoặc không cần thiết hay không.
Xoá thư viện không dùng đến
Trong hình ảnh sơ đồ cây trước, có khá nhiều gói trong một miền @firebase. Nếu trang web của bạn chỉ cần thành phần cơ sở dữ liệu firebase, hãy cập nhật các tệp nhập để tìm nạp thư viện đó:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Đối với gói có vẻ bí ẩn mà bạn khá chắc chắn là không được sử dụng ở bất kỳ đâu, hãy lùi lại một bước và xem phần phụ thuộc cấp cao nhất nào đang sử dụng gói đó. Hãy tìm cách chỉ nhập các thành phần bạn cần từ thư viện đó. Nếu bạn không sử dụng thư viện, hãy xoá thư viện đó. Nếu không cần thư viện cho lần tải trang đầu tiên, hãy cân nhắc tải lười thư viện đó.
Nếu bạn đang sử dụng webpack, hãy xem danh sách các trình bổ trợ tự động xoá mã không dùng đến khỏi các thư viện phổ biến.
Xoá các thư viện không cần thiết
Không phải thư viện nào cũng có thể được chia thành các phần và nhập có chọn lọc. Trong những trường hợp này, hãy cân nhắc xem bạn có thể xoá hoàn toàn thư viện hay không. Bạn luôn nên cân nhắc việc xây dựng một giải pháp tuỳ chỉnh hoặc tận dụng một giải pháp thay thế nhẹ hơn. Tuy nhiên, điều quan trọng là bạn phải cân nhắc mức độ phức tạp và nỗ lực cần thiết cho một trong hai chiến lược này trước khi xoá hoàn toàn thư viện khỏi ứng dụng.