Adv Lazy Loading w/ Angular

on YouTube ↗29m

" summary

Shows how Angular lazy loading actually works: the Angular CLI/webpack step creates separate bundles via dynamic import() promise syntax (Angular v8 change) while webpack pulls shared code into a Commons chunk, so many “lazy” pieces still end up in the main bundle. Covers angular.json lazyModules configuration, manual loading and registration with Angular (you must register/ bootstrap the component), and demos using webpack-built bundles to lazily load d3 and a modal with the hero loader utility.

AI-written summary · about

" chapters (7)

1. 0:00Introduction to lazy loading
2. 2:17Lazy loading basics
3. 5:18Mechanism and implementation
4. 8:37Under the hood
5. 12:26Manual lazy loading
6. 14:13Common misconceptions
7. 19:17Live demo and conclusion

" related talks

• 30mDynamic and Lazy Loading: A Deep DiveAaron Frost · ngVikings 2019
• 34mLazy-loading techniques beyond (Angular) routerVojtech Mašek · NG-DE Conference 2022
• 27mLazy Loading Web ApplicationsSani Yusuf · AngularNL 2020
• 45mLazy Loading: Supercharge your Angular apps!Elian ORIOU, Damien Riccio · BDX I/O 2019
• 34mImproving Start-up Performance with Lazy Loading in Angular 2Manfred Steyer · NG-BE 2016
• 30mStep by Step Improving Startup Performance with Lazy Loading in AngularManfred Steyer · ng-conf 2017
• 32mImproving Startup Performance with Lazy Loading in AngularManfred Steyer · NG-NL 2017
• 29mAngular Router - Let's Get Lazy!Bartosz Pietrucha · AngularUP 2017