Angular 4 延缓加载组件

1. 创建App

ng new lazySample --routing

 

在app组件中的定义路由

 

 

2. 创建“Lazy” Module

ng g module lazy --flat
ng g component lazy-parent --module lazy
ng g component lazy-child --module lazy

 创建组件lazy-parent和lazy-child　

 

　Lazy 模块的定义

 

lazy-parent组件定义

 

3. 将App路由指向Lazy模块

使用loadChildren属性

4. 最后测试，

ng serve后调用localhost:8080

然后点击 “Click Here”按钮

 

点击后，发现

多了一个0.chunk.js, 这个就是新的路由后，加载进来的js。从而达到延缓加载的目的。

参考https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/