lazy API

Carica componenti in modo asincrono solo quando vengono usati.

Import dinamico

lazy carica un componente solo quando Wompo deve renderizzarlo.

import { lazy } from 'wompo';

const UserChart = lazy(() => import('./UserChart.js'));

Il file importato deve esportare il componente come default.

// UserChart.js
import { defineWompo, html } from 'wompo';

function UserChart() {
  return html`<section>Chart content</section>`;
}

defineWompo(UserChart);
export default UserChart;

Renderizza il componente lazy come qualunque altro componente dinamico Wompo.

function Dashboard() {
  return html`
    <section>
      <${UserChart} />
    </section>
  `;
}

Fallback con Suspense

Abbina lazy a Suspense quando vuoi mostrare una UI durante l'import del chunk.

import { Suspense, html, lazy } from 'wompo';

const UserChart = lazy(() => import('./UserChart.js'));

function Dashboard() {
  return html`
    <${Suspense} fallback=${html`<p>Loading chart...</p>`}>
      <${UserChart} />
    </${Suspense}>
  `;
}

Simulare un componente lento

In sviluppo locale i chunk spesso si caricano troppo in fretta per vedere il fallback. Per testarlo, puoi avvolgere l'import in un piccolo delay.

function delayImport(promise) {
  return new Promise((resolve) => setTimeout(resolve, 800))
    .then(() => promise);
}

const LazySettings = lazy(() => delayImport(import('./SettingsPanel.js')));

Errori comuni

Non ritornare una named export se non la converti nella forma con default.

// Sbagliato se il file non esporta default.
const Chart = lazy(() => import('./Chart.js'));
// Corretto quando il componente e' esportato per nome.
const Chart = lazy(() =>
  import('./Chart.js').then((module) => ({
    default: module.Chart,
  })),
);