🚀 Lazy Loading JavaScript

Load JavaScript only when needed — on click, hover, idle time, or when a block enters the viewport. Guide with working demos, caching patterns, prefetch, and framework recipes.

-50%

Initial Load Time Reduction

-60%

Bandwidth Saved

+45%

Lighthouse Performance Score

98%

Browser Support (Dynamic Import)

📖 What is Lazy Loading JavaScript?

Lazy loading JavaScript (on-demand / just-in-time loading) means the code is not downloaded during the first paint. It starts only after a trigger: click, hover, scroll into view, route change, or browser idle time.

That cuts the critical path: fewer bytes on first load, better LCP/FCP/INP, and users never pay for features they never open (charts, editors, date libraries, maps).

Rule of thumb: keep the first bundle for the current screen. Everything behind a click, a tab, or a fold belongs in a separate chunk.

🎯 Why Load Scripts on Click?

⚡

Faster Initial Load

Smaller main bundle. Only the shell and above-the-fold logic ship first.

📱

Better Mobile Experience

Saves data and battery. Heavy libs (moment, charts, maps) wait for intent.

🎯

Optimized User Flow

Admin tools, export, rich editors load only for the users who open them.

📊

Better Core Web Vitals

Less main-thread work on load improves LCP, FCP and often INP.

🛠️ Methods Overview

📦

Dynamic Import

ES import() — default choice for modules and bundlers.

ES6+

📝

Script Tag Injection

createElement('script') — CDN UMD builds, legacy browsers.

Vanilla

👁️

Intersection Observer

Start download when a widget is about to become visible.

Viewport

⚛️

Framework Solutions

React.lazy, Vue defineAsyncComponent, Angular loadChildren, next/dynamic.

React Vue Angular

📦 Method 1: Dynamic Import (ES Modules)

Modern standard. import() returns a Promise and works in Chrome 63+, Firefox 67+, Safari 14.1+, Edge 79+. Bundlers (Vite, Webpack, Rollup) split the imported file into its own chunk.

Basic example

// ❌ Static import — always in the first bundle
import moment from 'moment';

// ✅ Loaded only after click
document.getElementById('loadBtn').addEventListener('click', async () => {
    const { default: moment } = await import('moment');
    console.log(moment().format('DD.MM.YYYY HH:mm:ss'));
});

Cache the Promise (load once)

Do not call import() from scratch on every click. Store the Promise. The second call reuses the same module instance — no extra network request.

let momentPromise;

function loadMoment() {
    if (!momentPromise) {
        momentPromise = import('https://cdn.jsdelivr.net/npm/moment@2.29.4/+esm');
    }
    return momentPromise;
}

btn.addEventListener('click', async () => {
    const mod = await loadMoment();
    const moment = mod.default || mod;
    console.log(moment().format());
});

Live Demo: Load Moment.js on Click

🎯 Click to load moment.js (ESM from CDN)

Click the button to load the library...

⚡ Network tab: the ESM request appears only after the first click. Later clicks reuse the module.

Several libraries in parallel

async function loadLibraries() {
    const [lodash, axios] = await Promise.all([
        import('lodash'),
        import('axios')
    ]);
    return {
        chunks: lodash.chunk([1,2,3,4,5,6], 2),
        data: await axios.get('/api/data')
    };
}

Error handling + loading UI

btn.addEventListener('click', async () => {
    result.textContent = '⏳ Loading...';
    try {
        const module = await import('./heavy-module.js');
        result.textContent = '✅ ' + module.doHeavyWork();
    } catch (error) {
        result.textContent = '❌ ' + error.message;
    }
});

📝 Method 2: Dynamic Script Tag Injection

Universal approach for UMD / IIFE scripts from a CDN. Works even where ESM import() from a URL is blocked. Deduplicate by checking an existing <script src>.

Basic example with reuse

function loadScript(src) {
    const existing = document.querySelector('script[src="' + src + '"]');
    if (existing) return Promise.resolve();

    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.async = true;
        script.onload = resolve;
        script.onerror = () => reject(new Error('Failed: ' + src));
        document.head.appendChild(script);
    });
}

btn.addEventListener('click', async () => {
    await loadScript('https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js');
    console.log(moment().format());
});

Live Demo: Script tag

📝 Load UMD moment via createElement

Click to load the script...

📥 Method 3: Fetch + eval()

Fetch the source as text and run it. Flexible, but unsafe for untrusted URLs. Prefer import() or a script tag. If you must execute text, new Function is slightly clearer than bare eval, but the risk is the same.

