@intlayer/docs 9.5.5 → 9.5.7

package/blog/ru/vue-i18n_vs_intlayer_benchmark.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-09-13
 updatedAt: 2026-09-13
-title: "vue-i18n vs Intlayer: Бенчмарк 2026"
-description: vue-i18n и Intlayer измерены на одном приложении Vite + Vue 3. Размер библиотеки, JavaScript на странице, утечка контента, размер компонента и реактивность переключения локали, с объяснением цифр.
+title: "vue-i18n vs Intlayer: бенчмарк 2026"
+description: vue-i18n и Intlayer, измеренные на одном и том же приложении Vite + Vue 3. Размер библиотеки, JavaScript на страницу, утечка контента, размер компонентов и реактивность переключения локали, с объяснением цифр.
 keywords:
   - vue-i18n
   - Intlayer
@@ -21,34 +21,341 @@ slugs:
 author: aymericzip
 ---
 
-# vue-i18n VS Intlayer | Бенчмарк интернационализации Vue (i18n)
+# vue-i18n VS Intlayer | Бенчмарк интернационализации (i18n) для Vue
 
-`vue-i18n` — справочная библиотека i18n для Vue. Intlayer — альтернатива на основе компилятора с областью действия компонента и интеграцией Vue (`vue-intlayer`). Мы уже сравнивали их [функции и опыт разработчика](https://intlayer.org/blog/vue-i18n-vs-intlayer). Эта статья рассматривает, во что обходится каждый из них после сборки приложения.
+`vue-i18n` — эталонная i18n-библиотека для Vue. Intlayer — альтернатива на основе компилятора с контентом, ограниченным областью компонента, и интеграцией с Vue (`vue-intlayer`). Мы уже сравнивали их [возможности и опыт разработчика](https://intlayer.org/blog/vue-i18n-vs-intlayer). Эта статья рассматривает, во что обходится каждая из них после сборки приложения.
 
-Данные получены из [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), открытого набора, который собирает одно и то же приложение с каждой библиотекой и записывает то, что браузер фактически загружает и выполняет.
+Данные взяты из [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), open-source набора, который собирает одно и то же приложение с каждой библиотекой и записывает, что браузер на самом деле загружает и выполняет.
 
 <TOC/>
 
-> **tl;dr**: На том же приложении Vite + Vue 3 `vue-i18n` отправляет **134.9 KB** сжатого JavaScript на страницу по сравнению с **41.3 KB** для приложения без i18n. Intlayer отправляет **57.1 KB**. Сам runtime `vue-i18n` весит **24.3 KB gzip** (в 6 раз больше, чем **3.9 KB** Intlayer), каждая страница содержит **90% строк иностранных страниц**, и компонент, скомпилированный в изоляции, притягивает **196 KB**, потому что он привязан к глобальному дереву сообщений. Адаптер `@intlayer/vue-i18n` сохраняет API `vue-i18n` и измеряется **47.0 KB** на страницу.
+> **tl;dr**: На одном и том же приложении Vite + Vue 3 `vue-i18n` отдаёт **134,9 КБ** gzip-сжатого JavaScript на страницу против **41,3 КБ** для приложения без i18n. Intlayer отдаёт **57,1 КБ**. Один только рантайм `vue-i18n` весит **24,3 КБ gzip** (в 6 раз больше 3,9 КБ у Intlayer), каждая страница несёт **90 % строк чужих страниц**, а компонент, скомпилированный изолированно, тянет за собой **196 КБ**, потому что привязан к глобальному дереву сообщений. Адаптер `@intlayer/vue-i18n` сохраняет API `vue-i18n` и показал **47,0 КБ** на страницу.
 
-## Вкратце
+## Коротко
 
-- **vue-i18n** - Библиотека i18n де-факто для Vue 2 / Vue 3 и ядро `@nuxtjs/i18n`. ICU-style сообщения, SFC блоки `<i18n>`, директива `v-t`, форматеры `d()` / `n()`, большая экосистема. Сообщения регистрируются на глобальном экземпляре в `createI18n()`; ленивая загрузка по локали — это ручной паттерн `setLocaleMessage()`, а разделение по маршрутам вы строите сами.
-- **Intlayer** - Компонент-центричная модель контента. Словари `.content.ts` находятся рядом с компонентом, который они обслуживают, компилятор времени сборки (`vite-intlayer`) удаляет неиспользуемый код и выполняет ленивую загрузку по компоненту и по локали, строгие типы TypeScript генерируются из вашего контента, и отсутствующие переводы приводят к ошибке на этапе сборки. Поставляется с помощниками маршрутизатора / SEO, Visual Editor / CMS и AI-ассистентом перевода.
+- **vue-i18n** — де-факто i18n-библиотека для Vue 2 / Vue 3 и ядро `@nuxtjs/i18n`. Сообщения в стиле ICU, блоки `<i18n>` в SFC, директива `v-t`, форматтеры `d()` / `n()`, большая экосистема. Сообщения регистрируются на глобальном экземпляре в `createI18n()`; ленивая загрузка по локали — это ручной паттерн с `setLocaleMessage()`, а разбиение по маршрутам вам нужно строить самостоятельно.
+- **Intlayer** — модель контента, ориентированная на компоненты. Словари `.content.ts` лежат рядом с компонентом, который они обслуживают, компилятор на этапе сборки (`vite-intlayer`) выполняет tree-shaking и ленивую загрузку по компонентам и по локалям, строгие типы TypeScript генерируются из вашего контента, а отсутствующие переводы приводят к ошибке на этапе сборки. Включает хелперы для роутера / SEO, Visual Editor / CMS и перевод с помощью ИИ.
 
-| Библиотека            | GitHub звёзд                                                                                                                                                                   | Всего коммитов                                                                                                                                                                     | Последний коммит                                                                                                                                    | Первая версия | NPM версия                                                                                                  | Загрузки NPM                                                                                                           |
+| Библиотека            | Звёзды GitHub                                                                                                                                                                  | Всего коммитов                                                                                                                                                                     | Последний коммит                                                                                                                                    | Первая версия | Версия NPM                                                                                                  | Загрузки NPM                                                                                                           |
 | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | `aymericzip/intlayer` | [![GitHub Repo stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/aymericzip/intlayer/stargazers) | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![Last Commit](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) | Апрель 2024   | [![npm](https://img.shields.io/npm/v/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer) | [![npm downloads](https://img.shields.io/npm/dm/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer) |
 | `intlify/vue-i18n`    | [![GitHub Repo stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![Last Commit](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       | Дек 2016      | [![npm](https://img.shields.io/npm/v/vue-i18n?style=for-the-badge)](https://www.npmjs.com/package/vue-i18n) | [![npm downloads](https://img.shields.io/npm/dm/vue-i18n?style=for-the-badge)](https://www.npmjs.com/package/vue-i18n) |
 
-> Значки обновляются автоматически. Снимки будут отличаться со временем.
+> Бейджи обновляются автоматически. Снимки будут меняться со временем.
 
-## Сравнение функций рядом
+## Сравнение возможностей бок о бок
 
-| Функция                                        | `vue-intlayer` (Intlayer)                                    | `vue-i18n`                                                                             |
-| ---------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------- |
-| **Переводы рядом с компонентами**              | ✅ Да, `.content.ts` расположен вместе с каждым компонентом  | ✅ Через блоки SFC `<i18n>` (опционально); глобальные каталоги — это обычная настройка |
-| **Интеграция TypeScript**                      | ✅ Строгие типы автоматически генерируются из контента       | ✅ Хорошая типизация; строгая безопасность ключей требует типизации схемы и дисциплины |
-| **Обнаружение отсутствующих переводов**        | ✅ Ошибка TypeScript + ошибка/предупреждение во время сборки | ⚠️ Fallback во время выполнения + предупреждение в консоли                             |
-| **Богатое содержимое (компоненты / Markdown)** | ✅ Прямая поддержка                                          | ⚠️ Интерполяция компонента `<i18n-t>`; Markdown через внешние плагины                  |
-| **Поддержка ICU**                              | ⚠️ WIP                                                       | ✅ Да                                                                                  |
+| Возможность                                             | `vue-intlayer` (Intlayer)                                     | `vue-i18n`                                                                         |
+| ------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| **Переводы рядом с компонентами**                       | ✅ Да, `.content.ts` располагается рядом с каждым компонентом | ✅ Через блоки SFC `<i18n>` (опционально); обычно используются глобальные каталоги |
+| **Интеграция с TypeScript**                             | ✅ Строгие типы автоматически генерируются из контента        | ✅ Хорошие типы; строгая безопасность ключей требует типизации схемы и дисциплины  |
+| **Обнаружение отсутствующих переводов**                 | ✅ Ошибка TypeScript + ошибка/предупреждение во время сборки  | ⚠️ Fallback во время выполнения + предупреждение в консоли                         |
+| **Богатый контент (компоненты / Markdown)**             | ✅ Прямая поддержка                                           | ⚠️ Интерполяция компонентов `<i18n-t>`; Markdown через внешние плагины             |
+| **Поддержка ICU**                                       | ⚠️ В работе                                                   | ✅ Да                                                                              |
+| **Форматирование (даты, числа, валюты)**                | ✅ Форматтеры на основе Intl                                  | ✅ `d()` / `n()` с `datetimeFormats` / `numberFormats`                             |
+| **Локализованная маршрутизация**                        | ✅ Хелперы для Vue Router / Nuxt, `getMultilingualUrls`       | ⚠️ Не в ядре (`@nuxtjs/i18n` или собственная настройка роутера)                    |
+| **SEO-хелперы (hreflang, sitemap, robots)**             | ✅ Встроенные хелперы                                         | ❌ Не в ядре                                                                       |
+| **Tree-shaking (отдавать только используемый контент)** | ✅ По компонентам, по локалям, автоматически компилятором     | ⚠️ Вручную: разбивать каталоги, `setLocaleMessage()` на каждый маршрут             |
+| **Ленивая загрузка**                                    | ✅ `importMode: 'dynamic'` (одна строка конфигурации)         | ✅ Ручной `import()` + `setLocaleMessage()`                                        |
+| **Очистка неиспользуемого контента**                    | ✅ Мёртвые словари удаляются на этапе сборки                  | ❌ Не встроено                                                                     |
+| **Проверка отсутствующих переводов (CLI / CI)**         | ✅ `npx intlayer content test`                                | ⚠️ Сторонние инструменты (`vue-i18n-extract`)                                      |
+| **Перевод с помощью ИИ**                                | ✅ Встроен, использует ваши собственные ключи провайдера      | ❌ Нет                                                                             |
+| **Visual Editor / CMS**                                 | ✅ Бесплатный Visual Editor + опциональная CMS                | ❌ Нет (внешние платформы локализации)                                             |
+| **MCP-сервер и Agent Skills**                           | ✅ Да                                                         | ❌ Нет                                                                             |
+| **Экосистема / сообщество**                             | ⚠️ Меньше, но быстро растёт                                   | ✅ Большая и зрелая в экосистеме Vue                                               |
+
+## Бенчмарк
+
+### Что измерялось
+
+Набор [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) собирает **одно и то же приложение Vite + Vue 3** с каждой библиотекой: **10 страниц** (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), **10 локалей** (`en`, `fr`, `es`, `de`, `it`, `pt`, `zh`, `ja`, `ko`, `ru`), одинаковые компоненты и одинаковый контент. Страницы измеряются в `en` и `fr`.
+
+Обе библиотеки тестировались в конфигурации **static** — той, с которой выходит большинство Vue-проектов: для `vue-i18n` JSON каждой локали импортируется и передаётся в `createI18n({ messages })`; для Intlayer — `importMode: 'static'` по умолчанию. В этом режиме Intlayer тоже упаковывает все локали, но компилятор по-прежнему ограничивает контент **по компонентам**, так что страница несёт только словари тех компонентов, которые она рендерит.
+
+Для каждой сборки набор записывает:
+
+- **Lib size**: gzip-размер пустого компонента, который только импортирует i18n-библиотеку. Фиксированная стоимость рантайма.
+- **Page JS**: gzip JavaScript, загружаемый на страницу, усреднённый по всем страницам и локалям.
+- **Locale leak %**: доля переведённых строк в загруженном JS, которые принадлежат локали, которую пользователь **не** просматривает (отпечатки по `en` и `fr`, так что 50 % означает «вторая измеряемая локаль присутствует полностью»; при 10 упакованных локалях реальные потери выше).
+- **Page leak %**: доля переведённых строк в загруженном JS, которые принадлежат странице, на которой пользователь **не** находится.
+- **Component avg**: средний gzip-размер каждого компонента, скомпилированного изолированно. Показывает, сколько i18n-рантайма и каталога тянет за собой один компонент.
+- **E2E reactivity**: реальное время между выбором новой локали и обновлением `html[lang]` в DOM (Playwright, 5 итераций).
+- **Page load**: `PerformanceNavigationTiming.duration`.
+
+> Цифры ниже взяты из прогона от **2026-09-12** с `vue-i18n` 11.4.0 и `intlayer` 9.5.0 / 9.5.1. Тестовое приложение намеренно небольшое (несколько десятков строк на локаль), поэтому проценты утечки описывают **закономерность**: они растут вместе с вашим контентом, тогда как стоимость рантайма остаётся фиксированной.
+
+### Результаты на Vite + Vue 3
+
+| Библиотека                    | Стратегия | Lib size (gz) | Lib size (min) | Page JS ср. (gz) | Locale leak | Page leak | Component ср. (gz) | Реактивность E2E | Page load |
+| ----------------------------- | --------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | ---------------: | --------: |
+| **base** (без i18n)           | -         |        0,0 КБ |         0,0 КБ |          41,3 КБ |       0,0 % |         - |             1,1 КБ |           1,8 мс |   10,8 мс |
+| `vue-i18n`                    | static    |       24,3 КБ |        83,2 КБ |         134,9 КБ |      50,0 % |    90,0 % |           196,0 КБ |           2,8 мс |   13,6 мс |
+| **`vue-intlayer`**            | static    |    **3,9 КБ** |    **11,1 КБ** |      **57,1 КБ** |      56,8 % | **0,0 %** |         **7,7 КБ** |       **4,5 мс** |   13,8 мс |
+| `@intlayer/vue-i18n` (compat) | static    |        7,9 КБ |        23,2 КБ |          47,0 КБ |      15,0 % |     0,0 % |             8,4 КБ |           1,5 мс |    9,3 мс |
+
+> Столбец page-leak для базового приложения оставлен пустым: без i18n-библиотеки снятие отпечатков подхватывает жёстко закодированные строки в общих чанках, и число не имеет смысла.
+
+**Как это читать**
+
+- **Стоимость рантайма.** `vue-i18n` — один из самых тяжёлых рантаймов во всём бенчмарке: **24,3 КБ gzip / 83,2 КБ в минифицированном виде** для пустого компонента, который только его импортирует. `vue-intlayer` стоит 3,9 КБ gzip. Этот разрыв оплачивается на каждой странице независимо от того, сколько у вас строк.
+- **JavaScript на страницу.** Приложение без i18n весит 41,3 КБ. `vue-i18n` увеличивает его более чем втрое — до **134,9 КБ**; Intlayer выходит на **57,1 КБ**, +15,8 КБ, большая часть из которых — десять упакованных локалей (см. следующий пункт).
+- **Утечка.** С `createI18n({ messages: { en, fr, ... } })` каждая страница отдаёт все локали и строки всех страниц: **50 % утечки локалей** (по двум измеряемым локалям) и **90 % утечки страниц**. Режим `static` у Intlayer тоже упаковывает все локали (отсюда сопоставимый показатель утечки локалей), но даёт **0 % утечки страниц**: страница подтягивает только словари тех компонентов, которые рендерит. Переход на `importMode: 'dynamic'` убирает и утечку локалей; эта конфигурация не входила в данный прогон для Vue.
+- **Размер компонентов — то место, где проявляется архитектура.** Компонент, вызывающий `useI18n()`, компилируется в среднем в **196 КБ**, потому что `t()` привязан к глобальному экземпляру, который держит все сообщения всех локалей. Тот же компонент с `useIntlayer()` компилируется в **7,7 КБ**: он обращается только к своему словарю.
+- **Реактивность** не является проблемой ни для одной из них (2–5 мс). Система реактивности Vue делает переключение локали дешёвым, как только сообщения находятся в памяти.
+- **`@intlayer/vue-i18n`**, drop-in адаптер, сохраняет API `vue-i18n` и показал **47,0 КБ на страницу** и **8,4 КБ на компонент**, при этом код приложения не изменялся.
+
+> Для справки: тот же прогон измерил `fluent-vue` на уровне 171,8 КБ на страницу, 29,7 КБ рантайма и 217 КБ на компонент.
+
+## Откуда разрыв? Глобальный экземпляр против скомпилированных словарей
+
+`vue-i18n` — это рантайм. `createI18n()` создаёт глобальный экземпляр, хранящий дерево сообщений для каждой локали; `useI18n()` привязывает к нему каждый компонент; `t("footer.github")` ищет ключ во время рендера. Именно это делает возможными блоки SFC `<i18n>`, `v-t` и загрузку сообщений во время выполнения, и именно поэтому граф зависимостей каждого компонента включает всё дерево:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── ...                        # один файл на локаль, все страницы внутри
+└── src
+    ├── i18n.ts                    # createI18n({ messages: { en, fr, ... } })
+    ├── main.ts
+    └── components
+        └── Footer.vue             # const { t } = useI18n(); t("footer.github")
+```
+
+Оптимизация означает, что **вы** разбиваете `en.json` на файлы по маршрутам, **вы** вызываете `setLocaleMessage()` в guard роутера и **вы** поддерживаете корректность соответствия маршрутов файлам по мере перемещения компонентов. Рантайм не может сделать это за вас, потому что не знает, какие ключи запросит компонент.
+
+Intlayer переносит это знание на этап сборки. Контент объявляется рядом с компонентом, а `vite-intlayer` определяет, какой компонент импортирует какой словарь:
+
+```bash
+.
+├── intlayer.config.ts
+└── src
+    ├── main.ts                    # createApp(App).use(intlayer)
+    └── components
+        └── Footer
+            ├── Footer.vue         # useIntlayer("footer")
+            └── Footer.content.ts
+```
+
+Компилятор генерирует для каждого словаря и каждой локали ровно тот JSON, который нужен этому компоненту, и отбрасывает словари, которые никто не импортирует. Ограничение по маршрутам — следствие ограничения по компонентам, а не отдельная задача.
+
+> Чтобы также отбросить неиспользуемые локали, установите `dictionary.importMode: 'dynamic'` в `intlayer.config.ts`. См. [документацию по оптимизации бандла](https://intlayer.org/doc/concept/bundle-optimization).
+
+## Опыт разработчика
+
+### Настройка
+
+**vue-i18n**
+
+```ts fileName="src/i18n.ts"
+import { createI18n } from "vue-i18n";
+import en from "../locales/en.json";
+import fr from "../locales/fr.json";
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+  messages: { en, fr },
+});
+```
+
+```ts fileName="src/main.ts"
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import { i18n } from "./i18n";
+
+createApp(App).use(router).use(i18n).mount("#app");
+```
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayer(), vue()],
+});
+```
+
+```ts fileName="src/main.ts"
+import { createApp } from "vue";
+import { intlayer } from "vue-intlayer";
+import App from "./App.vue";
+import router from "./router";
+
+createApp(App).use(intlayer).use(router).mount("#app");
+```
+
+### Компонент
+
+**vue-i18n**
+
+```json fileName="locales/en.json"
+{
+  "counter": {
+    "label": "Counter",
+    "increment": "Increment"
+  }
+}
+```
+
+```vue fileName="src/components/Counter.vue"
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t, n } = useI18n();
+const count = ref(0);
+</script>
+
+<template>
+  <div>
+    <p>{{ n(count) }}</p>
+    <button :aria-label="t('counter.label')" @click="count++">
+      {{ t("counter.increment") }}
+    </button>
+  </div>
+</template>
+```
+
+`t('counter.label')` остаётся строкой, пока вы сами не типизируете схему сообщений; опечатка отрендерит ключ.
+
+**Intlayer**
+
+```ts fileName="src/components/Counter/Counter.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const counterContent = {
+  key: "counter",
+  content: {
+    label: t({ en: "Counter", fr: "Compteur" }),
+    increment: t({ en: "Increment", fr: "Incrémenter" }),
+  },
+} satisfies Dictionary;
+
+export default counterContent;
+```
+
+```vue fileName="src/components/Counter/Counter.vue"
+<script setup lang="ts">
+import { ref } from "vue";
+import { useIntlayer } from "vue-intlayer";
+import { useNumber } from "vue-intlayer/format";
+
+const { label, increment } = useIntlayer("counter");
+const number = useNumber();
+const count = ref(0);
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(count) }}</p>
+    <button :aria-label="label" @click="count++">
+      {{ increment }}
+    </button>
+  </div>
+</template>
+```
+
+`label` и `increment` типизированы; опечатка — это ошибка TypeScript, отсутствующее французское значение — ошибка сборки.
+
+### Ленивая загрузка по локали
+
+**vue-i18n**
+
+```ts fileName="src/i18n.ts"
+import { nextTick } from "vue";
+import { createI18n } from "vue-i18n";
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+});
+
+export const loadLocaleMessages = async (locale: string) => {
+  const messages = await import(`../locales/${locale}.json`);
+  i18n.global.setLocaleMessage(locale, messages.default);
+  await nextTick();
+  i18n.global.locale.value = locale;
+};
+```
+
+Затем вызовите `loadLocaleMessages()` из guard роутера и самостоятельно разбейте `locales/{locale}.json` по маршрутам, если хотите ограничение по страницам.
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+const config: IntlayerConfig = {
+  // ...
+  dictionary: {
+    importMode: "dynamic",
+  },
+};
+```
+
+## Сохраните API vue-i18n, получите результат Intlayer
+
+`@intlayer/vue-i18n` — это drop-in адаптер: `useI18n()`, `t()`, `d()`, `n()`, интерполяция `{name}` и `{0}`, множественные формы через pipe (`"car | cars"`), `v-t` и `i18n.global.locale` продолжают работать, но обслуживаются из словарей Intlayer, скомпилированных `vite-intlayer`.
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+В бенчмарке compat-сборка того же приложения уменьшилась с **134,9 КБ до 47,0 КБ** на страницу и с **196 КБ до 8,4 КБ** на компонент, при этом компоненты не менялись. Ваши существующие `locales/{locale}.json` могут оставаться источником истины через плагин синхронизации JSON.
+
+См. [руководство по миграции с vue-i18n](https://intlayer.org/doc/migration/vue-i18n) и [документацию по совместимости](https://intlayer.org/doc/compatibility/vue-i18n). У пользователей Nuxt тот же путь через [совместимость с `@nuxtjs/i18n`](https://intlayer.org/doc/compatibility/nuxtjs-i18n).
+
+## Когда что выбирать?
+
+- **Выбирайте vue-i18n**, если вам нужен стандартный подход Vue, вы полагаетесь на ICU-сообщения или блоки SFC `<i18n>`, уже используете `@nuxtjs/i18n` или платформа перевода ожидает централизованный JSON. Заложите время на разбиение каталогов и ленивую загрузку по маршрутам, если размер бандла имеет значение.
+- **Выбирайте Intlayer**, если вам нужны **контент, ограниченный компонентом**, **строгий TypeScript**, **ошибки отсутствующих ключей на этапе сборки**, **tree-shaking и ленивая загрузка без усилий** и встроенные редакторские инструменты (Visual Editor, CMS, ИИ-перевод, MCP-сервер). Особенно актуально для больших модульных кодовых баз Vue / Nuxt и дизайн-систем.
+- **Выбирайте `@intlayer/vue-i18n`**, если вы уже на `vue-i18n` и хотите выигрыш в размере бандла без переписывания.
+
+## Связанные сравнения
+
+- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (тот же бенчмарк)
+- [i18next vs Intlayer](https://intlayer.org/blog/i18next-vs-intlayer) (тот же бенчмарк)
+- [Lingui vs Intlayer](https://intlayer.org/blog/lingui-vs-intlayer) (тот же бенчмарк)
+- [vue-i18n vs Intlayer (возможности и DX)](https://intlayer.org/blog/vue-i18n-vs-intlayer)
+- [Устарел ли vue-i18n?](https://intlayer.org/blog/is-vue-i18n-outdated)
+
+## Звёзды GitHub
+
+Звёзды GitHub — сильный индикатор популярности проекта, доверия сообщества и долгосрочной актуальности. Хотя они не являются прямой мерой технического качества, они отражают, сколько разработчиков считают проект полезным, следят за его развитием и, вероятно, будут его использовать.
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+## Заключение
+
+`vue-i18n` — зрелая, гибкая и глубоко интегрированная с Vue библиотека. Бенчмарк показывает, во что обходится её runtime-first дизайн в сборке Vite: **рантайм 24 КБ gzip**, **134,9 КБ на страницу** для приложения, которое весит 41 КБ без i18n, **90 % контента чужих страниц** на каждой странице и компоненты, каждый из которых достигает **196 КБ**, потому что висит на глобальном дереве сообщений.
+
+Intlayer переносит работу в компилятор. Словари по компонентам и очистка мёртвого контента — это результаты сборки, а не соглашения. На том же приложении: **рантайм 3,9 КБ**, **57,1 КБ на страницу**, **0 % утечки страниц**, компоненты **в 25 раз меньше**. А если переписывание не рассматривается, `@intlayer/vue-i18n` проходит большую часть пути, не затрагивая компоненты.
+
+Все сырые данные, тестовые приложения и скрипты находятся в [репозитории Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Запустите его сами.
+
+Подробнее см. в документе [«Почему Intlayer?»](https://intlayer.org/doc/why).

package/blog/tr/i18next_vs_intlayer-i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next vs @intlayer/i18next: Aynı API, Farklı Paket Boyutu"
 description: Bir React veya Next.js uygulaması i18next, react-i18next ve next-i18next çağrılarını koruyup bunları @intlayer/i18next bağdaştırıcıları aracılığıyla sunduğunda ne değişir? Aynı kod üzerinde ölçülen sayfa başına JavaScript, bileşen boyutu, metin sızıntısı ve hidrasyon performansı.
 keywords:
@@ -28,6 +28,8 @@ author: aymericzip
 
 # i18next VS @intlayer/i18next | Aynı API, Farklı Paket Boyutu
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/i18next`, `@intlayer/react-i18next` ve `@intlayer/next-i18next` uyumluluk bağdaştırıcılarıdır. Kodunuzun zaten kullanmakta olduğu `i18next` API'sini (`useTranslation`, `t()`, `<Trans>`, `i18n.changeLanguage()`, `getFixedT`, `serverSideTranslations`...) doğrudan sunar ve Intlayer tarafından derlenen sözlüklerden besler. Bileşenleriniz değişmez; yalnızca altlarındaki çalışma zamanı (runtime) değişir.
 
 Bu makale, biri `next-i18next` ve diğeri `@intlayer/next-i18next` ile oluşturulmuş aynı Next.js uygulaması üzerindeki bu değişimi ölçmektedir. Veriler [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) projesinden alınmıştır. `i18next` ve Intlayer'ı bağımsız kütüphaneler olarak karşılaştırmak için [i18next vs Intlayer](https://intlayer.org/tr/blog/i18next-vs-intlayer) makalesini okuyabilirsiniz. Bu yazı ise kodunuzu olduğu gibi koruduğunuzda bağdaştırıcının neleri değiştirdiğine odaklanmaktadır.
@@ -109,6 +111,10 @@ Her derleme için şu metrikler kaydedilmiştir:
 
 ### Next.js Sonuçları
 
+İlgilendiğiniz metrikleri ve kütüphaneleri seçin:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Yapılandırma                 | Strateji       | Kütüphane (gz) | Sayfa JS Ort (gz) | Dil Sızıntısı | Sayfa Sızıntısı | Bileşen Ort (gz) |   E2E Tepki |   Hidrasyon |
 | ---------------------------- | -------------- | -------------: | ----------------: | ------------: | --------------: | ---------------: | ----------: | ----------: |
 | **base** (i18n yok)          | -              |         0.0 KB |          141.0 KB |          0.0% |            0.0% |           0.9 KB |     13.4 ms |     11.8 ms |
@@ -129,10 +135,21 @@ Her derleme için şu metrikler kaydedilmiştir:
 - **Daha hızlı hidrasyon ve dil değiştirme.** Hidrasyon süresi 15.6 ms'den **11.3 ms**'ye iner (`dynamic` kurgusunda arka uç sorgusu kritik yolda olduğu için 27.7 ms sürer). Dil değiştirme süresi de 15-16 ms'den **11-12 ms**'ye düşer.
 - **Bağdaştırıcı yerel çalışma zamanının aynısı değildir.** Yerel `next-intlayer` **141.3 KB** ile temel uygulamanın sadece +0.3 KB üzerindedir. Bağdaştırıcı, Intlayer çekirdeği üzerinde `i18next` API katmanını (enterpolasyon kuralları, çoğul ve bağlam çözümlemeleri, `<Trans>` etiket ayrıştırması) barındırdığı için yerel sürüme göre +9.4 KB ek yük getirir. Bu bir geçiş köprüsüdür, nihai durak değildir.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tüm tablo, her kütüphane ve her strateji, [Next.js kıyaslama raporunda](https://intlayer.org/tr/doc/benchmark/nextjs).
+
 > Vite / TanStack Start üzerindeki `react-i18next` bağdaştırıcısı bu test serisine dahil edilmemiştir. TanStack Start için temel referans [i18next vs Intlayer](https://intlayer.org/tr/blog/i18next-vs-intlayer) yazısında incelenebilir.
 
 ## Rakamların Değişme Sebebi
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 `components/` klasöründeki kodlar hiç değişmedi; tüm kazanımlar `useTranslation` fonksiyonunun neye bağlandığından kaynaklanmaktadır.
 
 **`i18next` ile**, bağlama genel örneğe (global instance) yapılır. İçine yüklenen her veri (`static` modunda tüm diller, `dynamic` modunda etkin dilin tüm ad alanı) `useTranslation()` çağıran her bileşenden erişilebilir durumdadır. Paketleyici bu örneğin içeriğini daha küçük parçalara bölemez ve çalışma zamanı render anında hangi anahtarların isteneceğini bilemez.
@@ -149,6 +166,10 @@ Her derleme için şu metrikler kaydedilmiştir:
     └── About.tsx                     # useTranslation(); t("about.title")
 ```
 
+Örneğin içerdiği her şey her sayfaya gönderilir ve israf iki eksende büyür, sayfalar ve diller:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **`@intlayer/next-i18next` ile**, bağlama doğrudan sözlüğe yapılır. `syncJSON` her ad alanı dosyasını bir sözlüğe dönüştürür; optimizasyon adımı ise bileşene yalnızca bildirdiği sözlüğü verir. Bu içe aktarım paketleyici tarafından kolayca izlenebilir, sayfa ve dil bazında eksiksiz olarak bölünebilir.
 
 ```bash
@@ -297,26 +318,112 @@ export default defineConfig({
 
 ## Başlamadan Önce Bilinmesi Gereken Kısıtlamalar
 
-- **Arka uçlar ve algılayıcılar devre dışıdır.** `i18n.use(HttpBackend)` yalnızca eklentinin `init` fonksiyonunu çağırır. Uygulamanız çalışma zamanında CMS'ten dinamik çeviri çekmeye bağımlıysa bu akış sonlanır; bunun yerine Intlayer CMS'i veya `intlayer pull` / `push` komutlarını tercih edin.
-- **`resources` birleştirilmez, yok sayılır.** Bazı diğer bağdaştırıcıların aksine, `@intlayer/i18next` satır içi `resources` nesnesini bir yedekleme mekanizması olarak kullanmaz. Her anahtarın senkronize sözlüklerde fiilen bulunması şarttır (bu durum `intlayer test` ile doğrulanır).
-- **App Router sağlayıcı düzenlemesi gerektirir.** Yukarıda gösterilen tek bir dosya. `appWithTranslation` kullanan Pages Router projelerinde hiçbir değişiklik gerekmez.
-- **`next-i18next.config.js` dikkate alınmaz.** `localePath`, `fallbackLng`, `reloadOnPrerender` gibi parametreler çalışmaz; diller ve varsayılanlar `intlayer.config.ts` içinde tanımlanmalıdır.
-- **Bağdaştırıcının da bir boyutu vardır.** `next-intlayer`'a kıyasla çalışma zamanında 9.4 KB ve sayfa başına +9.4 KB ek yük getirir. Tüm bileşenler `useIntlayer`'a geçtiğinde bağdaştırıcıyı kaldırabilirsiniz.
+<AccordionGroup>
+<Accordion header="Backend'ler ve algılayıcılar etkisizdir">
+
+`i18n.use(HttpBackend)` eklentinin init fonksiyonunu çağırır ve başka hiçbir şey yapmaz. Uygulamanız çalışma zamanında bir CMS'ten çevirileri çekmeye dayanıyorsa, bu akış artık yoktur; bunun yerine [Intlayer CMS](https://intlayer.org/tr/doc/concept/cms) veya `intlayer pull` / `push` komutlarını kullanın. Dil algılama, Intlayer'ın yönlendirme yapılandırması haline gelir (URL ön eki, çerez, başlık).
+
+</Accordion>
+<Accordion header="resources yoksayılır, birleştirilmez">
+
+Diğer bazı adaptörlerin aksine, `@intlayer/i18next` satır içi `resources` nesnesini bir geri dönüş olarak kullanmaz. Her anahtar, `intlayer test` komutunun doğruladığı senkronize sözlüklerde bulunmalıdır.
+
+</Accordion>
+<Accordion header="App Router sağlayıcı düzenlemesi gerektirir">
+
+Yukarıda gösterilen tek bir dosya. `appWithTranslation` kullanan Pages Router hiçbir şey gerektirmez.
+
+</Accordion>
+<Accordion header="next-i18next.config.js okunmaz">
+
+`localePath`, `fallbackLng`, `reloadOnPrerender` ve benzerlerinin bir karşılığı yoktur; diller ve geri dönüş `intlayer.config.ts` dosyasından gelir.
+
+</Accordion>
+<Accordion header="Adaptör ücretsiz değildir">
+
+`next-intlayer`'a kıyasla 9.4 KB çalışma zamanı ve sayfa başına +9.4 KB ek yük. Her bileşen `useIntlayer` kullanımına geçtikten sonra adaptörü kaldırın.
+
+</Accordion>
+</AccordionGroup>
 
 ## Hangi Çözüm Ne Zaman Tercih Edilmeli?
 
-- **`i18next` ile devam edin**: Uygulamanız çalışma zamanı arka uçlarına (istek anında CMS'ten sunulan çeviriler), özel eklenti ekosistemine veya bağdaştırıcıların kapsamadığı React dışı bir ortama zorunlu olarak bağımlıysa.
-- **`@intlayer/*` kullanın**: Halihazırda `react-i18next` / `next-i18next` kullanıyorsanız ve kodunuzu yeniden yazmadan 68 KB tasarruf, 8 kat daha küçük bileşenler, %0 sızıntı, tiplendirilmiş anahtarlar ve CI doğrulaması elde etmek istiyorsanız. Mevcut `i18next` projeleri için en pratik yükseltme yoludur.
-- **Yerel mimariye (`next-intlayer` / `react-intlayer`) geçin**: Yeni projeler için veya bağdaştırıcı geçişi tamamlandıktan sonra. En hafif alternatiftir (5.5 KB, sayfa başına +0.3 KB) ve senkron Server Components ile bileşen düzeyinde `.content.ts` kullanımının önünü açar.
+<AccordionGroup>
+<Accordion header="i18next'te kalın">
+
+Uygulamanız çalışma zamanı backend'lerine (istek anında bir CMS tarafından sunulan çeviriler), eklenti ekosistemine veya adaptörlerin kapsamadığı React dışı bir hedefe bağımlıysa.
+
+</Accordion>
+<Accordion header="@intlayer/* kullanın">
+
+`react-i18next` / `next-i18next` kullanıyorsanız ve kodu yeniden yazmadan 68 KB tasarruf, 8 kat daha küçük bileşenler, %0 sızıntı, tiplenmiş anahtarlar ve CI kontrolleri istiyorsanız. Mevcut bir `i18next` kod tabanı için giriş noktası budur.
+
+</Accordion>
+<Accordion header="Yerel kullanıma geçin (next-intlayer / react-intlayer)">
+
+Yeni projeler için veya adaptör görevini tamamladıktan sonra. En hafif çalışma zamanına (5.5 KB, sayfa başına +0.3 KB) sahiptir ve eşzamanlı Server Components ile bileşen başına `.content.ts` dosyalarının kilidini açar. [Next.js ile Intlayer](https://intlayer.org/tr/doc/environment/nextjs) veya [Vite ve React ile](https://intlayer.org/tr/doc/environment/vite-and-react) başlayın.
+
+</Accordion>
+</AccordionGroup>
+
+## SSS
+
+<FAQ>
+
+<Question title="68 KB tasarruf nereden geliyor?">
+
+`resources: { en, fr, ... }` yapısından. Temel `next-i18next` kurulumu her dilin JSON'unu `init()` içine aktarır, bu nedenle her sayfa her dildeki her ad alanını taşır: sayfa başına **218.5 KB**. Adaptör bu bloğu asla paketlemez; her bileşene yalnızca belirttiği sözlüğü, aktif dilde sunar.
+
+</Question>
+
+<Question title="<Trans> bileşenlerim çalışmaya devam ediyor mu?">
+
+Evet, `components`, numaralandırılmış `<1>...</1>` etiketleri ve `values` ile. Ayrıca `{{interpolation}}`, `$t(key)` iç içe geçirme, `key_one` / `key_other` çoğulları (`Intl.PluralRules` ile değerlendirilir), bağlam son ekleri ve `returnObjects` de desteklenir.
+
+</Question>
+
+<Question title="Dil başına tek bir translation.json kullanırsam ne olur?">
+
+`syncJSON` eklentisinde `splitKeys: false` olarak ayarlayın. Dosyanın tamamı tek bir sözlük olarak kalır ve yalın bir `useTranslation()` çağrısı ona göre çözümlenmeye devam eder.
+
+</Question>
+
+<Question title="Bu, Intlayer'a tamamen geçmekle aynı şey mi?">
+
+Hayır, bu bir köprüdür. Adaptör `i18next` API'sini korur ve 9.4 KB çalışma zamanı maliyeti vardır; yerel `next-intlayer` 5.5 KB maliyetindedir ve eşzamanlı Server Components ile bileşenle aynı konumda bulunan `.content.ts` dosyalarını ekler. JSON ve `.content.ts` sözlükleri bir arada var olduğundan bileşen bileşen geçiş yapabilirsiniz.
+
+</Question>
+
+<Question title="Çevirmenler bugün çalıştıkları gibi çalışmaya devam edebilir mi?">
+
+Evet. `locales/{lng}/{ns}.json` referans kaynağı olarak kalır: `syncJSON` dosyayı i18next sözdizimiyle okur ve CLI veya CMS güncellediğinde çevirileri geri yazar.
+
+</Question>
+
+</FAQ>
 
 ## İlgili Karşılaştırmalar
 
-- [i18next vs Intlayer](https://intlayer.org/tr/blog/i18next-vs-intlayer) (kütüphane bazlı doğrudan kıyaslama, aynı test verileri)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/tr/blog/next-intl-vs-intlayer-next-intl) (aynı bağdaştırıcı serisi)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/tr/blog/lingui-vs-intlayer-lingui) (aynı bağdaştırıcı serisi)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-vue-i18n) (aynı bağdaştırıcı serisi)
-- Geçiş rehberleri: [i18next](https://intlayer.org/tr/doc/migration/i18next), [react-i18next](https://intlayer.org/tr/doc/migration/react-i18next), [next-i18next](https://intlayer.org/tr/doc/migration/next-i18next)
-- Bağdaştırıcı referansları: [i18next](https://intlayer.org/tr/doc/compatibility/i18next), [react-i18next](https://intlayer.org/tr/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/tr/doc/compatibility/next-i18next)
+Aynı adaptör serisi:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/tr/blog/next-intl-vs-intlayer-next-intl)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/tr/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+Doğrudan karşılaştırılan kütüphaneler:
+
+- [i18next vs Intlayer](https://intlayer.org/tr/blog/i18next-vs-intlayer), same benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/tr/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/tr/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Is i18next outdated?](https://intlayer.org/tr/blog/is-i18next-outdated)
+
+Referans belgeler:
+
+- Compat adapters: [i18next](https://intlayer.org/tr/doc/compatibility/i18next), [react-i18next](https://intlayer.org/tr/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/tr/doc/compatibility/next-i18next)
+- Migration guides: [i18next](https://intlayer.org/tr/doc/migration/i18next), [react-i18next](https://intlayer.org/tr/doc/migration/react-i18next), [next-i18next](https://intlayer.org/tr/doc/migration/next-i18next)
+- [Next.js benchmark report](https://intlayer.org/tr/doc/benchmark/nextjs) and [TanStack Start benchmark report](https://intlayer.org/tr/doc/benchmark/tanstack)
+- [Bundle optimization](https://intlayer.org/tr/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/tr/doc/compiler)
+- [Visual Editor](https://intlayer.org/tr/doc/concept/editor), [CMS](https://intlayer.org/tr/doc/concept/cms) and [AI translation](https://intlayer.org/tr/doc/concept/auto-fill)
 
 ## Sonuç