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 tuyến đường 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 được liên kết với các tuyến không cần thiết ban đầu. Bằng cách này, trình đị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ễ và băng thông mạ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. Bằng cách sử dụng tính năng tải trước, khi người dùng đang ở một tuyến nhất định, bạn có thể tải xuống và lưu JavaScript vào bộ nhớ đệm đối với các tuyến có khả năng sẽ cầ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 tôi sẽ đề cập đến hai chiến lược khả thi:

  • 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 được tải từng phần. Để 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 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:

Chiến lược PreloadAllModules đang hoạt độ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ì.

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 linh hoạt của mô-đun này thực sự có thể 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ở bảng điều hướng bên, bạn sẽ nhận thấy rằng bộ định tuyến tải trước tuyến "Giới thiệu":

Bản minh hoạ chiến lược tải trước đường liên kết nhanh.

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
  ],
  …
});

Giờ đây, Quicklinks sẽ có trong các mô-đun tải từng phần của bạn.

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 từ Google Analytics hoặc một nhà cung cấp dịch vụ phân tích khác, giả.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 phần JavaScript có khả năng sẽ cần đến 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 của ứ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.