Preload Strategies: Step in Time, Step in Time!
summary
Shows three concrete preload strategies implemented for Angular: an opt-in via route data that marks specific lazy modules to fetch, an on‑demand service (an RxJS Subject with startPreload(path)) that preloads on hover/click, and a network‑aware strategy using navigator.connection and Save‑Data to skip slow links. Demo implements Angular’s PreloadingStrategy interface, prefetches bundles so route navigation becomes snappy (demo app goes interactive ≈10s on simulated 3G and subsequent routes load immediately). Code on GitHub.
AI-written summary · about
chapters (15)
- 0:00Intro
- 0:35Two Impossible Choices
- 0:54Keen and Lazy Loading
- 2:24How Preload Works
- 4:01Navigating to a Route
- 4:40Preload Strategies
- 5:36How Preloading Works
- 6:04Preloading Options
- 8:31Preload Strategy Interface
- 8:49Custom Preload Strategy
- 9:02Optin Preload
- 11:29OnDemand Preload
- 17:30Network Aware
- 18:19Optin
- 19:00Final Tips
related talks
17mBe lazy, but with strategy
32mImproving Startup Performance with Lazy Loading in Angular
34mImproving Start-up Performance with Lazy Loading in Angular 2
31mBe lazy, but with strategy
30mStep by Step Improving Startup Performance with Lazy Loading in Angular
27mOptimizing Angular Apps - Techniques for Performance Excellence
34mLazy-loading techniques beyond (Angular) router
27mLazy Loading Web Applications