Góc 2 kỹ thuật tải lười biếng

Question

Tôi đã viết một ứng dụng lớn với Angular 1 và requireJS với AMD để tải và cấu trúc chậm. Ứng dụng này không sử dụng các tuyến đường nhưng các phần của ứng dụng như HTML, css và Javascript (các mô-đun góc) bị tải chậm.

Bây giờ tôi muốn thay đổi thành Góc 2 và tôi đang tìm kiếm kỹ thuật tải tốt nhất cho HTML, css và JS (góc) nội dung không phụ thuộc vào tuyến đường và không phụ thuộc vào hàng nghìn javascript khác nhau khuôn khổ.

thành phần đường bốc Vì vậy, lười biếng có vẻ là khá đơn giản: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

nhưng làm thế nào bạn sẽ thực hiện điều đó mà không cần kịch bản các tuyến đường? Bạn có muốn giới thiệu một cái gì đó như webpack, hoặc tôi nên giữ requireJS? Có cái gì giống như OClazyload cho góc 2? Hay nó hoạt động bằng cách nào đó với Angular 2 ngay cả khi không có bất kỳ khung công tác nào?

Tôi là bạn của "giữ cho nó đơn giản" và tôi thực sự muốn giữ nó càng nhỏ và đơn giản càng tốt.

Cảm ơn!

Answer 1

Góc 2 dựa trên các thành phần web. Cách dễ nhất ("giữ cho nó đơn giản" như bạn đã nói) đang sử dụng các tuyến đường và các thành phần. Bạn cũng có thể tải các thành phần chỉ đơn giản bằng cách sử dụng các chỉ thị trong html của bạn. ví dụ:

@Component({ 
    selector: 'my-component', // directive name 
    templateUrl: './app/my.component.html', 
    directives: [] 
}) 
export class MyComponent {} 



@Component({ 
    selector: 'root-component', // directive name 
    directives: [MyComponent], 
    template: '<my-component></my-component>', 
}) 
export class myComponent {} 

nếu bạn sửa đổi mẫu của bạn để bao gồm <my-component> động nó sẽ tải các thành phần năng động. Đây không phải là phương pháp hay nhất.

có dynamic component loader cho góc 2, nhưng điều đó không đơn giản như sử dụng các tuyến đường hoặc chỉ thị. nó sẽ tạo ra một cá thể của một Component và attache nó vào một View Container nằm bên trong khung nhìn Component của một cá thể Component khác.

với nó, bạn có thể sử dụng:

@Component({ 
    selector: 'child-component', 
    template: 'Child' 
}) 
class ChildComponent { 
} 
@Component({ 
    selector: 'my-app', 
    template: 'Parent (<child id="child"></child>)' 
}) 
class MyApp { 
    constructor(dcl: DynamicComponentLoader, injector: Injector) { 
    dcl.loadAsRoot(ChildComponent, '#child', injector); 
    } 
} 
bootstrap(MyApp); 

DOM kết quả:

<my-app> 
    Parent (
    <child id="child">Child</child> 
) 
</my-app> 

Có một tùy chọn (nhìn liên kết angular2 ở trên), trong đó bạn có thể tùy chọn cung cấp các nhà cung cấp để cấu hình Injector được cung cấp cho Hợp phần Hợp phần này.

Hy vọng điều này sẽ hữu ích.

Answer 2

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

Hãy giả sử chúng ta có hai trang trong ứng dụng của chúng tôi, “nhà” và “về”. Một số người không bao giờ có thể tiếp cận trang giới thiệu, do đó, chỉ cần phân phát tải của trang giới thiệu cho những người thực sự cần trang đó. Đây là nơi chúng tôi sẽ sử dụng tải chậm.

Answer 3

Với góc 2 Phiên bản mới nhất, chúng tôi có thể sử dụng thuộc tính loadchildren để thực hiện tải chậm. Ví dụ: { đường dẫn: 'Khách hàng', loadChildren: './customer.module#Customer2Module?chunkName=Customer' },

Trong ví dụ ở trên này tôi đang sử dụng webpack Đóng bó (góc loader 2 bộ định tuyến) + Anguar 2 Định tuyến để tải các mô-đun.