Modern Web Apps Performance Tricks with PWA and Vue
summary
Modern Vue PWA techniques: split route code with dynamic imports and webpack splitChunks, lazy-load off-screen components with v-if and dynamic import, and cache static assets via service workers using the Vue CLI PWA plugin or workbox. Measured claims include industry figures (Firefox: 2s faster → 15% more downloads; Aberdeen: 1s slower → 11% fewer pageviews; Bing: 2s → ~4% revenue loss) and a real project cutting bundle size by 60%. Tools: DevTools coverage, webpack bundle analyzer, bundle-phobia, import-cost.
AI-written summary · about
chapters (21)
- 0:00Intro
- 0:57Why performance is important?
- 3:10What influences loading time performance?
- 3:29Parsing
- 4:44SPEED = MONEY
- 5:17How webpack bundling works?
- 8:03Nuxt is doing per-route code-splitting out of the box!
- 8:27Rule #1 - Split your code per route
- 8:58Load off-screen components lazily
- 10:00Load non-critical libraries lazily
- 11:08What about code duplication?
- 13:27Make use of cache for static assets
- 14:03Service Worker
- 14:50Vue CLI PWA plugin
- 15:06Nuxt PWA module
- 16:02Prefetch lazily loaded resources
- 16:51Vue-cli 3 is prefetching lazy chunks out of the box!
- 17:58Measuring and analyzing
- 19:15Webpack bundle analyzer
- 20:26#2 'bundlesize' package
- 20:58VS Code 'Import cost' plugin
related talks
45mVue.js, PWA and the subway dilemma
40mSupercharge the speed of your app with these PWAs' secrets!
46mWeb Performance in 2018
25mSupercharge the speed of your app with these PWAs' secrets! ⚡
25mBulding (Progressive) Web Apps
30mPWA with PWF
28mSupercharge the Speed of your App with these PWAs Secrets!
55mPWA Fundamentals: websites with superpowers