Back

Internacionalización Ligera: Reemplaza las Librerías con la API Intl

OpenReplay Team OpenReplay Team

Oct 3, 2025 · 4 min read

Internacionalización Ligera: Reemplaza las Librerías con la API Intl

¿Tu bundle de JavaScript incluye Moment.js? Son 280KB para formatear fechas. ¿La API Intl nativa de JavaScript? Cero kilobytes. Esta diferencia tan marcada representa miles de dólares en costos de ancho de banda y segundos de tiempo de carga que impactan directamente en tus tasas de conversión.

Las aplicaciones web modernas no necesitan librerías pesadas de internacionalización. La API Intl de JavaScript proporciona formateo de fechas, formateo de números, formateo de monedas, pluralización y ordenamiento de cadenas—todo integrado en el navegador. Este artículo te muestra cómo reemplazar Moment.js, date-fns, numeral.js y librerías similares con soluciones nativas que mejoran el rendimiento y reducen la complejidad.

Puntos Clave

  • La API Intl añade cero kilobytes a tu bundle mientras que librerías como Moment.js añaden 280KB
  • El soporte nativo del navegador cubre más del 99.5% de los usuarios—no se necesitan polyfills
  • Reemplaza el formateo de fechas, formateo de números y pluralización con APIs integradas
  • Almacena en caché las instancias de formateadores para un rendimiento óptimo en producción

Por Qué Reemplazar Librerías Pesadas con la API Intl de JavaScript

El Problema del Tamaño del Bundle

Las librerías populares de internacionalización añaden peso significativo a tu aplicación:

  • Moment.js: 280KB (67KB comprimido con gzip)
  • date-fns: 75KB (17KB comprimido con gzip) para funciones comunes
  • numeral.js: 72KB (18KB comprimido con gzip)

Estos números se acumulan cuando incluyes datos de localización. La API Intl de JavaScript requiere cero bytes adicionales—ya está en el navegador.

Soporte Nativo del Navegador en 2025

La compatibilidad del navegador ya no es una preocupación. La API Intl tiene soporte universal en todos los navegadores modernos. Solo Internet Explorer y Opera Mini carecen de soporte—navegadores que representan menos del 0.5% del uso global. Tus usuarios ya tienen estas APIs.

Formateo de Fecha y Hora con Intl.DateTimeFormat

Formateo Básico de Fechas

Reemplaza el formateo de fechas de Moment.js:

// Antes: Moment.js
moment().format('MMMM DD, YYYY'); // "October 3, 2025"

// Después: Intl nativo
new Intl.DateTimeFormat('es-ES', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(new Date()); // "3 de octubre de 2025"

Opciones Avanzadas

La API nativa maneja zonas horarias y formateo complejo:

new Intl.DateTimeFormat('es-ES', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'Europe/Madrid'
}).format(new Date()); // "viernes, 3 de octubre de 2025, 15:30"

Formateo de Tiempo Relativo Sin Librerías

Reemplaza moment.fromNow() con tiempo relativo nativo:

// Antes: Moment.js
moment().subtract(2, 'hours').fromNow(); // "2 hours ago"

// Después: Intl nativo
const rtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
rtf.format(-2, 'hour'); // "hace 2 horas"
rtf.format(1, 'day'); // "mañana"

La API maneja automáticamente la pluralización y localización en diferentes idiomas.

Formateo de Números y Monedas Simplificado

Formateo de Números

Reemplaza numeral.js con formateo nativo de números:

// Antes: numeral.js
numeral(1234567.89).format('0,0.00'); // "1,234,567.89"

// Después: Intl nativo
new Intl.NumberFormat('es-ES').format(1234567.89); // "1.234.567,89"
new Intl.NumberFormat('de-DE').format(1234567.89); // "1.234.567,89"

Formateo de Monedas

El formateo nativo de monedas elimina dependencias externas:

const formatter = new Intl.NumberFormat('es-ES', {
  style: 'currency',
  currency: 'EUR'
});
formatter.format(1234.5); // "1234,50 €"

