Các tổ chức quản lý tên miền như npm đã 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. Tuy nhiên, chúng tôi thường đưa vào các thư viện mà chúng tôi không sử dụng đầy đủ. Để 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 sử dụng 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á đoạn 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 dùng đến khi các tài sản lớn không cần thiết cạnh tranh về 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 ứng dụng chứa tham chiếu đến các ứng viên LCP bằng cách độ trễ khi những tài nguyên này có thể tải.
Mã không sử dụng 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), 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 thực thi. Mã không được sử dụng có thể gây ra sự chậm 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 góp phần làm cho trang phản hồi 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 đoạn mã không dùng đến, đồng thời cung cấp các chiến lược để cắt giảm mã không dùng đến khỏi thành phần JavaScript mà bạn chuyển đến người dùng 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 thấy 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 lập chỉ mục trong DevTools cũng cho bạn biết lượng mã CSS và JS trong ứng dụng chưa được dùng đến.
Bằng cách chỉ định cấu hình Lighthouse đầy đủ thông qua Node CLI, bạn có thể chạy quy trình kiểm tra Giảm JavaScript không sử dụng để theo dõi số lượng mã không sử dụng đượ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 đóng 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. Đưa trình bổ trợ vào tệp cấu hình gói web như mọi trình bổ trợ khác:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Mặc dù gói web thường được dùng để tạo các ứng dụng trang đơn, nhưng các gói khác, chẳng hạn như Parcel và Rollup, cũng có các công cụ trực quan hoá 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ó kèm theo trình bổ trợ này sẽ hiển thị sơ đồ cây có thể thu phóng của toàn bộ gói.
Hình ảnh này minh hoạ những phần trong gói của bạn lớn hơn các phần khác, nhờ đó, bạn có thể hiểu rõ hơn số lượng và kích thước của 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 dùng thư viện 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 nêu trên, 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 dữ liệu 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 chắc chắn rằng không được dùng ở bất cứ đâ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 cố gắng tìm cách chỉ nhập các thành phần mà bạn cần từ đó. Nếu bạn không sử dụng thư viện, hãy xoá thư viện đó. Nếu bạn không cần thư viện trong lượt tải trang ban đầu, hãy cân nhắc sử dụng phương thức tải từng phần.
Nếu bạn đang dùng gói web, hãy xem danh sách các trình bổ trợ tự động xoá đoạn mã không dùng đến khỏi các thư viện phổ biến.
Xoá 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 một cách có chọn lọc. Trong các 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ế nhẹ hơn luôn là các lựa chọn đáng cân nhắc. Tuy nhiên, trước khi xoá hoàn toàn thư viện khỏi ứng dụng, bạn cần phải cân nhắc độ phức tạp và công sức cần thiết cho một trong hai chiến lược này.