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

Tải trước các tuyến đường để tăng tốc độ của người dùng điều hướ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, bộ định tuyến Angular sẽ chờ cho đến khi người dùng điều hướng đến một tuyến nhất định trước khi kích hoạt yêu cầu mạng để tải JavaScript được liên kết xuống.

Mặc dù kỹ thuật này rất hiệu quả cho quá trình tải trang ban đầu, nhưng nó có thể làm chậm quá trình điều hướng, tuỳ thuộc vào độ trễ và băng thông mạng. Một cách để giải quyết vấn đề này là tải trước định tuyến. 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. Bộ đị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 chế độ phân tách mã cấp tuyến đường 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

Bộ định tuyến Angular cung cấp một thuộc tính cấu hình có tên là 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 từng phần. 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 từng phần, đúng như tên gọi
• QuicklinkStrategy, chỉ tải trước các tuyến đường liên kết với đườ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 Công cụ của Chrome cho nhà phát triển:

1. Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
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 ở chế độ nền khi mở ứng dụng:

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

Sử dụng chiến lược tải trước Quicklink

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à khiến trải nghiệm người dùng bị chậm.

Thư viện liên kết nhanh cung cấp chiến lược tốt hơn cho các ứng dụng lớn hơn. Tệp này sử dụng API IntersectionObserver để chỉ tải trước các mô-đun liên kết với đường liên kết hiện đang 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 này từ npm:

npm install --save ngx-quicklink

Sau khi bộ định tuyến có sẵn trong dự án, bạn có thể sử dụng QuicklinkStrategy bằng cách chỉ định preloadingStrategy của bộ định tuyến rồi 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 đến đó. Khi mở bảng điều hướng bên, bạn sẽ thấy rằng bộ định tuyến sẽ tải trước phần "Giới thiệu" tuyến đường:

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

Ví dụ trên phù hợp với 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 từng phần, 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 được chia sẻ vào các mô-đun tải từng phần.

Trước tiên, hãy nhập QuicklinkModule từ ngx-quicklink vào mô-đun được chia sẻ của bạn 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 từng phần:

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.

Không chỉ 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ể tăng tốc đáng kể tốc độ điều hướng, nhưng bạn có thể giúp chiến lược tải trước của mình trở nên hiệu quả hơn về mạng bằng cách sử dụng tính năng tải trước dự đoán (được triển khai bởi Guess.js). 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 Answer.js với Angular trên trang này trên trang web của giả.js.

Kết luận

Để tăng tốc độ điều hướng khi sử dụng tính năng chia tách mã cấp tuyến đường:

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 theo dự đoán, như được triển khai trong giả.
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.