延迟加载是Angular中的一种技术,它允许您在激活特定路由时异步加载JavaScript组件。这可以在初始加载期间添加一些初始性能,特别是如果您有许多具有复杂路由的组件。
创建并初始化路由文件的app
我们的app将默认加载AppComponent
,然后当用户导航到时lazy/load-me
,将以异步方式加载lazy模块。
1 | ng new lazyDemo --routing |
在app组件中添加链接到lazy模块的链接。
1 | <button routerLink="/lazy/load-me"></button> |
初始化lazy模块
创建一个延迟加载的模块,以及几个组件。--flat
参数阻止创建目录,然后我们可以通过Angular CLI将组件添加到模块。
1 | ng g module lazy --flat |
在lazy module
中需要引入RouterModule
1 | import { NgModule } from '@angular/core'; |
LazyParentComponent
组件的lazy-parent.component.html
1 | <div *ngFor="let name of ['Foo', 'Bar', 'Baz']"> |
将App Router
指向Lazy Module
最后是将懒惰路由指向应用路由器的延迟模块。我们可以使用loadChildren带有模块文件路径的属性来执行此操作,然后使用#引用模块本身。这告诉angular只有在lazy url
激活时时加载LazyModule
。
1 | import { NgModule } from '@angular/core'; |
验证延迟加载是否正常工作
在chrome中,打开开发人员工具,然后单击网络选项卡。当您导航到惰性URL时,可以看到lazy-module.js
。加载需要2ms
。
- 本文链接: https:https://whyour.cn/post/lazy-load-angular-components.html
- 最后更新于:
- 版权声明: 本博客所有文章除特别声明外,均采用 署名 4.0 国际(CC BY 4.0) 许可协议。转载请注明出处!
javascript 中的 es6 技巧
angular6路由基础