←

browserslist en Next.js: eliminar 14 KiB de polyfills innecesarios

Contexto

PageSpeed Insights reportaba 14 KiB de "JavaScript heredado" -- polyfills para Array.prototype.at, Object.hasOwn, Array.prototype.flat, String.prototype.trimStart, etc. Todos estos son APIs nativas en cualquier browser moderno.

Lo que aprendi

Next.js (via Turbopack/SWC) usa el campo browserslist de package.json para decidir que polyfills incluir. Sin configuracion, asume compatibilidad amplia e inyecta polyfills que ya nadie necesita.

// package.json
{
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions",
    "last 2 Edge versions"
  ]
}

Que elimina esto

PolyfillSoportado nativamente desde
Array.prototype.atChrome 92, Firefox 90, Safari 15.4
Array.prototype.flatChrome 69, Firefox 62, Safari 12
Array.prototype.flatMapChrome 69, Firefox 62, Safari 12
Object.fromEntriesChrome 73, Firefox 63, Safari 12.1
Object.hasOwnChrome 93, Firefox 92, Safari 15.4
String.prototype.trimStartChrome 66, Firefox 61, Safari 12
String.prototype.trimEndChrome 66, Firefox 61, Safari 12

Todos tienen soporte en las ultimas 2 versiones de cualquier browser. Los polyfills son peso muerto.

Cuando NO hacer esto

  • Si tu audiencia incluye IE11 o browsers corporativos viejos
  • Si vendes a gobierno o instituciones con equipos de 5+ anos
  • Para un portfolio tecnico personal: es 100% seguro recortar

Impacto

~14 KiB menos de JS transferido. No cambia funcionalidad, solo elimina codigo que los browsers ya tienen nativo.

Referencia