import React, { Suspense } from 'react';

// Dynamic import — creates a separate chunk
const Dashboard = React.lazy(() => import('./Dashboard'));
const Settings = React.lazy(() => import('./Settings'));
const UserProfile = React.lazy(() => import('./UserProfile'));

function App() {
  return (
    <Suspense fallback={<div className="spinner">Loading...</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/profile" element={<UserProfile />} />
      </Routes>
    </Suspense>
  );
}

// Load a heavy chart library only on user action
button.addEventListener('click', async () => {
  const { renderChart } = await import('./heavy-chart.js');
  renderChart(data);
});

// Load a Markdown parser when needed
async function renderMarkdown(content) {
  const { marked } = await import('marked');
  return marked.parse(content);
}

// Only load expensive libraries when needed
async function showMap(location) {
  if (!document.querySelector('#map-container')) return;

  const L = await import('leaflet');
  const map = L.map('map-container').setView([location.lat, location.lng], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
}

<!-- defer — executes after HTML is parsed, in order -->
<script defer src="non-critical.js"></script>

<!-- async — executes as soon as it's downloaded -->
<script async src="analytics.js"></script>

<!-- Dynamic script loading -->
<script>
  function loadScript(src) {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.body.appendChild(script);
  }

  // Load analytics only after user interaction
  button.addEventListener('click', () => loadScript('analytics.js'));
</script>