Lazy-loading techniques beyond (Angular) router
summary
Shows concrete techniques and tools to cut payloads: use import-cost and bundlephobia to spot heavy libs, run webpack bundle analyzer and Angular CLI size reports, and inspect runtime with import-graph visualizer and bundle-wizard. Demonstrates dynamic import usage (including webpack magic comments for chunk naming, prefetch vs preload), lazy-loading heavy libs in pipes and a lazy-wrapper pattern for components, and a 95% reduction of highlight.js down to ~50KB by importing only needed highlighters.
AI-written summary · about
chapters (11)
- 0:00Introduction to performance
- 1:17Tooling for bundle analysis
- 4:37Dynamic imports in Angular
- 8:05Optimizing library imports
- 11:36Advanced dynamic import usage
- 14:29Webpack magic comments
- 17:45Prefetching and preloading
- 21:05Understanding chunk types
- 24:01Visualizing dependency graphs
- 27:35Dynamic component loading
- 30:54Conclusion and bonus tips
related talks
30mDynamic and Lazy Loading: A Deep Dive
29mAdv Lazy Loading w/ Angular
30mStep by Step Improving Startup Performance with Lazy Loading in Angular
20mTools for Fast Angular Applications
17mRethinking Angular Architecture & Performance
27mOptimizing Angular Apps - Techniques for Performance Excellence
34mImproving Start-up Performance with Lazy Loading in Angular 2
32mImproving Startup Performance with Lazy Loading in Angular