A Beginner's Guide to Code Splitting Your React App
summary
Claims that code splitting is easy now and practical: use dynamic import with webpack 2 and the Babel plugin to emit separate bundles, keep a hashed vendor file for long‑term caching, and cut initial payloads for the reported 75% mobile traffic. Prototype work shows responsive components (mobile first) and conditional lazy upgrades for desktop; watch for SSR markup mismatches, the microtick delay of async imports, and mitigate waterfall stalls with link preload/prefetch and real‑device profiling.
AI-written summary · about
chapters (26)
- 0:00Intro
- 1:09What we think
- 1:40Mobile first
- 2:34Browser support
- 2:47Shipping JS
- 3:20Long Term Caching
- 4:23Ship Less JS
- 5:29Easy to use
- 5:40Before
- 6:56Simple example
- 7:14Run Webpack
- 7:34What we load
- 8:00Loaded async
- 8:43Async React Components
- 9:44Simple Lazy Load Component
- 11:14Patterns
- 12:41Route level splitting
- 14:15Maps to application hierarchy
- 15:31Quick recap
- 16:16Component level splitting
- 17:01Responsive Components
- 17:40How do we model this?
- 19:47Conditional imports are easy!
- 20:35Mismatch
- 21:18Avoid waterfalls
- 22:33import() is always async
related talks
33mMaximising performance with React code-splitting techniques
18mCode Splitting Patterns with Vue
01h 00mReact Loadable: Code Splitting with Server Side Rendering
09mNative React 18 Code-Splitting with Gatsby
30mWebpack – The React Parts
25mScaling React.js Applications
23mStreamline your code with webpack
07mThe Lazy Way to Better Performance