Related: JavaScript Bundle Analysis: Tree Shaking and Code Splitting Explained covers how bundlers construct module graphs and where tree shaking fails, which is the foundation for understanding what code splitting actually does. The size of your JavaScript bundle is not the number that matters for first load. What matters is how much of that bundle is needed to render the page the user actually landed on. A 5MB React application where the user landed on the marketing homepage might need 80KB to show that page. The other 4.92MB is code for routes the user has not visited and may never visit. React.lazy() is how you stop shipping those 4.92MB on first load. What this covers: What React.lazy() does to the bundle at build time, how Suspense fits into the loading flow, how to confirm the split actually happened, the cases where it silently fails, and the preloading pattern that prevents waterfall fetches on navigation.…