Web Performance Optimization:
Code Splitting and Lazy Loading Techniques

Last updated: April 17, 2025

Table of Contents

1. Introduction

In modern web development, performance is paramount. Users expect fast-loading websites, and search engines prioritize performant sites. Two powerful techniques to achieve better load times and improve user experience are code splitting and lazy loading. This article explores what these techniques are, why they matter, and how to implement them, especially within popular JavaScript frameworks.

2. Understanding Code Splitting

Code splitting is a technique primarily used by module bundlers like Webpack, Rollup (used by Vite), and Parcel to create multiple bundles that can be dynamically loaded at runtime.

2.1 What is Code Splitting?

Instead of generating a single, large JavaScript file (bundle.js) containing all the code for your application, code splitting allows you to break it down into smaller chunks. These chunks can then be loaded on demand, or in parallel.

2.2 Why Use Code Splitting?

The main benefit is improved initial load time. Users don't need to download the code for features they might not use immediately (like admin panels, specific routes, or modals). By only loading the essential code first, the application becomes interactive much faster. This significantly impacts metrics like Time to Interactive (TTI).

2.3 Basic Implementation with Dynamic import()

The foundation of most code splitting is the dynamic import() syntax. Unlike static imports (import module from 'module'), dynamic imports return a Promise, allowing you to load modules asynchronously.

// Instead of static import:
// import { utilityFunction } from './utilities.js';

// Use dynamic import when needed (e.g., on button click):
button.addEventListener('click', async () => {
  try {
    const { utilityFunction } = await import('./utilities.js');
    utilityFunction();
    // Module is loaded and executed only now
  } catch (error) {
    console.error("Failed to load module:", error);
  }
});

Build tools recognize this syntax and automatically split the imported module (utilities.js in this case) into a separate chunk.

3. Understanding Lazy Loading

Lazy loading is a broader concept that overlaps with code splitting but often refers specifically to deferring the loading of off-screen or non-critical resources until they are actually needed.

3.1 What is Lazy Loading?

It's the practice of delaying the initialization or loading of objects, images, or code chunks until the point at which they are required. This conserves bandwidth and system resources, leading to faster initial page loads.

3.2 Lazy Loading Images

Images, especially large ones below the fold, are prime candidates for lazy loading.

Native Lazy Loading

The simplest method is using the native loading="lazy" attribute on <img> and <iframe> tags. Browser support is widespread.

<img src="image.jpg" loading="lazy" alt="Descriptive text" width="200" height="200">

JavaScript-based (Intersection Observer)

For more control or fallback scenarios, the Intersection Observer API can be used. You observe an image element, and when it enters the viewport, you switch a data-src attribute to the actual src.

3.3 Lazy Loading Components

This is where lazy loading directly leverages code splitting. Instead of loading all UI components (e.g., complex modals, charts, route-specific views) upfront, you load them only when they are about to be rendered. This is typically achieved using dynamic import() within frameworks.

4. Framework-Specific Approaches

Modern frameworks provide convenient abstractions over dynamic imports:

  • React: Uses React.lazy() and <Suspense>. 
    import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}
  • Vue: Uses dynamic imports directly for async components. 
    // Vue 3 with Script Setup
<script setup>
import { defineAsyncComponent } from 'vue'

const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)
</script>

<template>
  <Suspense>
    <HeavyComponent />
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>
  • Angular: Typically handles code splitting at the route level using loadChildren in the router configuration with dynamic imports. 
    // Example route configuration
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

5. Conclusion

Code splitting and lazy loading are essential optimization techniques for modern web applications. By strategically splitting your code into smaller chunks using dynamic import() and deferring the loading of non-critical resources like images and components, you can significantly improve initial load times, reduce bandwidth consumption, and provide a much smoother user experience. Leverage the built-in features of your build tools and frameworks to implement these techniques effectively.

6. Additional Resources

Related Articles

External Resources