Dynamic and Lazy Loading: A Deep Dive

on YouTube ↗30m

" summary

Detailed, actionable coverage of how Angular actually lazy loads: shows the dynamic import('d3') pattern that produces a separate bundle and a demo that proves it, explains CLI → webpack/bazel and the lazyModules array in angular.json, exposes the surprising commons chunk behavior (shared code moves into a common bundle and turning it off duplicates bytes), and ships an open‑source hero loader that registers a lazy bundle with Angular and injects a chosen component (via bootstrap array) into the DOM when triggered.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 3:55Lazy Loading - High Level
3. 6:11Moving Parts of Lazy Loading
4. 7:09The Magic String
5. 8:41Two Steps of Lazy Loading
6. 9:50Misconception
7. 22:18Lazy Loading non-Angular Code

" related talks

• 29mAdv Lazy Loading w/ AngularAaron Frost · AngularUP 2019
• 34mLazy-loading techniques beyond (Angular) routerVojtech Mašek · NG-DE Conference 2022
• 27mLazy Loading Web ApplicationsSani Yusuf · AngularNL 2020
• 30mStep by Step Improving Startup Performance with Lazy Loading in AngularManfred Steyer · ng-conf 2017
• 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
• 32mImproving Startup Performance with Lazy Loading in AngularManfred Steyer · NG-NL 2017
• 29mAngular Router - Let's Get Lazy!Bartosz Pietrucha · AngularUP 2017