Легкая интернационализация: замените библиотеки на Intl API

Ваш JavaScript-бандл включает Moment.js? Это 280 КБ только для форматирования дат. Нативный JavaScript Intl API? Ноль килобайт. Эта разительная разница означает тысячи долларов затрат на трафик и секунды времени загрузки, которые напрямую влияют на ваши показатели конверсии.

Современным веб-приложениям не нужны тяжелые библиотеки интернационализации. JavaScript Intl API предоставляет форматирование дат, чисел, валют, плюрализацию и сортировку строк — все встроено в браузер. В этой статье показано, как заменить Moment.js, date-fns, numeral.js и подобные библиотеки нативными решениями, которые улучшают производительность и снижают сложность.

Зачем заменять тяжелые библиотеки на JavaScript Intl API

Проблема размера бандла

Популярные библиотеки интернационализации значительно увеличивают вес вашего приложения:

• Moment.js: 280 КБ (67 КБ в gzip)
• date-fns: 75 КБ (17 КБ в gzip) для основных функций
• numeral.js: 72 КБ (18 КБ в gzip)

Эти цифры увеличиваются при включении локальных данных. JavaScript Intl API не требует дополнительных байтов — он уже в браузере.

Нативная поддержка браузеров в 2025 году

Совместимость с браузерами больше не является проблемой. Intl API имеет универсальную поддержку во всех современных браузерах. Только Internet Explorer и Opera Mini не поддерживают его — браузеры, которые представляют менее 0,5% глобального использования. У ваших пользователей уже есть эти API.

Форматирование даты и времени с Intl.DateTimeFormat

Базовое форматирование дат

Замените форматирование дат Moment.js:

// Было: Moment.js
moment().format('MMMM DD, YYYY'); // "October 3, 2025"

// Стало: Нативный Intl
new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(new Date()); // "October 3, 2025"

Расширенные опции

Нативный API обрабатывает часовые пояса и сложное форматирование:

new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
  timeStyle: 'short',
  timeZone: 'Europe/London'
}).format(new Date()); // "Friday, 3 October 2025 at 15:30"

Форматирование относительного времени без библиотек

Замените moment.fromNow() нативным относительным временем:

// Было: Moment.js
moment().subtract(2, 'hours').fromNow(); // "2 hours ago"

// Стало: Нативный Intl
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
rtf.format(-2, 'hour'); // "2 hours ago"
rtf.format(1, 'day'); // "tomorrow"

API автоматически обрабатывает плюрализацию и локализацию для разных языков.

Простое форматирование чисел и валют

Форматирование чисел

Замените numeral.js нативным форматированием чисел:

// Было: numeral.js
numeral(1234567.89).format('0,0.00'); // "1,234,567.89"

// Стало: Нативный Intl
new Intl.NumberFormat('en-US').format(1234567.89); // "1,234,567.89"
new Intl.NumberFormat('de-DE').format(1234567.89); // "1.234.567,89"

Форматирование валют

Нативное форматирование валют устраняет внешние зависимости:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
formatter.format(1234.5); // "$1,234.50"

// Японская иена (без десятичных знаков)
new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
}).format(1234); // "¥1,234"

Умная плюрализация с Intl.PluralRules

Замените сложную условную логику нативной плюрализацией:

const pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
const suffixes = { one: 'st', two: 'nd', few: 'rd', other: 'th' };

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

ordinal(1); // "1st"
ordinal(22); // "22nd"
ordinal(103); // "103rd"

Локализованная сортировка строк с Intl.Collator

Замените пользовательскую сортировку нативной локализованной сортировкой:

// Сортировка с учетом чисел
const collator = new Intl.Collator('en', { numeric: true });
['item2', 'item10', 'item1'].sort(collator.compare);
// ["item1", "item2", "item10"]

// Немецкая сортировка (ä идет после a)
const germanCollator = new Intl.Collator('de');
['Müller', 'Mueller', 'Maler'].sort(germanCollator.compare);
// ["Maler", "Mueller", "Müller"]

Лучшие практики для продакшена

Кэширование форматтеров

Создавайте форматтеры один раз и переиспользуйте их:

// Кэшируйте форматтеры для производительности
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);
}

Обработка ошибок

Реализуйте резервные варианты для некорректных входных данных:

function safeFormat(date, locale = 'en-US', options = {}) {
  try {
    return new Intl.DateTimeFormat(locale, options).format(date);
  } catch (error) {
    console.warn(`Formatting failed for locale ${locale}`, error);
    return new Intl.DateTimeFormat('en-US', options).format(date);
  }
}

Ограничения и будущие соображения

Intl API отлично справляется с форматированием, но не обрабатывает арифметические операции с датами. Для вычислений вроде добавления дней или поиска разности между датами вам понадобится будущий Temporal API или легкая библиотека для вычислений.

Рассмотрите сохранение библиотек только когда вам нужны:

• Сложные арифметические операции с датами
• Парсинг произвольных строк дат
• Поддержка устаревших браузеров ниже IE11

Заключение

JavaScript Intl API превращает интернационализацию из бремени размера бандла в функцию с нулевой стоимостью. Заменив Moment.js, date-fns и numeral.js нативными API, вы устраняете зависимости, улучшаете производительность и упрощаете сопровождение.

Начните миграцию сегодня: определите использование этих библиотек только для форматирования и замените их на Intl. Ваши пользователи получат более быстрое время загрузки, а ваше приложение станет более поддерживаемым. Лучший код — это код, который вам не нужно поставлять.

Часто задаваемые вопросы

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.