Images, PWA and performance

Automatic optimization, a declarative service worker, and budgets that block the build.

Automatically optimized images

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

No config needed: any static <img src> wider than 480px turns into a <picture> with real AVIF variants at several widths, with width/height/loading="lazy" filled in on their own.

PWA

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

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

nexa add pwa adds [pwa] to nexa.toml. nexa build generates a real manifest.webmanifest and sw.js; every page carries the <link rel="manifest"> and the service worker registration on its own.

Performance budgets

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

With this declared, nexa build fails (not just warns) if a page goes over — naming exactly what was exceeded.

Telemetry

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

Without the explicit endpoint, @nexa/telemetry never loads. With it, every page sends Core Web Vitals (LCP/CLS/INP) and uncaught errors.