Light, lazy asynchronous patterns for Vue Apps
summary
Webpack dynamic import returns a promise and Vue turns a function that returns that promise into a lazily loaded component, so big libs live only in the pages that need them. The demo shows 3js at ~130 KB gzip and a vendors bundle shrinking from ~160 KB to ~30 KB after lazy loading. Covers lazy-load components in router, use prefetch but avoid preload unless needed, and alternatives for UX like the async component factory and Vue Promise
AI-written summary · about
chapters (6)
- 0:00Introduction
- 2:30It all starts with Webpack
- 5:40Lazy-loading Components
- 9:48Dynamic Components
- 15:24Analyzing your app
- 19:22Handling errors
related talks
07mThe Lazy Way to Better Performance
12mLet's Vue Like It's 1999
18mCode Splitting Patterns with Vue
45mDark Art of Webpack Bundle Tuning
30mDynamic and Lazy Loading: A Deep Dive
24mSuperpowers of browser's Web API
01h 03mVue.js is going to take the world
22mModern Web Apps Performance Tricks with PWA and Vue