🚀 Lazy USWDS Loading Example

About Lazy Loading

This demo shows how the Lazy USWDS Loading system automatically detects which components need USWDS JavaScript and loads it only when necessary.

Savings: ~200 KB for pages with only static components!

Scenario 1: Static Components Only

These components don't require USWDS JavaScript:

Scan for Static Components

Scenario 2: Add Interactive Component

Click the button below to add an interactive component that requires USWDS:

Add Modal (Requires USWDS JS) Add Accordion (Requires USWDS JS)

Code Examples

1. Automatic Detection (Recommended)

import { autoLoadUSWDS } from './utils/lazy-uswds-loader.js';

// Automatically scan and load USWDS if needed
window.addEventListener('DOMContentLoaded', async () => {
  const result = await autoLoadUSWDS({ debug: true });

  console.log('USWDS loaded:', result.loaded);
  console.log('Saved:', result.loaded ? '0 KB' : '~200 KB');
});

2. Manual Component Loading

import { ensureUSWDSLoaded, requiresUSWDS } from './utils/lazy-uswds-loader.js';

class USAModal extends LitElement {
  async connectedCallback() {
    super.connectedCallback();

    // Only load USWDS for interactive components
    if (requiresUSWDS('usa-modal')) {
      await ensureUSWDSLoaded();
    }

    this.initializeUSWDSComponent();
  }
}

3. Preloading Strategy

import { preloadUSWDS, ensureUSWDSLoaded } from './utils/lazy-uswds-loader.js';

// Start downloading USWDS early (in parallel)
preloadUSWDS();

// Later, when needed
await ensureUSWDSLoaded(); // Will use preloaded script