Tổ chức quản lý tên miền như npm có đã biến đổi thế giới JavaScript trở nên tốt đẹp hơn 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. Nhưng chúng tôi thường đưa vào các thư viện mà chúng tôi chưa sử dụng đầy đủ. Để khắc phục vấn đề này, hãy phân tích gói của bạn để phát hiện mã không dùng đến, hãy xoá các thư viện không sử dụng và không cần thiết.
Tác động đối với Chỉ số quan trọng chính của 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. Nội dung lớn nhất hiển thị, ví dụ: 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 để giành 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 kích thước lớn Những thành phần JavaScript chỉ hiển thị mã đánh dấu trên ứng dụng chứa thông tin tham chiếu đến các ứng viên LCP bằng cách trì hoãn thời điểm những 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 với nội dung hiển thị tiếp theo (INP), bởi vì ngay cả JavaScript không được sử dụng cũng phải được tải xuống, phân tích cú pháp, biên dịch rồi thực thi. Đoạn mã không dùng đến có thể gây ra độ trễ không cần thiết trong quá trình tải tài nguyên thời gian, mức sử dụng bộ nhớ và hoạt động của luồng chính góp phần gây ra lỗi trang khả năng phản hồi nhanh.
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 sử dụng và cung cấp các chiến lược để cắt giảm đoạn mã không dùng đến trong những tài sản JavaScript mà bạn chuyển đến người dùng của bạn trong phiên bản chính thức.
Phân tích gói của bạn
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 "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Mạng.
- Chọn hộp kiểm Tắt bộ nhớ đệm.
- Tải lại trang.
Thẻ Phạm vi bao phủ trong Công cụ cho nhà phát triển cũng cho bạn biết có bao nhiêu mã CSS và JS trong ứng dụng của bạn chưa được sử dụng.
Bằng cách chỉ định cấu hình Lighthouse đầy đủ thông qua Node CLI của nó, bạn có thể chạy Giảm số lượng mã kiểm tra JavaScript không dùng đến để theo dõi số lượng mã không sử dụng được chuyển với ứng dụng của bạn/
Nếu bạn sử dụng webpack làm trình gói, Trình phân tích gói web có thể giúp bạn điều tra những thành phần tạo nên gói. Đưa trình bổ trợ này vào trong tệp cấu hình webpack giống như bất kỳ trình bổ trợ nào khác:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Mặc dù webpack thường được dùng để xây dựng các ứng dụng trang đơn, nhưng các phương thức trình gói, chẳng hạn như Parcel và Tổng hợp cũng có các công cụ trực quan hoá có thể sử dụng để phân tích gói của bạn.
Quá trình tải lại ứng dụng bằng trình bổ trợ đi kèm này sẽ hiển thị sơ đồ cây có thể thu phóng của toàn bộ gói của bạn.
Hình ảnh này cho thấy phần nào trong gói của bạn lớn hơn những thư viện khác, nhờ đó bạn có thể hiểu rõ hơn về số lượng cũng như quy mô thư viện ứng dụng của bạn nhập. Điều này có thể giúp xác định xem bạn có đang sử dụng bất kỳ hoặc các thư viện không cần thiết.
Xoá thư viện không dùng đến
Trong hình ảnh biểu đồ dạng cây trước đó, có khá nhiều gói trong một
@firebase. Nếu trang web của bạn chỉ cần thành phần cơ sở dữ liệu Firebase,
cập nhật lệnh 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 trông bí ẩn mà bạn hoàn toàn chắc chắn là gói này không được sử dụng ở bất cứ đâu, hãy lùi lại một chút và xem phần phụ thuộc nào trong số các phần phụ thuộc cấp cao nhất của bạn đang sử dụng nó. Hãy cố gắng tìm cách để chỉ nhập các thành phần bạn cần từ đó. Nếu bạn không sử dụng thư viện nào, hãy xoá thư viện đó. Nếu thư viện không bắt buộc đối với tải trang ban đầu, hãy cân nhắc tải từng phần nó.
Nếu bạn đang sử dụng webpack, hãy xem danh sách các plugin 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 nhỏ 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. Việc xây dựng một giải pháp tuỳ chỉnh hoặc sử dụng một giải pháp thay thế đơn giản hơn nên luôn là đáng cân nhắc. Tuy nhiên, bạn cần cân nhắc tính phức tạp và cần nỗ lực cho một trong hai chiến lược này trước khi xoá thư viện hoàn toàn khỏi ứng dụng của bạn.