Giảm tải JavaScript bằng cách phân tách mã

Houssein Djirdeh

Jeremy Wagner

Không ai thích chờ đợi. Hơn 50% người dùng từ bỏ trang web nếu mất hơn 3 giây để tải.

Việc gửi các tải trọng JavaScript lớn sẽ ảnh hưởng đến tốc độ trang web của bạn đáng kể. Thay vì gửi tất cả JavaScript đến người dùng ngay khi trang đầu tiên của ứng dụng được tải, hãy chia gói của bạn thành và chỉ gửi những nội dung cần thiết ở phần đầu.

Tại sao việc phân tách mã lại có lợi?

Phân tách mã là một kỹ thuật nhằm giảm thiểu thời gian khởi động. Khi gửi ít JavaScript hơn khi khởi động, chúng ta có thể giúp các ứng dụng tương tác nhanh hơn bằng cách giảm thiểu hoạt động của luồng chính trong giai đoạn quan trọng này.

Đối với Chỉ số quan trọng chính của trang web, việc giảm tải trọng JavaScript được tải xuống khi khởi động sẽ góp phần cải thiện thời gian Tương tác với Hiển thị tiếp theo (INP). Lý do cho việc này là do bằng cách giải phóng luồng chính, ứng dụng có thể phản hồi hoạt động đầu vào của người dùng nhanh hơn nhờ giảm chi phí khởi động liên quan đến việc phân tích cú pháp, biên dịch và thực thi JavaScript.

Tuỳ thuộc vào cấu trúc của trang web – đặc biệt là nếu trang web của bạn phụ thuộc nhiều vào tính năng hiển thị phía máy khách – việc giảm kích thước tải trọng JavaScript chịu trách nhiệm hiển thị thẻ đánh dấu có thể giúp cải thiện thời gian Nội dung lớn nhất hiển thị (LCP). Điều này có thể xảy ra khi tài nguyên LCP bị trình duyệt phát hiện chậm cho đến khi mã đánh dấu phía máy khách hoàn tất, hoặc khi luồng chính quá bận nên không thể hiển thị phần tử LCP đó. Cả hai trường hợp này đều có thể làm chậm thời gian LCP của trang.

Đo

Lighthouse hiển thị kết quả kiểm tra không thành công khi đã dành một lượng thời gian đáng kể để thực thi tất cả JavaScript trên một trang.

Hãy tách gói JavaScript để chỉ gửi mã cần thiết cho tuyến ban đầu khi người dùng tải một ứng dụng. Việc này giúp giảm thiểu số lượng tập lệnh cần được phân tích cú pháp và biên dịch, giúp rút ngắn thời gian tải trang.

Các gói mô-đun phổ biến như webpack, Parcel và Tính năng hợp nhất cho phép bạn tách bằng cách sử dụng tính năng nhập động. Ví dụ: hãy xem xét đoạn mã sau cho thấy ví dụ về Phương thức someFunction được kích hoạt khi một biểu mẫu được gửi.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

Ở đây, someFunction sử dụng mô-đun được nhập từ một thư viện cụ thể. Nếu mô-đun này không được sử dụng ở nơi khác, khối mã có thể được sửa đổi để sử dụng tính năng nhập động để tìm nạp chỉ khi biểu mẫu được người dùng gửi.

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

Mã tạo nên mô-đun không được đưa vào gói ban đầu và hiện được tải từng phần hoặc chỉ được cung cấp cho người dùng khi cần sau lượt gửi biểu mẫu. Để cải thiện hiệu suất trang hơn nữa, hãy tải trước các phần quan trọng để ưu tiên và tìm nạp chúng sớm hơn.

Mặc dù đoạn mã trước đó là một ví dụ đơn giản, nhưng tính năng tải từng phần của bên thứ ba không phải là mẫu phổ biến trong các ứng dụng lớn hơn. Thường thì thứ ba các phần phụ thuộc của bên được chia thành một gói nhà cung cấp riêng biệt có thể được lưu vào bộ nhớ đệm vì chúng không cập nhật thường xuyên. Bạn có thể đọc thêm về cách SplitChunksPlugin có thể giúp bạn làm việc này.

Việc phân tách tuyến hoặc cấp thành phần khi sử dụng khung phía máy khách là một phương pháp đơn giản hơn để tải từng phần nhiều phần của ứng dụng. Nhiều các khung phổ biến sử dụng webpack cung cấp các thành phần trừu tượng để tải từng phần dễ hơn là tự mình tìm hiểu các cấu hình.