📦 Code Splitting & Lazy Loading

Chapter: Performance & Optimisation · Level ★★☆ · Time: 15 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Use React.lazyWrap lazy routes in SuspenseExplain route-level splittingExplain the performance benefit

📚 Quick Recap

🎯 What you'll practice: lazy() and Suspense for route-level code splitting.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5lazy() takes a function that returns a dynamic .

6Suspense's fallback prop shows while the component is .

7Write a lazy import for a Dashboard page component.

8Wrap a Routes block in Suspense with a "Loading..." fallback.

9Why does code splitting matter more as an app grows to dozens of pages?

🚀 Section C · Challenge ● CHALLENGE 5

10Design lazy-loaded routes for Home (eager), Dashboard (lazy), and Settings (lazy), with a single shared Suspense boundary.

💭 Reflection — the most useful thing I learned:

A ___/4 B ___/11 C ___/5 Total ___/20 Teacher's Signature Parent's Signature

✂ answer key — fold or cut before handing out

1-B 2-A 3-B 4-A | 5 = import() 6 = loading 7 = const Dashboard = lazy(() => import("./pages/Dashboard")); 8 = <Suspense fallback={<div>Loading...</div>}><Routes>...</Routes></Suspense> 9 = Without splitting, every visitor downloads the JS for all pages upfront even if they only view one — as page count grows this bundle grows too, slowing the initial load for everyone | 10 = import Home from "./pages/Home"; const Dashboard=lazy(()=>import("./pages/Dashboard")); const Settings=lazy(()=>import("./pages/Settings")); <Suspense fallback={<div>Loading...</div>}><Routes><Route path="/" element={<Home/>}/><Route path="/dashboard" element={<Dashboard/>}/><Route path="/settings" element={<Settings/>}/></Routes></Suspense>

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5