Chẳng có ai thích chờ đợi. Hơn 50% người dùng sẽ rời 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 ảnh hưởng đáng kể đến tốc độ trang web của bạn. Thay vì vận chuyển 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 nhiều phần và chỉ gửi những nội dung cần thiết ngay khi bắt đầu.
Tại sao việc chia 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ể làm cho 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 Các chỉ số quan trọng về trang web, việc giảm tải trọng JavaScript tải xuống khi khởi động sẽ góp phần cải thiện thời gian Thời gian phản hồi lần tương tác đầu tiên (FID) và Lượt tương tác với nội dung hiển thị tiếp theo (INP) hiệu quả hơn. 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 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 biệt là nếu trang web của bạn phụ thuộc nhiều vào chế độ hiển thị phía máy khách, việc giảm kích thước của các tải trọng JavaScript chịu trách nhiệm hiển thị mã đánh dấu có thể giúp cải thiện thời gian của Thời gian hiển thị nội dung lớn nhất (LCP). Điều này có thể xảy ra khi tài nguyên LCP bị trình duyệt trì hoãn trong việc phát hiện cho đến khi đá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ể kết xuất phần tử LCP đó. Cả hai trường hợp đều có thể làm chậm thời gian LCP cho trang.
Đo
Lighthouse sẽ hiển thị một quá 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.
Tách 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 số lượng tập lệnh cần được phân tích cú pháp và biên dịch, giúp tăng thời gian tải trang.
Các gói mô-đun phổ biến như webpack, Parcel và Rollup cho phép bạn chia các gói của mình 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 đây cho thấy ví dụ về phương thức
someFunction được kích hoạt khi biểu mẫu được gửi.
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
Tại đây, 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 nào khác, bạn có thể sửa đổi khối mã để sử dụng tính năng nhập động nhằm chỉ tìm nạp 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 sẽ được tải từng phần hoặc chỉ được cung cấp cho người dùng khi cần sau khi 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 các phần đó sớm hơn.
Mặc dù đoạn mã trước đó là một ví dụ đơn giản, nhưng các phần phụ thuộc 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ường, các phần phụ thuộc của bên thứ ba được chia thành một gói riêng của nhà cung cấp 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 tách ở cấp tuyến hoặc 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 khung phổ biến sử dụng gói web cung cấp các thành phần trừu tượng để tải từng phần dễ dàng hơn so với việc tự tìm hiểu các cấu hình.