Xoá các đoạn mã không dùng đến

npm giúp bạn dễ dàng thêm mã vào dự án. Nhưng bạn có thực sự đang sử dụng tất cả các byte thừa đó không?

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 dễ dàng 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 của bạn để phát hiện mã không dùng đến. Sau đó, hãy xoá các thư viện không sử dụngkhô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 sử dụng bởi tình trạng tranh chấp băng thông tăng lên do các thành phần lớn hơn mức cần thiết. 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 trì hoãn khi những tài nguyên này có thể tải.

Các chỉ số khác như Thời gian phản hồi lần tương tác đầu tiên (FID)Lượt tương tác với lần hiển thị tiếp theo (INP) cũng có thể bị ảnh hưởng do mã không được sử dụng, vì ngay cả JavaScript không dùng đến vẫn 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 dùng đến có thể gây ra sự chậm trễ không cần thiết trong 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 giảm khả năng phản hồi của trang.

Hướng dẫn này sẽ giúp bạn xử lý mã không sử dụng của dự án bằng cách chỉ cho bạn cách phân tích cơ sở mã của dự án và cung cấp các chiến lược để cắt giảm mã không sử dụng từ các thành phần JavaScript mà bạn chuyển đến người dùng của mình 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 giúp bạn dễ dàng xem kích thước của tất cả các yêu cầu về mạng:

  1. 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.
  2. Nhấp vào thẻ Mạng.
  3. Chọn hộp kiểm Tắt bộ nhớ đệm.
  4. Tải lại trang.

Bảng điều khiển mạng có yêu cầu về gói

Thẻ Phạm vi lập chỉ mục trong Công cụ cho nhà phát triển cũng sẽ cho bạn biết lượng mã CSS và JS trong ứng dụng chưa được sử dụng.

Mức độ sử dụng mã trong Công cụ cho nhà phát triển

Bằng cách chỉ định cấu hình Lighthouse đầy đủ thông qua Node CLI, bạn cũng có thể sử dụng quy trình kiểm tra "JavaScript không sử dụng" để theo dõi số lượng mã không dùng đến đang được vận chuyển cùng ứng dụng.

Kiểm tra JS không dùng đến Lighthouse

Nếu bạn đang sử dụng webpack làm trình đóng gói, thì Trình phân tích gói Webpack sẽ 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ư ParcelRollup, 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.

Trình phân tích gói webpack

Việc sử dụng hình ảnh này cho phép bạn kiểm tra xem phần nào trong gói của mình lớn hơn các phần khác, cũng như nắm rõ hơn về tất cả các thư viện mà bạn đang 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 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';

Quan trọng là phải nhấn mạnh rằng quy trình này phức tạp hơn đáng kể đối với các ứng dụng lớn hơn.

Đối với gói trông 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 chút 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. Nếu bạn không sử dụng thư viện, hãy xoá thư viện đó. Nếu thư viện không cần thiết trong lượt tải trang ban đầu, hãy cân nhắc xem thư viện đó có thể tải từng phần hay không.

Trong trường hợp bạn sử dụng gói web, 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á thư viện không cần thiết

Không phải thư viện nào cũng có thể dễ dàng 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 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à những lựa chọn đáng để cân nhắc. Tuy nhiên, bạn cần cân nhắc mức độ phức tạp và công sức cần thiết cho một trong những nỗ lực này trước khi xoá hoàn toàn thư viện khỏi một ứng dụng.