// Yen japonés (sin decimales)
new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
}).format(1234); // "¥1,234"

Pluralización Inteligente con Intl.PluralRules

Reemplaza la lógica condicional compleja con pluralización nativa:

const pr = new Intl.PluralRules('es', { type: 'ordinal' });
const suffixes = { one: '.º', two: '.º', few: '.º', other: '.º' };

function ordinal(n) {
  const rule = pr.select(n);
  return `${n}${suffixes[rule]}`;
}

ordinal(1); // "1.º"
ordinal(22); // "22.º"
ordinal(103); // "103.º"

Ordenamiento de Cadenas Consciente de Localización con Intl.Collator

Reemplaza el ordenamiento personalizado con collation nativa consciente de localización:

// Ordenamiento consciente de números
const collator = new Intl.Collator('es', { numeric: true });
['item2', 'item10', 'item1'].sort(collator.compare);
// ["item1", "item2", "item10"]

// Ordenamiento alemán (ä viene después de a)
const germanCollator = new Intl.Collator('de');
['Müller', 'Mueller', 'Maler'].sort(germanCollator.compare);
// ["Maler", "Mueller", "Müller"]

Mejores Prácticas para Producción

Caché de Formateadores

Crea formateadores una vez y reutilízalos:

// Almacena formateadores en caché para rendimiento
const formatters = new Map();

function getCurrencyFormatter(locale, currency) {
  const key = `${locale}-${currency}`;
  if (!formatters.has(key)) {
    formatters.set(key, new Intl.NumberFormat(locale, {
      style: 'currency',
      currency
    }));
  }
  return formatters.get(key);
}

Manejo de Errores

Implementa respaldos para entradas inválidas:

function safeFormat(date, locale = 'es-ES', options = {}) {
  try {
    return new Intl.DateTimeFormat(locale, options).format(date);
  } catch (error) {
    console.warn(`El formateo falló para la localización ${locale}`, error);
    return new Intl.DateTimeFormat('es-ES', options).format(date);
  }
}

Limitaciones y Consideraciones Futuras

La API Intl sobresale en formateo pero no maneja aritmética de fechas. Para cálculos como añadir días o encontrar diferencias entre fechas, necesitarás la próxima API Temporal o una librería ligera de cálculos.

Considera mantener librerías solo cuando necesites:

  • Aritmética compleja de fechas
  • Parseo de cadenas de fecha arbitrarias
  • Soporte para navegadores legacy por debajo de IE11

Conclusión

La API Intl de JavaScript transforma la internacionalización de una carga de tamaño de bundle en una característica de costo cero. Al reemplazar Moment.js, date-fns y numeral.js con APIs nativas, eliminas dependencias, mejoras el rendimiento y simplificas el mantenimiento.

Comienza tu migración hoy: identifica los usos de solo formateo de estas librerías y reemplázalos con Intl. Tus usuarios experimentarán tiempos de carga más rápidos, y tu aplicación será más mantenible. El mejor código es el código que no tienes que enviar.

Preguntas Frecuentes

La API Intl maneja el formateo pero no la aritmética de fechas como añadir días o calcular diferencias. Para estas operaciones, usa métodos nativos de Date o espera la API Temporal. La mayoría de aplicaciones solo usan librerías para formateo, haciendo de Intl un reemplazo perfecto.

Ahorrarás 280KB solo removiendo Moment.js, reduciendo el tiempo de carga en 1-3 segundos en conexiones más lentas. El rendimiento en tiempo de ejecución también mejora ya que las APIs nativas están optimizadas a nivel del navegador, ejecutándose frecuentemente 2-3x más rápido que las librerías de JavaScript.

Todos los navegadores modernos soportan las APIs Intl. Solo Internet Explorer y Opera Mini carecen de soporte, representando menos del 0.5% de los usuarios. Si debes soportar estos navegadores, usa un polyfill solo para esos usuarios en lugar de enviar librerías pesadas a todos.

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog