Cải thiện hiệu suất của ứng dụng bằng cách phân tách mã ở cấp tuyến!
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ả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 các mã mẫu trong bài viết này trên GitHub. Ví dụ về định tuyến háo hức có trong nhánh háo hức. Ví dụ về việc phân tách mã ở cấp tuyến nằm trong nhánh lazy.
Lý do 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ể lượng JavaScript được cung cấp cho 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, đâ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 để thu nhỏ các gói JavaScript mà không làm mất các tính năng trong ứng dụng là áp dụng phương pháp phân tách mã linh hoạt.
Phân tách mã cho phép bạn chia JavaScript của ứng dụng thành nhiều đoạn 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úp thời gian tải luôn ở mức thấp.
Kỹ thuật phân tách mã
Bạn có thể phân tách 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 di chuyển các thành phần sang các đoạn JavaScript riêng và tải từng thành 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 từng tuyến thành một đoạn riêng biệt. Khi người dùng thao tác trong ứng dụng, họ sẽ tìm nạp các đoạn liên kết với từng tuyến và nhận được 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 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, 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 {}
Tách mã ở cấp tuyến
Để 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 háo hức 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 kết xuất khi người dùng truy cập vào tuyến mặc định
Hãy cùng thực hiện các bước này theo cách thủ công để hiểu rõ hơn về cách triển khai tính năng phân tách mã bằng Angular!
Khi người dùng chuyển đến tuyến nyan, bộ định tuyến sẽ hiển thị NyanComponent trong đầu ra của 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 một lệnh 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 tuyến háo hức:
- Bạn đặt
loadChildrenthay 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ềNyanModulethay vì trỏ đếnNyanComponent.
Đoạn mã trên chỉ định rằng khi người dùng 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 chuyển đến https://example.com/nyan.
Cách kiểm tra để đảm bảo bộ định tuyến Angular tải nyan.module 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.jsxuất hiện trong thẻ mạng.
Tìm ví dụ này trên GitHub.
Hiện vòng quay may mắn
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 ở chế độ nền. Để cung cấp cho người dùng ý kiến phản hồi trong khi tải tập lệnh, bạn có thể 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 đó, hãy 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ụ dưới đây, chúng tôi đã thêm độ trễ 500 mili giây để bạn có thể thấy vòng quay tải hoạt động.
Kết luận
Bạn có thể thu nhỏ kích thước gói của ứng dụng Angular bằng cách áp dụng tính năng 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 tạo một tuyến đường được tải động.
- Thêm chỉ báo đang tải khi người dùng chuyển đến một tuyến tải từng phần để cho biết có một hành động đang diễn ra.