A Beginner's Guide to Code Splitting Your React App

Learn how to optimize your React application's performance through code splitting in this insightful conference talk from React Conf 2017. Explore the concept of mobile-first development, browser support considerations, and techniques for shipping less JavaScript. Discover the benefits of long-term caching and dive into practical examples of code splitting implementation. Master async React components and lazy loading strategies, including route-level and component-level splitting. Understand how to effectively use conditional imports and avoid common pitfalls like mismatches and waterfalls. Gain valuable insights on profiling your app on real devices and optimizing your code for better user experience.

Intro
What we think
Reality
Mobile first
Browser support
Shipping JS
Long Term Caching
Ship Less JS
Easy to use
Before
Simple example
Run Webpack
What we load
In the browser
Loaded async
Async React Components
Simple Lazy Load Component
Patterns
Route level splitting
Maps to application hierarchy
Simple React Router v3 example
Quick recap
Component level splitting
Responsive Components
How do we model this?
Conditional imports are easy!
Mismatch
Profile on real devices
Avoid waterfalls
import() is always async