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!
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ỏ đếnNyanComponent
.
Đ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.