Интернационализация (i18n) в 2025: Dynamic Imports и ICU

Современный интернет стирает границы. В 2025 году 65% пользователей приходят на сайты из стран, где родной язык не английский. Но локализация это не просто перевод текста. Это поддержка плюральных форм, RTL-языков (например, арабского), динамическая загрузка ресурсов и адаптация под культурные особенности. В этой статье я расскажу, как использовать Dynamic Imports и ICU для создания гибких мультиязычных приложений, поделюсь примерами кода и сравню подходы.

Dynamic Imports: локализация без перегрузки бандла

Что изменилось в 2025 году?

Раньше мы подключали все языковые файлы разом, увеличивая размер бандла. Теперь динамическая загрузка позволяет загружать переводы только для нужного языка.

Пример на React с React.lazy

// Конфигурация i18n.js
import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';

const loadResources = async (locale) => {
  const translations = await import(`./locales/${locale}.json`);
  return translations.default;
};

i18n.use(initReactI18next).init({
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});

// Динамическая загрузка при смене языка
i18n.on('languageChanged', async (lng) => {
  const resources = await loadResources(lng);
  i18n.addResourceBundle(lng, 'translation', resources);
});

Преимущества:

• Уменьшение начального размера бандла на 40-70%.
• Поддержка «ленивой» загрузки для редко используемых языков.

ICU: мастер плюральных форм и интернационализации

Синтаксис ICU: больше чем просто множественное число

ICU (International Components for Unicode) решает проблемы:

• Плюральные формы (например, в русском: 1 сообщение, 2 сообщения, 5 сообщений).
• Гендерные согласования.
• Форматирование дат и чисел.

Пример с плюральными формами

// locales/ru.json
{
  "messages_count": "{count, plural, 
    one {У вас # сообщение} 
    few {У вас # сообщения} 
    many {У вас # сообщений} 
    other {У вас # сообщений}
  }"
}

Использование в коде:

const { t } = useTranslation();
t('messages_count', { count: 5 }); // "У вас 5 сообщений"

Поддержка RTL (Right-to-Left)

Для арабского или иврита:

1. Добавьте атрибут dir="rtl" в HTML.
2. Используйте CSS-переменные для переключения стилей:

:root {
  --text-align: left;
  --direction: ltr;
}

[dir="rtl"] {
  --text-align: right;
  --direction: rtl;
}

body {
  direction: var(--direction);
  text-align: var(--text-align);
}

Сравнительные тесты: Dynamic Imports или статическая загрузка

Рекомендации

1. Используйте ICU вместо кастомных условий для плюральных форм.
2. Динамические импорты подключайте через Webpack или Vite.
3. Тестируйте RTL с помощью Storybook или Cypress.
4. Кэшируйте переводы, сохраняйте загруженные языки в LocalStorage.

Интернационализация в 2025 году это не роскошь, а необходимость. Dynamic Imports и ICU упрощают поддержку множества языков без потери производительности. Начните с малого: подключите один язык, добавьте RTL, и ваш сайт станет ближе к пользователям из любой точки мира.