0Pricing
Web Performance Optimization & Lighthouse · Lesson

Code Splitting and Lazy Loading

Split large JavaScript bundles into on-demand chunks with dynamic imports and route-based splitting so users download only the code they actually need.

Code Splitting and Lazy Loading is a free Web Performance Optimization & Lighthouse lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Performance Optimization & Lighthouse learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Monolithic Bundle Problem

Shipping all JavaScript in one bundle forces users to download code for pages they may never visit. Code splitting breaks the bundle into smaller chunks loaded only when needed.

Dynamic import()

The dynamic import() expression returns a promise and tells bundlers to create a separate chunk. The module loads on demand at runtime.

button.addEventListener('click', async () => {
  const { renderChart } = await import('./chart.js');
  renderChart();
});

Route-Based Splitting

The most impactful split is per route: each page becomes its own chunk, so the initial load contains only the landing route.

const Dashboard = React.lazy(() => import('./pages/Dashboard'));

Suspense Fallbacks

While a lazy chunk loads, show a fallback so the UI stays responsive. In React this is Suspense; other frameworks have equivalents.

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

Component-Level Splitting

Heavy widgets like rich text editors, maps, or charts can be split too, loading only when the user opens that feature rather than on first paint.

Vendor Splitting

Separating third-party libraries into a vendor chunk lets it cache independently. App code changes frequently; vendor code rarely does, so users re-download less.

Prefetching Chunks

Lazy loading can add a delay when the user navigates. Prefetch the chunk during idle time, for example on link hover, so it is ready before the click.

link.addEventListener('mouseenter', () => import('./pages/Settings'));

Avoiding Over-Splitting

Too many tiny chunks create request overhead and waterfalls. Aim for meaningful boundaries (routes, big features), not splitting every small function.

Tree Shaking Synergy

Code splitting pairs with tree shaking: use ES module imports and import only what you need so dead code never enters any chunk.

import { debounce } from 'lodash-es'; // only debounce is bundled

Measuring the Result

Use a bundle analyzer to inspect chunk sizes and the Coverage tab in DevTools to find unused code shipped on initial load. Lighthouse flags large unused JS.

Strategy Summary

  • Split by route first.
  • Lazy-load heavy components.
  • Separate vendor chunks for caching.
  • Prefetch likely-next chunks during idle.

Quick Check

Which JavaScript feature tells bundlers to create a separate chunk loaded on demand?

Recap

You learned to shrink initial payload with code splitting: dynamic import(), route- and component-level lazy loading, vendor chunking, idle prefetching, and tree shaking. Split at meaningful boundaries and measure with a bundle analyzer.

Frequently asked questions

Is the “Code Splitting and Lazy Loading” lesson free?

Yes — the full text of “Code Splitting and Lazy Loading” is free to read here on the web, and the Web Performance Optimization & Lighthouse course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Performance Optimization & Lighthouse course, upgrade to CoddyKit PRO.

What will I learn in “Code Splitting and Lazy Loading”?

Split large JavaScript bundles into on-demand chunks with dynamic imports and route-based splitting so users download only the code they actually need. You practise Web Performance Optimization & Lighthouse with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Web Performance Optimization & Lighthouse?

No prior experience is required. Web Performance Optimization & Lighthouse on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Code Splitting and Lazy Loading” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Web Performance Optimization & Lighthouse lesson?

Yes. Every Web Performance Optimization & Lighthouse lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Minimizing JavaScript Payload
  2. Efficient Script Loading Strategies
  3. Web Workers and Off-Main Thread
  4. Code Splitting and Lazy Loading
← Back to Web Performance Optimization & Lighthouse