Lazy Loading & Code Splitting

1. Introduction

Lazy Loading and Code Splitting are performance optimization techniques used to speed up initial page load times. Code Splitting divides your application code into smaller chunks that can be loaded on demand. Lazy Loading delays loading resources (like scripts or images) until they are actually needed (e.g. when an element scrolls into view).

2. Why It Matters

If your application compiles all code into a single massive JavaScript bundle, users must download and parse the entire file before they can interact with the page. This is inefficient for users on slow mobile networks. Splitting bundles allows users to load only the code required for the current page, reducing startup times.

3. Real-World Analogy

Think of a Multi-Course Banquet Dinner:

• Monolithic Bundle (All food at once): The restaurant places the appetizer, soup, salad, steak, dessert, and coffee on the table at the same time. The food gets cold, the table is cluttered, and you are overwhelmed.
• Code Splitting & Lazy Loading (Course-by-Course service): The waiter brings out the appetizer first (initial bundle). When you finish the appetizer, the waiter fetches the soup (lazy loading on demand). The kitchen prepares dessert only when you request it. You save table space, and the food is served fresh.

4. Code Splitting via Dynamic Imports

Standard ES imports are static (loaded immediately). You can split code using dynamic imports (import()), which load modules asynchronously:

5. Lazy Loading Images

You can lazy load images using the native loading="lazy" attribute, or implement custom lazy loading using the IntersectionObserver API:

6. Practical Example

This script demonstrates lazy loading a script or library when the user scrolls to a specific component container on the page:

7. Common Mistakes

• Lazy loading above-the-fold content: Avoid lazy loading elements visible in the viewport on initial load (like header logos or hero banner images). Lazy loading above-the-fold content delays rendering, worsening your Largest Contentful Paint (LCP) web vital score.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

// Objective: load module on user actions
// Bug: using string template variables in dynamic imports can break bundlers!
function loadWidget(name) {
  import(`./widgets/${name}.js`).then(module => {
    module.init();
  });
}

// Option 1: Use explicit, static import paths
const widgetImports = {
  chart: () => import('./widgets/chart.js'),
  table: () => import('./widgets/table.js')
};
function loadWidget(name) {
  const loadFn = widgetImports[name];
  if (loadFn) {
    loadFn().then(module => module.init());
  }
}

11. Interview Questions

12. Production Considerations

• • Pre-fetching: For critical code chunks that are lazy-loaded (like the next page route in a flow), use link pre-fetching (<link rel="preload">) to download resources in the background, minimizing delays when the user navigates.