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 độ 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 liên kết với các tuyến không cần thiết lúc đầ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 rồi mới 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 hữu ích trong lần tải trang đầu tiên, nhưng có thể làm chậm quá trình đ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. 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 vào bộ nhớ đệm JavaScript được liên kết với các tuyến có khả năng sẽ cần đế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 tính năng chia tách mã cấp tuyến bằng cách tận dụng việc tải trước JavaScript trong Angular.

Các chiến lược tải trước định tuyến 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 ta sẽ tìm hiểu hai chiến lược khả thi:

• PreloadAllModules, như 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 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 từng phần. Để tải trước tất cả các yếu tố này 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 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ý nội dung khai báo tuyến của các mô-đun sao cho khi bạn điều hướng đến một URL liên kết với bất kỳ mô-đun được 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 bằng Đường liên kết nhanh

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

Thư viện Quicklink cung cấp một chiến lược hiệu quả hơn cho các ứng dụng lớn hơn. Phương thức này sử dụng API IntersectionObserver để chỉ tải trước những mô-đun liên kết với các đường liên kết đ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 dự á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ẽ thấy 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. Khi mở thanh điều hướng bên, bạn sẽ 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 từng phần

Ví dụ trên sẽ áp dụng cho ứ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 dùng chung 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ẻ và xuất nó:

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

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

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

Quicklinks nay sẽ có trong các mô-đun tải từng phần.

Vượt xa 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ể tăng tốc đáng kể quá trình đ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 nữa về mặt mạng bằng cách sử dụng tính năng tải trước có tính 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 phân tích khác, Measurement.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ó khả năng sẽ cần đến tiếp theo.

Bạn có thể tìm hiểu cách sử dụng Đoán.js với Angular trên trang này từ trang web Đoán.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 đường:

1. Chọn chiến lược tải trước phù hợp tuỳ theo kích thước của ứng dụng:
   • Những ứng dụng có ít mô-đun có thể dùng chiến lược PreloadAllModules tích hợp của Angular.
   • Các ứng dụng có nhiều mô-đun phải sử dụng chiến lược tải trước tuỳ chỉnh, chẳng hạn như liên kết nhanh của Angular hoặc tải trước dự đoán, như được triển khai trong Đoán.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.