Các tuyến tải lười biếng trong Angular
Với các module được tải chậm trong Angular, thật dễ dàng để các tính năng được tải chỉ khi user chuyển đến các tuyến đường của họ lần đầu tiên. Điều này có thể giúp ích rất nhiều cho hiệu suất ứng dụng của bạn và giảm kích thước gói ban đầu. Ngoài ra, nó khá đơn giản để cài đặt !
Phần sau bao gồm các module tải chậm trong ứng dụng Angular 8+.
Mô-đun tính năng
Các tuyến được tải chậm cần phải nằm ngoài module ứng dụng root , vì vậy bạn cần có các tính năng được tải chậm của bạn vào các module tính năng.
Giả sử rằng bạn có một dự án Angular CLI , hãy tạo một module tính năng mới:
$ ng g module shop Bây giờ ta cũng tạo 3 thành phần bên trong module tính năng cửa hàng của ta :
$ ng g c shop/cart $ ng g c shop/checkout $ ng g c shop/confirm Không nhập các module tính năng sẽ được tải chậm trong module ứng dụng của bạn, nếu không chúng sẽ được tải nhanh.
loadChildren trong cấu hình tuyến đường chính
Trong cấu hình định tuyến chính của bạn, bạn cần thực hiện một số việc như sau:
import { Routes } from '@angular/router'; // BoutiqueComponent is a normal, eager loaded component import { BoutiqueComponent } from './boutique/boutique.component'; Mới với Angular 8 , loadChildren mong đợi một hàm sử dụng cú pháp nhập động để chỉ nhập module được tải lười biếng của bạn khi cần thiết. Như bạn thấy , nhập động dựa trên hứa hẹn và cung cấp cho bạn quyền truy cập vào module , nơi lớp của module có thể được gọi.
Cấu hình tuyến đường trong module tính năng
Bây giờ tất cả những gì còn lại cần làm là cấu hình các tuyến đường cụ thể cho module tính năng. Đây là một ví dụ:
import { Routes } from '@angular/router'; import { CartComponent } from './cart/cart.component'; import { CheckoutComponent } from './checkout/checkout.component'; import { ConfirmComponent } from './confirm/confirm.component'; Và cuối cùng, trong chính module tính năng, bạn sẽ bao gồm các tuyến đường của bạn bằng phương thức forChild của RouterModule thay vì forRoot :
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CartComponent } from './cart/cart.component'; import { CheckoutComponent } from './checkout/checkout.component'; import { ConfirmComponent } from './confirm/confirm.component'; import { routes } from './shop.routing'; import { RouterModule } from '@angular/router'; 😋 Và đó là tất cả những gì cần làm! Đến đây bạn có thể sử dụng lệnh routerLink để chuyển đến / shop , / shop / checkout hoặc / shop / xác nhận và module sẽ được tải vào lần đầu tiên một trong những đường dẫn này được chuyển đến.
Mẹo: Nếu nó không hoạt động ngay lập tức, hãy thử khởi động lại server của bạn.
Xác minh tải chậm hoạt động trong DevTools bằng cách xem liệu một đoạn mới có được tải hay không khi chuyển đến một tuyến đường trên module được tải chậm:
Các tin liên quan
