Tìm hiểu về tính năng tìm nạp trước dự đoán và cách Resolve.js triển khai tính năng này.
Trong phiên Điều hướng trên web nhanh hơn bằng tính năng tìm nạp trước dự đoán tại Google I/O 2019, tôi đã bắt đầu bằng cách nói về cách tối ưu hoá các ứng dụng web bằng tính năng phân tách mã và những hệ quả tiềm ẩn về hiệu suất khi di chuyển trang tiếp theo. Trong phần thứ hai của buổi trò chuyện, tôi đã thảo luận về cách cải thiện tốc độ điều hướng bằng cách sử dụng giả.js để thiết lập tìm nạp trước dự đoán:
Chia mã để chạy các ứng dụng web nhanh hơn
Ứng dụng web chậm và JavaScript là một trong những tài nguyên đắt nhất mà bạn vận chuyển. Việc chờ tải một ứng dụng web chậm có thể gây khó chịu cho người dùng và làm giảm số lượt chuyển đổi.
Tải từng phần là một kỹ thuật hiệu quả để giảm số byte JavaScript mà bạn đang truyền qua truyền. Bạn có thể sử dụng một số kỹ thuật để tải từng phần JavaScript, bao gồm:
- Phân tách mã ở cấp thành phần
- Phân tách mã cấp tuyến đường
Với tính năng phân tách mã cấp thành phần, bạn có thể di chuyển các thành phần riêng lẻ vào các phần JavaScript riêng biệt. Đối với các sự kiện cụ thể, bạn có thể tải các tập lệnh có liên quan và hiển thị các thành phần.
Tuy nhiên, với tính năng phân tách mã cấp tuyến đường, bạn sẽ di chuyển toàn bộ tuyến đường thành các phần độc lập. Khi người dùng chuyển đổi từ tuyến này sang tuyến khác, họ phải tải JavaScript được liên kết xuống và khởi động trang được yêu cầu. Các hoạt động này có thể gây ra tình trạng chậm trễ đáng kể, đặc biệt là trên các mạng chậm.
Tìm nạp trước JavaScript
Quá trình tìm nạp trước cho phép trình duyệt tải xuống và lưu vào bộ nhớ đệm các tài nguyên mà người dùng có thể sẽ sớm cần đến. Phương pháp thông thường là sử dụng <link rel="prefetch">, nhưng có 2 lỗi phổ biến:
- Việc tìm nạp trước quá nhiều tài nguyên (tìm nạp trước) sẽ tiêu tốn nhiều dữ liệu.
- Một số tài nguyên mà người dùng cần có thể không bao giờ được tìm nạp trước.
Phương pháp tìm nạp trước dự đoán giải quyết được những vấn đề này bằng cách sử dụng một báo cáo về các mẫu điều hướng của người dùng để xác định những thành phần cần tìm nạp trước.
Tìm nạp trước dự đoán bằng giả.js
Guess.js là một thư viện JavaScript cung cấp chức năng tìm nạp trước có tính dự đoán. Answer.js sử dụng báo cáo từ Google Analytics hoặc một nhà cung cấp dịch vụ phân tích khác để tạo một mô hình dự đoán có thể dùng để chỉ tìm nạp trước một cách thông minh những thông tin mà người dùng có khả năng cần.
Answer.js có các công cụ tích hợp với Angular, Next.js, Nuxt.js và Gatsby. Để sử dụng lớp này trong ứng dụng của bạn, hãy thêm các dòng sau vào cấu hình gói web để chỉ định mã chế độ xem Google Analytics:
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Nếu không sử dụng Google Analytics, bạn có thể chỉ định một reportProvider và tải dữ liệu xuống từ dịch vụ bạn yêu thích.
Tích hợp với các khung
Để tìm hiểu thêm về cách tích hợp giả.js với khung yêu thích của bạn, hãy xem các tài nguyên sau:
Để xem hướng dẫn nhanh từng bước về cách tích hợp với Angular, hãy xem video sau:
Đo lường.js hoạt động như thế nào?
Dưới đây là cách Answer.js triển khai tính năng tìm nạp trước dự đoán:
- Trước tiên, công cụ này trích xuất dữ liệu về mẫu điều hướng của người dùng từ nhà cung cấp dịch vụ phân tích mà bạn yêu thích.
- Sau đó, Analytics sẽ ánh xạ các URL từ báo cáo đến các đoạn JavaScript do gói web tạo ra.
- Dựa trên dữ liệu được trích xuất, công cụ này tạo một mô hình dự đoán đơn giản về những trang mà người dùng có thể sẽ truy cập từ một trang nhất định bất kỳ.
- Hàm này sẽ gọi mô hình cho từng phân đoạn JavaScript, dự đoán các phân đoạn khác có khả năng cần đến tiếp theo.
- Nó thêm các hướng dẫn tìm nạp trước vào mỗi đoạn.
Khi Answer.js hoàn tất, mỗi đoạn sẽ chứa hướng dẫn tìm nạp trước tương tự như:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Mã do giả tạo.js này yêu cầu trình duyệt xem xét tìm nạp trước phân đoạn a.js với xác suất 0.2 và phân đoạn b.js có xác suất 0.8.
Sau khi trình duyệt thực thi mã, giả.js sẽ kiểm tra tốc độ kết nối của người dùng. Nếu đủ, giả tạo sẽ chèn 2 thẻ <link rel="prefetch"> vào tiêu đề của trang, mỗi thẻ cho một đoạn. Nếu người dùng đang sử dụng mạng tốc độ cao, giả.js sẽ tìm nạp trước cả hai phân đoạn. Nếu người dùng có kết nối mạng kém, giả định.js sẽ chỉ tìm nạp trước phân đoạn b.js vì phân đoạn này có nhiều khả năng là cần thiết.
Tìm hiểu thêm
Để tìm hiểu thêm về giả.js, hãy tham khảo các tài nguyên sau: