Trang này được dịch bởi Cloud Translation API.

Phân tách mã cấp tuyến trong Angular

Hãy cải thiện hiệu suất của ứng dụng bằng cách sử dụng tính năng phân tách mã cấp tuyến!

Minko Gechev

Bài đăng này giải thích cách thiết lập tính năng phân tách mã ở cấp tuyến trong ứng dụng Angular. Việc này có thể giúp giảm kích thước gói JavaScript và cải thiện đáng kể Thời gian tương tác.

Bạn có thể tìm thấy mã mẫu trong bài viết này trên GitHub. Ví dụ về định tuyến mong muốn có trong nhánh eager. Ví dụ về cách phân tách mã ở cấp tuyến nằm trong nhánh tải từng phần.

Tại sao việc phân tách mã lại quan trọng

Sự phức tạp ngày càng tăng của các ứng dụng web đã dẫn đến sự gia tăng đáng kể về số lượng JavaScript được vận chuyển đến người dùng. Các tệp JavaScript lớn có thể làm chậm đáng kể khả năng tương tác, vì vậy tệp này có thể là một tài nguyên tốn kém, đặc biệt là trên thiết bị di động.

Cách hiệu quả nhất để rút gọn gói JavaScript mà không làm giảm các tính năng trong ứng dụng của bạn là sử dụng phương pháp phân chia mã linh hoạt.

Tính năng chia tách mã cho phép bạn chia JavaScript của ứng dụng thành nhiều phần được liên kết với các tuyến hoặc tính năng khác nhau. Phương pháp này chỉ gửi cho người dùng JavaScript mà họ cần trong quá trình tải ứng dụng ban đầu, giảm thời gian tải.

Kỹ thuật phân tách mã

Bạn có thể phân chia mã ở hai cấp: cấp thành phần và cấp tuyến đường.

Trong quá trình phân tách mã cấp thành phần, bạn sẽ di chuyển các thành phần vào các đoạn JavaScript riêng của chúng và tải từng phần khi cần.
Trong quá trình phân tách mã cấp tuyến, bạn đóng gói chức năng của mỗi tuyến thành một đoạn riêng. Khi người dùng điều hướng ứng dụng của bạn, họ sẽ tìm nạp các đoạn liên kết với từng tuyến và nhận chức năng liên quan khi cần.

Bài đăng này tập trung vào việc thiết lập tính năng phân tách cấp tuyến trong Angular.

Ứng dụng mẫu

Trước khi tìm hiểu sâu về cách sử dụng tính năng phân tách mã cấp tuyến trong Angular, hãy xem một ứng dụng mẫu:

Xem cách triển khai các mô-đun của ứng dụng. Bên trong AppModule có hai tuyến được xác định: tuyến mặc định liên kết với HomeComponent và tuyến nyan liên kết với NyanComponent:

@NgModule({
  ...
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent,
        pathMatch: 'full'
      },
      {
        path: 'nyan',
        component: NyanComponent
      }
    ])
  ],
  ...
})
export class AppModule {}

Phân tách mã ở cấp tuyến đường

Để thiết lập tính năng phân tách mã, bạn cần tái cấu trúc tuyến mong muốn nyan.

Phiên bản 8.1.0 của Angular CLI có thể làm mọi thứ cho bạn bằng lệnh sau:

ng g module nyan --module app --route nyan

Thao tác này sẽ tạo ra: – Một mô-đun định tuyến mới có tên là NyanModule – Một tuyến trong AppModule có tên là nyan sẽ tải động NyanModule – Một tuyến mặc định trong NyanModule – Một thành phần có tên là NyanComponent sẽ được hiển thị khi người dùng truy cập tuyến đường mặc định

Hãy cùng tìm hiểu các bước này theo cách thủ công để hiểu rõ hơn về cách triển khai việc phân tách mã bằng Angular!

Khi người dùng di chuyển đến tuyến nyan, bộ định tuyến sẽ kết xuất NyanComponent trong ổ cắm bộ định tuyến.

Để sử dụng tính năng phân tách mã cấp tuyến trong Angular, hãy đặt thuộc tính loadChildren của phần khai báo tuyến và kết hợp thuộc tính này với tính năng nhập động:

{
  path: 'nyan',
  loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
}

Có hai điểm khác biệt chính so với lộ trình mong muốn:

Bạn đặt loadChildren thay vì component. Khi sử dụng tính năng phân tách mã cấp tuyến, bạn cần trỏ đến các mô-đun được tải động, thay vì các thành phần.
Trong loadChildren, sau khi lời hứa được giải quyết, bạn sẽ trả về NyanModule thay vì trỏ đến NyanComponent.

Đoạn mã ở trên chỉ định rằng khi người dùng di chuyển đến nyan, Angular sẽ tải nyan.module một cách linh động từ thư mục nyan và hiển thị thành phần liên kết với tuyến mặc định được khai báo trong mô-đun.

Bạn có thể liên kết tuyến mặc định với một thành phần bằng cách sử dụng nội dung khai báo sau:

import { NgModule } from '@angular/core';
import { NyanComponent } from './nyan.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [NyanComponent],
  imports: [
    RouterModule.forChild([{
      path: '',
      pathMatch: 'full',
      component: NyanComponent
    }])
  ]
})
export class NyanModule {}

Mã này hiển thị NyanComponent khi người dùng di chuyển đến https://example.com/nyan.

Cách kiểm tra để đảm bảo rằng bộ định tuyến Angular tải nyan.module xuống từng phần trong môi trường cục bộ:

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.
Nhấp vào thẻ Mạng.
Nhấp vào NYAN trong ứng dụng mẫu.
Lưu ý rằng tệp nyan-nyan-module.js xuất hiện trong thẻ mạng.

Xem ví dụ này trên GitHub.

Hiển thị một vòng quay

Hiện tại, khi người dùng nhấp vào nút NYAN, ứng dụng không cho biết rằng ứng dụng đang tải JavaScript trong nền. Để cung cấp cho người dùng phản hồi trong khi tải tập lệnh, có thể bạn sẽ muốn thêm một vòng quay.

Để làm việc đó, hãy bắt đầu bằng cách thêm mã đánh dấu cho chỉ báo bên trong phần tử router-outlet trong app.component.html:

<router-outlet>
  <span class="loader" *ngIf="loading"></span>
</router-outlet>

Sau đó, thêm một lớp AppComponent để xử lý các sự kiện định tuyến. Lớp này sẽ đặt cờ loading thành true khi nghe thấy sự kiện RouteConfigLoadStart và đặt cờ thành false khi nghe thấy sự kiện RouteConfigLoadEnd.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loading: boolean;
  constructor(router: Router) {
    this.loading = false;
    router.events.subscribe(
      (event: RouterEvent): void => {
        if (event instanceof NavigationStart) {
          this.loading = true;
        } else if (event instanceof NavigationEnd) {
          this.loading = false;
        }
      }
    );
  }
}

Trong ví dụ bên dưới, chúng tôi đã ra mắt độ trễ 500 mili giây nhân tạo để bạn có thể xem danh sách màu sắc đang hoạt động.

Kết luận

Bạn có thể thu nhỏ kích thước gói của các ứng dụng Angular bằng cách áp dụng chế độ phân tách mã cấp tuyến:

Sử dụng trình tạo mô-đun tải từng phần của Angular CLI để tự động sắp xếp một tuyến được tải động.
Thêm chỉ báo tải khi người dùng di chuyển đến một tuyến từng phần để cho thấy có một hành động đang diễn ra.