Internacionalização Leve: Substitua Bibliotecas pela API Intl

Seu bundle JavaScript inclui Moment.js? São 280KB para formatação de datas. A API nativa JavaScript Intl? Zero kilobytes. Essa diferença gritante representa milhares de reais em custos de largura de banda e segundos de tempo de carregamento que impactam diretamente suas taxas de conversão.

Aplicações web modernas não precisam de bibliotecas pesadas de internacionalização. A API JavaScript Intl fornece formatação de datas, formatação de números, formatação de moedas, pluralização e ordenação de strings—tudo integrado no navegador. Este artigo mostra como substituir Moment.js, date-fns, numeral.js e bibliotecas similares por soluções nativas que melhoram a performance e reduzem a complexidade.

Por que Substituir Bibliotecas Pesadas pela API JavaScript Intl

O Problema do Tamanho do Bundle

Bibliotecas populares de internacionalização adicionam peso significativo à sua aplicação:

• Moment.js: 280KB (67KB gzipado)
• date-fns: 75KB (17KB gzipado) para funções comuns
• numeral.js: 72KB (18KB gzipado)

Esses números se acumulam quando você inclui dados de localização. A API JavaScript Intl requer zero bytes adicionais—ela já está no navegador.

Suporte Nativo dos Navegadores em 2025

Compatibilidade de navegadores não é mais uma preocupação. A API Intl tem suporte universal em todos os navegadores modernos. Apenas Internet Explorer e Opera Mini não têm suporte—navegadores que representam menos de 0,5% do uso global. Seus usuários já têm essas APIs.

Formatação de Data e Hora com Intl.DateTimeFormat

Formatação Básica de Datas

Substitua a formatação de datas do Moment.js:

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

// Depois: Intl nativo
new Intl.DateTimeFormat('pt-BR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(new Date()); // "3 de outubro de 2025"

Opções Avançadas

A API nativa lida com fusos horários e formatação complexa:

new Intl.DateTimeFormat('pt-BR', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'America/Sao_Paulo'
}).format(new Date()); // "sexta-feira, 3 de outubro de 2025 15:30"

Formatação de Tempo Relativo Sem Bibliotecas

Substitua moment.fromNow() com tempo relativo nativo:

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

// Depois: Intl nativo
const rtf = new Intl.RelativeTimeFormat('pt-BR', { numeric: 'auto' });
rtf.format(-2, 'hour'); // "há 2 horas"
rtf.format(1, 'day'); // "amanhã"

A API automaticamente lida com pluralização e localização em diferentes idiomas.

Formatação de Números e Moedas Simplificada

Formatação de Números

Substitua numeral.js com formatação nativa de números:

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

// Depois: Intl nativo
new Intl.NumberFormat('pt-BR').format(1234567.89); // "1.234.567,89"
new Intl.NumberFormat('en-US').format(1234567.89); // "1,234,567.89"

Formatação de Moedas

A formatação nativa de moedas elimina dependências externas:

const formatter = new Intl.NumberFormat('pt-BR', {
  style: 'currency',
  currency: 'BRL'
});
formatter.format(1234.5); // "R$ 1.234,50"

// Iene Japonês (sem casas decimais)
new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
}).format(1234); // "¥1,234"

Pluralização Inteligente com Intl.PluralRules

Substitua lógica condicional complexa com pluralização nativa:

const pr = new Intl.PluralRules('pt-BR', { 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º"

Ordenação de Strings Sensível à Localização com Intl.Collator

Substitua ordenação personalizada com collation nativa sensível à localização:

// Ordenação com reconhecimento numérico
const collator = new Intl.Collator('pt-BR', { numeric: true });
['item2', 'item10', 'item1'].sort(collator.compare);
// ["item1", "item2", "item10"]

// Ordenação alemã (ä vem depois de a)
const germanCollator = new Intl.Collator('de');
['Müller', 'Mueller', 'Maler'].sort(germanCollator.compare);
// ["Maler", "Mueller", "Müller"]

Melhores Práticas para Produção

Cache de Formatadores

Crie formatadores uma vez e reutilize-os:

// Cache de formatadores para performance
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);
}

Tratamento de Erros

Implemente fallbacks para entradas inválidas:

function safeFormat(date, locale = 'pt-BR', options = {}) {
  try {
    return new Intl.DateTimeFormat(locale, options).format(date);
  } catch (error) {
    console.warn(`Formatação falhou para locale ${locale}`, error);
    return new Intl.DateTimeFormat('pt-BR', options).format(date);
  }
}

Limitações e Considerações Futuras

A API Intl se destaca na formatação, mas não lida com aritmética de datas. Para cálculos como adicionar dias ou encontrar diferenças entre datas, você precisará da próxima API Temporal ou de uma biblioteca leve de cálculos.

Considere manter bibliotecas apenas quando precisar de:

• Aritmética complexa de datas
• Parsing de strings de data arbitrárias
• Suporte a navegadores legados abaixo do IE11

Conclusão

A API JavaScript Intl transforma a internacionalização de um fardo para o tamanho do bundle em um recurso de custo zero. Ao substituir Moment.js, date-fns e numeral.js por APIs nativas, você elimina dependências, melhora a performance e simplifica a manutenção.

Comece sua migração hoje: identifique usos dessas bibliotecas apenas para formatação e substitua-os pela Intl. Seus usuários experimentarão tempos de carregamento mais rápidos, e sua aplicação será mais fácil de manter. O melhor código é o código que você não precisa enviar.

Perguntas Frequentes

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.