Code Splitting Patterns with Vue
summary
Claims that Vue makes code splitting trivial with a one-line change converting components to async and using webpack dynamic import; shows route and component splitting, temporal loading for modals, and naming chunks with webpack comments. Cites web stats: 14 seconds average load and 50% churn, sets targets like 200 kilobytes max initial JS and 100 KB CSS. Demonstrates Chrome Coverage for unused bytes and notes webpack 4 plugin work to async-load CSS alongside lazy components.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 0:51Bio
- 1:35Code Splitting
- 4:54Why should I care?
- 5:56Goals
- 6:47Two Types
- 7:00Static
- 8:55Dynamic
- 11:31Expand our Vue
- 16:30Contact
related talks
45mInside Vue Components
24mA Beginner's Guide to Code Splitting Your React App
07mThe Lazy Way to Better Performance
33mMaximising performance with React code-splitting techniques
12mLet's Vue Like It's 1999
39mVue.js - developer friendly, fast and versatile
24mLight, lazy asynchronous patterns for Vue Apps
45mDark Art of Webpack Bundle Tuning