const response = await fetch('/trusted/widget.js');
const code = await response.text();
// ⚠️ only first-party / reviewed code
new Function(code)();

⚠️ Security

Never eval user input or third-party APIs. CSP often blocks eval entirely — another reason to use dynamic import or script tags.

👁️ Method 4: Intersection Observer

When a chart, map, or comments widget is below the fold, start the download a little before it becomes visible (rootMargin). This is “lazy on scroll” without waiting for a click.

const target = document.getElementById('chart-slot');
const io = new IntersectionObserver(async ([entry], obs) => {
    if (!entry.isIntersecting) return;
    obs.unobserve(entry.target);
    const { renderChart } = await import('./chart.js');
    renderChart(entry.target);
}, { rootMargin: '200px 0px' });

io.observe(target);

👁️ Simulated viewport load

The box below “loads” a fake module the first time it is intersecting.

Scroll this box into view (already visible)…

Waiting for IntersectionObserver…

🔮 Prefetch, Preload & Idle

Lazy does not mean “start from zero on click”. You can warm the cache while the user is still deciding.

rel="preload" — you know the file is needed on this page very soon.
rel="prefetch" — likely needed on the next navigation (low priority).
requestIdleCallback — start import when the main thread is free.
Hover / focus on a button — prefetch a few hundred ms before click.

<!-- HTML: warm cache without executing -->
<link rel="prefetch" href="/chunks/editor.js" as="script">

// Hover intent
btn.addEventListener('pointerenter', () => {
    import('./editor.js'); // cache Promise for the later click
}, { once: true });

// Idle time
const ric = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
ric(() => { import('./rarely-used.js'); });

🖱️ Hover to prefetch, click to use

Hover starts a fake prefetch timer. Click consumes it.

⚛️ Framework Solutions

⚛️

React — React.lazy()

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

{show && (
  <Suspense fallback={<p>Loading…</p>}>
    <Heavy />
  </Suspense>
)}

🟩

Vue — defineAsyncComponent

const Heavy = defineAsyncComponent({
  loader: () => import('./Heavy.vue'),
  delay: 200,
  timeout: 10000
});

🅰️

Angular — loadChildren

{
  path: 'heavy',
  loadChildren: () =>
    import('./heavy/heavy.module')
      .then(m => m.HeavyModule)
}

📦

Next.js — next/dynamic

const Heavy = dynamic(
  () => import('../Heavy'),
  { ssr: false, loading: () => <p>…</p> }
);

🧩 Vite / Webpack code splitting

In a real app you almost never import from a CDN. You write a static path so the bundler can emit a separate file and a content hash.

// Vite / Webpack: path must be statically analyzable
const { openEditor } = await import('./features/editor.ts');

// Named chunk (Webpack magic comment)
await import(
  /* webpackChunkName: "charts" */ './charts.ts'
);

// Vite: manualChunks in build.rollupOptions if you need grouping

Avoid import(variable) with a fully dynamic URL — bundlers cannot split that reliably. Keep a static prefix: import(`./locales/${locale}.js`).

📊 Comparison Table

Method	Support	Performance	Security	Best for
Dynamic Import	✅ 98%	✅ Excellent	✅ Safe	App modules, bundlers
Script tag	✅ 100%	🟡 Good	✅ Safe	CDN UMD, analytics
Intersection Observer	✅ 97%	✅ Excellent	✅ Safe	Below-the-fold widgets
Prefetch / idle	✅ High	✅ Excellent	✅ Safe	Predictable next action
Fetch + eval	✅ 100%	🟡 Good	❌ Risky	Avoid in production
React.lazy / Vue async	✅ 98%	✅ Excellent	✅ Safe	UI components / routes

✅ Best Practices

🎯

Prefer import()

Default for first-party code. Script tags only for UMD CDNs.

🔄

Cache the Promise

One in-flight load per module. Reset only on hard failure if you retry.

📱

Show loading state

Disable the button, announce status, restore on error.

⚡

Prefetch on intent

Hover, focus, or idle — not every chunk on every page.

🧪

Measure

Network + Performance panels, Lighthouse, real RUM (INP).

♿

Accessibility

aria-busy on the host, keep focus after the widget mounts.

📊 Performance Comparison

📊 50 KB library: first load vs click

Initial Page Load0 KB

After Click (on-demand)0 KB

Click the button to see the performance impact