Imágenes, PWA y rendimiento

Optimización automática, service worker declarativo, y presupuestos que bloquean el build.

Imágenes optimizadas automáticamente

<img src="/img/hero.jpg" alt="Portada" />
<!-- nexa build genera <picture> con AVIF + srcset real -->

Sin configuración: cualquier <img src> estático de más de 480px se convierte a <picture> con variantes AVIF reales en varios anchos, con width/height/loading="lazy" completados solos.

PWA

# nexa.toml
[pwa]
name = "Mi App"
icon = "/icon-512.png"

[pwa.cache]
"/assets" = "cache-first"
"/api" = "network-first"

nexa add pwa agrega [pwa] a nexa.toml. nexa build genera manifest.webmanifest y sw.js reales; cada página lleva el <link rel="manifest"> y el registro del service worker solos.

Presupuestos de rendimiento

# nexa.toml
[performance]
maxInitialJS = 15000
maxCSS = 20000
maxImage = 200000

Con esto declarado, nexa build falla (no solo avisa) si una página se pasa — nombrando exactamente qué se excedió.

Telemetría

# nexa.toml
[telemetry]
endpoint = "/api/telemetry"

Sin el endpoint explícito, @nexa/telemetry nunca se carga. Con él, cada página manda Core Web Vitals (LCP/CLS/INP) y errores sin capturar.