Web Performance in modern JavaScript world
summary
Claims that bundle size drives user loss with concrete numbers — 1s causes a context switch, 2s shaved yields 50% more Firefox downloads, 2s delay cuts ~4% revenue — and shows fixes. Demonstrates splitting apps with code splitting and dynamic import so routes and off‑screen components load lazily, adds prefetch via webpack magic comments to warm likely bundles, and uses service workers / Workbox, bundlephobia, webpack-bundle-analyzer and import-cost to measure and cache, with examples of loaders/placeholders and measurable build-size budgets.
AI-written summary · about
chapters (19)
- 0:00Intro
- 0:55Let's talk about Performance!
- 2:39What influences loading time performance?
- 4:47SPEED = MONEY
- 5:07How webpack bundling works?
- 8:40Split your code per route
- 9:10Load off-screen components lazily
- 10:02Load non-critical libraries lazily
- 11:39What about code duplication?
- 13:53Make use of cache for static assets
- 14:16Service Worker
- 15:30Nuxt PWA module
- 16:28Prefetch lazily loaded resources
- 17:44Vue-cli 3 is prefetching lazy chunks out of the box!
- 18:34#1 Dev tools "coverage" tool
- 19:23Webpack bundle analyzer
- 20:10#2 'bundlesize package
- 20:45VS Code 'Import cost' plugin
- 21:45component is loading
