Устарел ли vue-i18n в 2026 году?

В сообществе Vue трудно найти более популярную библиотеку, чем vue-i18n. Развиваемая Kazupon еще со времен Vue 2, она лежит в основе @nuxtjs/i18n и используется почти в каждом многоязычном Vue-приложении.

Однако бенчмарки 2026 года привели к неожиданному выводу: vue-i18n оказался самым тяжелым runtime среди всех протестированных фронтенд-фреймворков.

В базовом проекте на Vite + Vue размером 31.5 КБ добавление vue-i18n увеличило средний объем JavaScript на страницу до 136.4 КБ, более чем в четыре раза превысив исходный вес.

Как фреймворк, славящийся легкостью и лаконичностью, получил настолько тяжелый инструмент локализации? И оправдана ли сегодня классическая runtime-модель?

Главные выводы

Самый тяжелый протестированный runtime:

С весом 24.3 КБ gzipped (83.2 КБ minified) до добавления текстов vue-i18n примерно в 9 раз тяжелее движка intlayer (2.7 КБ).

Увеличение объема страницы на 330%:

vue-i18n увеличил страницу Vue с 31.5 КБ до 136.4 КБ. Intlayer обеспечил 59.3 КБ, что на 56% легче.

Скрытый компилятор в браузере:

По умолчанию, без настройки специальных алиасов в сборщике, vue-i18n загружает весь компилятор сообщений в браузер для разбора строк на лету.

Темпы обновлений:

За прошедший год vue-i18n получил ~259 коммитов, сфокусированных на исправлении ошибок и совместимости с Vue.

Отсутствие нативного современного инструментария:

Нет встроенной поддержки Language Server (LSP), MCP-серверов для ИИ или автоматизированных CLI-команд перевода.

Поддержка vs. современные инструменты

Показать все данные таблицы

Показать все данные таблицы

Открыть таблицу в модальном окне для четкого просмотра всех данных

Репозиторий	Звезды	Всего коммитов	Коммитов / год	Последний коммит
intlify/vue-i18n
aymericzip/intlayer

Показатели за 12 месяцев:

• intlify/vue-i18n: 259 коммитов (плановые исправления для Vue 3 и Nuxt).
• aymericzip/intlayer: 4 343 коммита (развитие компилятора, LSP-утилит и интеграций с ИИ-агентами).

Зрелая библиотека гарантирует стабильность. Но современные фронтенды используют AST-преобразования при сборке, удаление мертвого кода и автоматический перевод нейросетями. Системе, работающей исключительно во время выполнения, сложно использовать эти новшества.

Чтобы понять, откуда взялись эти библиотеки, прочитайте историю i18n в JavaScript.

Загрузки npm

Число загрузок вознаграждает самые старые решения, а не лучшие. Библиотеку, выпущенную много лет назад, до сих пор устанавливает каждый проект, который выбрал её тогда, каждый запуск CI и каждый зависящий от неё пакет. Эта цифра измеряет инерцию, а не осознанный выбор.

ИИ-ассистенты усиливают этот эффект. next-intl, i18next и vue-i18n повсюду встречаются в коде, на котором они обучались, поэтому ассистенты предлагают их по умолчанию, не сравнивая альтернативы. Каждая подсказка добавляет загрузки, которые подпитывают следующую. Сравнивайте по бенчмарку, а не по числу загрузок.

Производительность в Vite + Vue

Бенчмарк проведен на проекте из 10 страниц и 10 языков на Vite и Vue 3:

Измерения в реальных браузерах с gzip-сжатием. Данные доступны в документации бенчмарка Vue.

Начальный оверхед библиотек

Размер до добавления переводов:

Runtime vue-i18n весит 24.3 КБ gzipped, что сопоставимо с ядром самого Vue. Intlayer добавляет лишь 2.7 КБ.

Вес страниц и утечка данных

Главные наблюдения

Значительный относительный рост:

Поскольку базовый стек Vue очень компактен (~31 КБ), подключение vue-i18n увеличивает вес страницы в четыре с лишним раза.

Утечка на другие маршруты:

По умолчанию 90% текста, передаваемого на страницу, относится к другим разделам сайта. Intlayer полностью исключает эти данные, снижая показатель до 0.0%.

Вес изолированных компонентов:

Компоненты с локальными областями видимости занимали в среднем 196 КБ в vue-i18n из-за дублирования каталогов против 6.5 КБ в Intlayer.

Как растёт утечка:

График ниже оценивает объём контента для теоретического приложения, в котором от 1 до 10 страниц и от 1 до 10 языков, примерно по 30 КБ текста на страницу. Динамическая загрузка по локали убирает ось языков, ограничение контента компонентом или маршрутом убирает ось страниц, и только их сочетание сохраняет объём стабильным.

Почему vue-i18n тяжелый?

Парсер AST в браузере

vue-i18n содержит встроенный компилятор сообщений. Правила множественного числа и интерполяции преобразуются в деревья AST прямо в браузере во время выполнения.

Чтобы избежать этого, необходимо прописывать алиасы на vue-i18n/dist/vue-i18n.runtime.esm-bundler.js и компилировать каталоги через @intlify/unplugin-vue-i18n. Многие команды упускают этот шаг.

Монолитный набор возможностей

vue-i18n включает форматирование чисел и дат, связанные сообщения, мосты для Options API ($t, v-t) и реактивные прокси. Даже если вам нужны только простые строки в <script setup>, браузер загружает всю функциональность.

Динамические ключи препятствуют tree-shaking

Так как "home.hero.title" вычисляется в рантайме, бандлеры не могут узнать, какие ключи реально вызываются. Неиспользуемые строки остаются в итоговом коде.

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Компилятор Intlayer отслеживает точные обращения к полям и исключает лишнее до сборки клиентских файлов. Подробнее в оптимизации бандла.

Опыт разработки

Внешние каталоги против совместного размещения

В vue-i18n тексты вынесены в обособленный каталог locales/. Intlayer располагает файлы контента непосредственно рядом с компонентами:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "Запускайте на любом языке"
  }
}

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

import { t, type Dictionary } from "intlayer";

export default {
  key: "hero",
  content: {
    title: t({
      en: "Ship in every language",
      ru: "Запускайте на любом языке",
    }),
  },
} satisfies Dictionary;

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

При переносе или удалении Hero.vue файл контента перемещается или удаляется автоматически.

Автодополнение против строгой проверки полноты

DefineLocaleMessage дает автодополнение в редакторе по базовой схеме. Но оно не гарантирует полноту всех переводов. Пропуск ключа в ru.json не вызовет ошибку сборки TypeScript.

В Intlayer словари валидируются строго. Включение strictMode приводит к ошибке сборки при отсутствии перевода в любом настроенном языке.

Инструменты для IDE и ИИ

Процессы перевода

vue-i18n не имеет встроенной команды для генерации переводов. Файлы обычно выгружают на внешние платформы вроде Crowdin или Phrase.

Intlayer предлагает встроенные решения:

Автодополнение через локальный ИИ (intlayer fill):

Заполняет недостающие ключи с использованием ваших API-ключей OpenAI, Anthropic, Mistral или Gemini.

Автономная визуальная CMS:

Используйте Intlayer CMS, чтобы контент-менеджеры редактировали тексты визуально с фиксацией изменений прямо в Git.

Свободная лицензия:

Все компоненты распространяются под лицензией Apache 2.0.

Когда vue-i18n по-прежнему оправдан?

Как улучшить текущую конфигурацию vue-i18n?

Intlayer предлагает готовые пакеты совместимости, полностью повторяющие сигнатуры функций vue-i18n и @nuxtjs/i18n (useI18n, $t, <i18n-t>). Вам не нужно переписывать шаблоны или composables, чтобы воспользоваться преимуществами легкой архитектуры на базе компилятора.

Настройка выполняется одной командой:

npx intlayer init --interactive

Интерактивный интерфейс командной строки:

1. Устанавливает пакет совместимости @intlayer/vue-i18n или @intlayer/nuxt-i18n.
2. Настраивает алиасы сборщика (Vite или Nuxt), чтобы привычные импорты и теги в шаблонах прозрачно вели на Intlayer, позволяя удалить vue-i18n из package.json.
3. Мгновенно включает диагностику языкового сервера (LSP), исключает 24-килобайтный AST-парсер из клиентского бандла и открывает локальные сценарии ИИ-перевода без глобального рефакторинга.

Подробные инструкции можно найти в наших руководствах:

• Простая совместимость: Сохраняйте существующие шаблоны с помощью адаптера для vue-i18n или @nuxtjs/i18n.
• Руководства по миграции: Конвертируйте JSON-файлы в типизированные словари по нашим инструкциям: с vue-i18n или с @nuxtjs/i18n.
• Гибридный подход: Оставьте vue-i18n в работе, подключив Intlayer к vue-i18n для строгой типизации и локального ИИ-перевода.

Проверьте сайт на утечки с помощью бесплатного SEO-сканера i18n:

Дополнительные статьи