Các chiến lược tải trước tuyến trong Angular

Tải trước các tuyến trước để tăng tốc độ di chuyển của người dùng.

Minko Gechev

Tính năng Phân tách mã cấp định tuyến có thể giúp bạn giảm thời gian tải ban đầu của ứng dụng bằng cách trì hoãn JavaScript liên kết với các tuyến không cần thiết ban đầu. Bằng cách này, bộ định tuyến Angular sẽ đợi cho đến khi người dùng chuyển đến một tuyến nhất định trước khi kích hoạt yêu cầu mạng để tải JavaScript liên kết xuống.

Mặc dù kỹ thuật này rất phù hợp với lần tải trang đầu tiên, nhưng có thể làm chậm thao tác điều hướng, tuỳ thuộc vào độ trễ mạng và băng thông của người dùng. Một cách để giải quyết vấn đề này là tải trước tuyến đường. Khi sử dụng tính năng tải trước, khi người dùng ở một tuyến đường nhất định, bạn có thể tải xuống và lưu vào bộ nhớ đệm JavaScript liên kết với các tuyến đường có thể cần đến tiếp theo. Trình định tuyến Angular cung cấp chức năng này ngay từ đầu.

Trong bài đăng này, bạn sẽ tìm hiểu cách tăng tốc độ điều hướng khi sử dụng tính năng phân tách mã cấp tuyến bằng cách tận dụng tính năng tải trước JavaScript trong Angular.

Chiến lược tải trước tuyến đường trong Angular

Trình định tuyến Angular cung cấp một thuộc tính cấu hình có tên preloadingStrategy. Thuộc tính này xác định logic tải trước và xử lý các mô-đun Angular tải lười. Chúng ta sẽ đề cập đến hai chiến lược có thể áp dụng:

• PreloadAllModules, tải trước tất cả các tuyến tải lười, như tên gọi
• QuicklinkStrategy, chỉ tải trước các tuyến liên kết với các đường liên kết trên trang hiện tại.

Phần còn lại của bài đăng này đề cập đến một ứng dụng Angular mẫu. Bạn có thể tìm thấy mã nguồn trên GitHub.

Sử dụng chiến lược PreloadAllModules

Ứng dụng mẫu có một số tuyến tải lười. Để tải trước tất cả các thành phần đó bằng chiến lược PreloadAllModules (được tích hợp sẵn trong Angular), hãy chỉ định chiến lược này làm giá trị cho thuộc tính preloadingStrategy trong cấu hình bộ định tuyến:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

Bây giờ, hãy phân phát ứng dụng và xem bảng điều khiển Mạng trong Chrome DevTools:

1. Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
2. Nhấp vào thẻ Mạng.

Bạn sẽ thấy bộ định tuyến đã tải nyan-nyan-module.js và about-about-module.js xuống trong nền khi bạn mở ứng dụng:

Trình định tuyến cũng đã đăng ký các nội dung khai báo tuyến đường của mô-đun để khi bạn điều hướng đến một URL được liên kết với bất kỳ mô-đun nào được tải trước, quá trình chuyển đổi sẽ diễn ra tức thì.

Sử dụng chiến lược tải trước đường liên kết nhanh

PreloadAllModules hữu ích trong nhiều trường hợp. Tuy nhiên, khi bạn có hàng chục mô-đun, tính năng tải trước tích cực của mô-đun có thể thực sự làm tăng mức sử dụng mạng. Ngoài ra, vì bộ định tuyến cần đăng ký các tuyến trong tất cả các mô-đun được tải trước, nên việc này có thể gây ra các phép tính chuyên sâu trong luồng giao diện người dùng và dẫn đến trải nghiệm người dùng chậm chạp.

Thư viện đường liên kết nhanh cung cấp chiến lược hiệu quả hơn cho các ứng dụng lớn. Phương thức này sử dụng API IntersectionObserver để chỉ tải trước các mô-đun liên kết với các đường liên kết hiện hiển thị trên trang.

Bạn có thể thêm đường liên kết nhanh vào ứng dụng Angular bằng cách sử dụng gói ngx-quicklink. Bắt đầu bằng cách cài đặt gói từ npm:

npm install --save ngx-quicklink

Sau khi có trong dự án, bạn có thể sử dụng QuicklinkStrategy bằng cách chỉ định preloadingStrategy của bộ định tuyến và nhập QuicklinkModule:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

Bây giờ, khi mở lại ứng dụng, bạn sẽ nhận thấy rằng bộ định tuyến chỉ tải trước nyan-nyan-module.js vì nút ở giữa trang có đường liên kết đến bộ định tuyến. Và khi mở thanh điều hướng bên, bạn sẽ nhận thấy rằng bộ định tuyến sẽ tải trước tuyến "Giới thiệu":

Sử dụng chiến lược tải trước Quicklink trên nhiều mô-đun tải lười

Ví dụ trên sẽ hoạt động cho một ứng dụng cơ bản, nhưng nếu ứng dụng của bạn chứa nhiều mô-đun tải lười, bạn sẽ cần nhập QuicklinkModule vào một mô-đun dùng chung, xuất mô-đun đó rồi nhập mô-đun dùng chung vào các mô-đun tải lười.

Trước tiên, hãy nhập QuicklinkModule từ ngx-quicklink vào mô-đun dùng chung và xuất mô-đun đó:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

Sau đó, hãy nhập SharedModule vào tất cả các mô-đun tải lười:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks hiện sẽ có trong các mô-đun tải lười.

Mở rộng tính năng tải trước cơ bản

Mặc dù tính năng tải trước có chọn lọc thông qua đường liên kết nhanh có thể giúp tăng tốc đáng kể cho việc điều hướng, nhưng bạn có thể làm cho chiến lược tải trước của mình hiệu quả hơn nữa đối với mạng bằng cách sử dụng tính năng tải trước theo dự đoán (do Guess.js triển khai). Bằng cách phân tích báo cáo của Google Analytics hoặc một nhà cung cấp dịch vụ phân tích khác, Guess.js có thể dự đoán hành trình điều hướng của người dùng và chỉ tải trước các đoạn JavaScript có thể cần thiết tiếp theo.

Bạn có thể tìm hiểu cách sử dụng Guess.js với Angular trên trang này của trang web Guess.js.

Kết luận

Cách tăng tốc điều hướng khi sử dụng tính năng phân tách mã cấp tuyến:

1. Chọn chiến lược tải trước phù hợp tuỳ thuộc vào kích thước ứng dụng:
   • Các ứng dụng có ít mô-đun có thể sử dụng chiến lược PreloadAllModules tích hợp sẵn của Angular.
   • Các ứng dụng có nhiều mô-đun nên sử dụng chiến lược tải trước tuỳ chỉnh, chẳng hạn như đường liên kết nhanh của Angular hoặc tính năng tải trước dự đoán, như được triển khai trong Guess.js.
2. Định cấu hình chiến lược tải trước bằng cách đặt thuộc tính preloadStrategy của bộ định tuyến Angular.