Không ai thích chờ đợi. Hơn 50% người dùng sẽ rời bỏ một trang web nếu trang web đó mất hơn 3 giây để tải.
Việc gửi tải trọng JavaScript lớn sẽ ảnh hưởng đáng kể đến tốc độ của trang web. Thay vì gửi tất cả JavaScript cho 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 nhiều phần và chỉ gửi những gì cần thiết ngay từ đầu.
Tại sao việc phân chia mã lại có lợi?
Phân chia 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 công việc của luồng chính trong khoảng thời gian quan trọng này.
Khi nói đến Core Web Vitals, 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 Lượt tương tác đến nội dung hiển thị tiếp theo (INP). Lý do là 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 bằng cách 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 trang web của bạn (đặc biệt là nếu trang web của bạn phụ thuộc nhiều vào hoạt động kết xuất phía máy khách), việc giảm kích thước của tải trọng JavaScript chịu trách nhiệm kết xuất mã đá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 trình duyệt phát hiện tài nguyên LCP bị trì hoãn cho đến sau khi hoàn tất việc đánh dấu phía máy khách hoặc khi luồng chính quá bận để kết xuất 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 lường
Lighthouse hiển thị một quy trình kiểm tra không thành công khi mất một khoảng thời gian đáng kể để thực thi tất cả JavaScript trên một trang.
Chia gói JavaScript để chỉ gửi mã cần thiết cho tuyến đường ban đầu khi người dùng tải một ứng dụng. Điều này giúp giảm thiểu lượng tập lệnh cần được phân tích cú pháp và biên dịch, nhờ đó giảm thời gian tải trang.
Các trình đóng gói mô-đun phổ biến như webpack, Parcel và Rollup cho phép bạn phân tách các gói bằng cách sử dụng nhập động.
Ví dụ: hãy xem xét đoạn mã sau đây cho thấy ví dụ về một 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
}
Trong đó, someFunction sử dụng một mô-đun được nhập từ một thư viện cụ thể. Nếu mô-đun này không được dùng ở nơi khác, bạn có thể sửa đổi khối mã để dùng một tính năng nhập động nhằm chỉ tìm nạp mô-đun này khi người dùng gửi biểu mẫu.
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 trễ hoặc chỉ được cung cấp cho người dùng khi cần sau khi biểu mẫu được gửi. Để cải thiện hơn nữa hiệu suất trang, hãy tải trước các khối 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 việc tải các phần phụ thuộc của bên thứ ba một cách trì hoãn không phải là một mẫu phổ biến trong các ứng dụng lớn hơn. Thông thường, các phần phụ thuộc của bên thứ ba đượ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 thực hiện việc này.
Việc phân chia ở cấp độ tuyến đường hoặc thành phần khi sử dụng một 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 của ứng dụng một cách trì hoãn. Nhiều khung hình phổ biến sử dụng webpack cung cấp các lớp trừu tượng để giúp việc tải từng phần trở nên dễ dàng hơn so với việc tự tìm hiểu các cấu hình.