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/

原文地址:https://www.cnblogs.com/linlf03/p/7428150.html