@intlayer/docs 9.5.6 → 9.5.7

package/blog/tr/vue-i18n_vs_intlayer_benchmark.md

@@ -0,0 +1,361 @@
+---
+createdAt: 2026-09-13
+updatedAt: 2026-09-13
+title: "vue-i18n vs Intlayer: 2026 Benchmark"
+description: vue-i18n ve Intlayer aynı Vite + Vue 3 uygulamasında ölçüldü. Kütüphane boyutu, sayfa başına JavaScript, içerik sızıntısı, bileşen boyutu ve locale değiştirme reaktivitesi, rakamların açıklamasıyla birlikte.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internationalization
+  - i18n
+  - Benchmark
+  - Bundle size
+  - Blog
+  - Vue
+  - Nuxt
+  - Vite
+  - JavaScript
+slugs:
+  - blog
+  - vue-i18n-vs-intlayer-benchmark
+author: aymericzip
+---
+
+# vue-i18n VS Intlayer | Vue Uluslararasılaştırma (i18n) Benchmark'ı
+
+`vue-i18n`, Vue için referans i18n kütüphanesidir. Intlayer ise derleyici tabanlı, bileşen kapsamlı bir alternatiftir ve bir Vue entegrasyonu (`vue-intlayer`) sunar. [Özelliklerini ve geliştirici deneyimlerini](https://intlayer.org/blog/vue-i18n-vs-intlayer) zaten karşılaştırmıştık. Bu yazı, uygulama derlendikten sonra her birinin neye mal olduğuna bakıyor.
+
+Veriler, her kütüphaneyle aynı uygulamayı derleyen ve tarayıcının gerçekte ne indirip çalıştırdığını kaydeden açık kaynaklı bir paket olan [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom)'dan geliyor.
+
+<TOC/>
+
+> **tl;dr**: Aynı Vite + Vue 3 uygulamasında `vue-i18n`, i18n'siz uygulamanın **41,3 KB**'ına karşılık sayfa başına **134,9 KB** gzip'lenmiş JavaScript gönderiyor. Intlayer **57,1 KB** gönderiyor. `vue-i18n` runtime'ı tek başına **24,3 KB gzip** (Intlayer'ın 3,9 KB'ının 6 katı), her sayfa **diğer sayfaların dizelerinin %90'ını** taşıyor ve izole derlenen bir bileşen, global mesaj ağacına bağlı olduğu için **196 KB** sürüklüyor. `@intlayer/vue-i18n` adaptörü `vue-i18n` API'sini koruyor ve sayfa başına **47,0 KB** ölçtü.
+
+## Kısaca
+
+- **vue-i18n** - Vue 2 / Vue 3 için fiili i18n kütüphanesi ve `@nuxtjs/i18n`'in çekirdeği. ICU tarzı mesajlar, SFC `<i18n>` blokları, `v-t` direktifi, `d()` / `n()` biçimlendiricileri, geniş ekosistem. Mesajlar `createI18n()` sırasında global bir örneğe kaydedilir; locale başına lazy loading manuel bir `setLocaleMessage()` desenidir ve rota başına bölme sizin inşa etmeniz gereken bir şeydir.
+- **Intlayer** - Bileşen merkezli içerik modeli. `.content.ts` sözlükleri hizmet ettikleri bileşenin yanında durur, derleme zamanı derleyicisi (`vite-intlayer`) bunları bileşen ve locale başına tree-shake eder ve lazy load eder, içeriğinizden katı TypeScript tipleri üretilir ve eksik çeviriler derleme zamanında hata verir. Router / SEO yardımcıları, Görsel Düzenleyici / CMS ve yapay zeka destekli çeviri ile gelir.
+
+| Kütüphane             | GitHub Yıldızları                                                                                                                                                              | Toplam Commit                                                                                                                                                                      | Son Commit                                                                                                                                          | İlk Sürüm  | NPM Sürümü                                                                                                  | NPM İndirmeleri                                                                                                        |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `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) | Nisan 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)       | Ara 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) |
+
+> Rozetler otomatik olarak güncellenir. Anlık görüntüler zamanla değişecektir.
+
+## Yan yana özellik karşılaştırması
+
+| Özellik                                               | `vue-intlayer` (Intlayer)                                       | `vue-i18n`                                                                       |
+| ----------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| **Bileşenlere yakın çeviriler**                       | ✅ Evet, `.content.ts` her bileşenle aynı yerde                 | ✅ SFC `<i18n>` blokları ile (isteğe bağlı); global kataloglar yaygın kurulumdur |
+| **TypeScript entegrasyonu**                           | ✅ İçerikten otomatik üretilen katı tipler                      | ✅ İyi tipler; katı anahtar güvenliği şema tipleme ve disiplin gerektirir        |
+| **Eksik çeviri tespiti**                              | ✅ TypeScript hatası + derleme zamanı hata/uyarısı              | ⚠️ Runtime fallback + konsol uyarısı                                             |
+| **Zengin içerik (bileşenler / Markdown)**             | ✅ Doğrudan destek                                              | ⚠️ `<i18n-t>` bileşen interpolasyonu; Markdown harici eklentilerle               |
+| **ICU desteği**                                       | ⚠️ Devam ediyor                                                 | ✅ Evet                                                                          |
+| **Biçimlendirme (tarih, sayı, para birimi)**          | ✅ Intl tabanlı biçimlendiriciler                               | ✅ `datetimeFormats` / `numberFormats` ile `d()` / `n()`                         |
+| **Yerelleştirilmiş yönlendirme**                      | ✅ Vue Router / Nuxt için yardımcılar, `getMultilingualUrls`    | ⚠️ Çekirdekte değil (`@nuxtjs/i18n` veya özel router kurulumu)                   |
+| **SEO yardımcıları (hreflang, sitemap, robots)**      | ✅ Yerleşik yardımcılar                                         | ❌ Çekirdekte değil                                                              |
+| **Tree-shaking (yalnızca kullanılan içeriği gönder)** | ✅ Bileşen başına, locale başına, derleyici tarafından otomatik | ⚠️ Manuel: katalogları böl, rota başına `setLocaleMessage()`                     |
+| **Lazy loading**                                      | ✅ `importMode: 'dynamic'` (tek satır yapılandırma)             | ✅ Manuel `import()` + `setLocaleMessage()`                                      |
+| **Kullanılmayan içeriği temizleme**                   | ✅ Ölü sözlükler derleme zamanında atılır                       | ❌ Yerleşik değil                                                                |
+| **Eksik çevirileri test etme (CLI / CI)**             | ✅ `npx intlayer content test`                                  | ⚠️ Üçüncü taraf (`vue-i18n-extract`)                                             |
+| **Yapay zeka destekli çeviri**                        | ✅ Yerleşik, kendi sağlayıcı anahtarlarınızı kullanır           | ❌ Hayır                                                                         |
+| **Görsel Düzenleyici / CMS**                          | ✅ Ücretsiz Görsel Düzenleyici + isteğe bağlı CMS               | ❌ Hayır (harici yerelleştirme platformları)                                     |
+| **MCP sunucusu ve Agent Skills**                      | ✅ Evet                                                         | ❌ Hayır                                                                         |
+| **Ekosistem / topluluk**                              | ⚠️ Daha küçük ama hızla büyüyor                                 | ✅ Vue ekosisteminde büyük ve olgun                                              |
+
+## Benchmark
+
+### Ne ölçüldü
+
+[Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) paketi, her kütüphaneyle **aynı Vite + Vue 3 uygulamasını** derler: **10 sayfa** (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), **10 locale** (`en`, `fr`, `es`, `de`, `it`, `pt`, `zh`, `ja`, `ko`, `ru`), aynı bileşenler ve aynı içerik. Sayfalar `en` ve `fr` dillerinde ölçülür.
+
+Her iki kütüphane de çoğu Vue projesinin yayınladığı **static** yapılandırmada test edildi: `vue-i18n` için her locale'in JSON'u içe aktarılıp `createI18n({ messages })`'a geçirildi; Intlayer için varsayılan `importMode: 'static'`. Bu modda Intlayer da tüm locale'leri paketler, ancak derleyici içeriği yine de **bileşen başına** kapsamlandırır, dolayısıyla bir sayfa yalnızca render ettiği bileşenlerin sözlüklerini taşır.
+
+Her derleme için paket şunları kaydeder:
+
+- **Lib size**: Yalnızca i18n kütüphanesini içe aktaran boş bir bileşenin gzip boyutu. Runtime'ın sabit maliyeti.
+- **Page JS**: Sayfa başına indirilen gzip JavaScript, tüm sayfalar ve locale'ler üzerinden ortalaması alınmış.
+- **Locale leak %**: İndirilen JS'de bulunan çevrilmiş dizelerden, kullanıcının görüntüle**me**diği bir locale'e ait olanların payı (`en` ve `fr` üzerinde parmak izi alındığından %50, "diğer ölçülen locale tamamen mevcut" anlamına gelir; 10 locale paketlendiğinde gerçek israf daha yüksektir).
+- **Page leak %**: İndirilen JS'de bulunan çevrilmiş dizelerden, kullanıcının **bulunmadığı** bir sayfaya ait olanların payı.
+- **Component avg**: İzole derlenen her bileşenin ortalama gzip boyutu. Tek bir bileşenin ne kadar i18n runtime'ı ve katalog sürüklediğini gösterir.
+- **E2E reactivity**: Yeni bir locale seçilmesi ile DOM'da `html[lang]`'in güncellenmesi arasındaki gerçek süre (Playwright, 5 yineleme).
+- **Page load**: `PerformanceNavigationTiming.duration`.
+
+> Aşağıdaki rakamlar `vue-i18n` 11.4.0 ve `intlayer` 9.5.0 / 9.5.1 ile **2026-09-12** tarihli çalıştırmadan gelmektedir. Test uygulaması kasıtlı olarak küçüktür (locale başına birkaç düzine dize), bu nedenle sızıntı yüzdeleri bir **desen** tanımlar: içeriğinizle birlikte büyürler, runtime maliyeti ise sabit kalır.
+
+### Vite + Vue 3 üzerindeki sonuçlar
+
+| Kütüphane                     | Strateji | Lib size (gz) | Lib size (min) | Page JS ort. (gz) | Locale leak | Page leak | Component ort. (gz) | E2E reaktivite | Page load |
+| ----------------------------- | -------- | ------------: | -------------: | ----------------: | ----------: | --------: | ------------------: | -------------: | --------: |
+| **base** (i18n yok)           | -        |        0,0 KB |         0,0 KB |           41,3 KB |        %0,0 |         - |              1,1 KB |         1,8 ms |   10,8 ms |
+| `vue-i18n`                    | static   |       24,3 KB |        83,2 KB |          134,9 KB |       %50,0 |     %90,0 |            196,0 KB |         2,8 ms |   13,6 ms |
+| **`vue-intlayer`**            | static   |    **3,9 KB** |    **11,1 KB** |       **57,1 KB** |       %56,8 |  **%0,0** |          **7,7 KB** |     **4,5 ms** |   13,8 ms |
+| `@intlayer/vue-i18n` (compat) | static   |        7,9 KB |        23,2 KB |           47,0 KB |       %15,0 |      %0,0 |              8,4 KB |         1,5 ms |    9,3 ms |
+
+> Temel uygulamanın page-leak sütunu boş bırakılmıştır: i18n kütüphanesi olmadan parmak izi, paylaşılan chunk'lardaki sabit kodlanmış dizeleri yakalar ve sayı anlamlı değildir.
+
+**Nasıl okunmalı**
+
+- **Runtime maliyeti.** `vue-i18n`, tüm benchmark'taki en ağır runtime'lardan biri: yalnızca onu içe aktaran boş bir bileşen için **24,3 KB gzip / 83,2 KB minified**. `vue-intlayer` 3,9 KB gzip'e mal oluyor. Bu fark, kaç dizeniz olursa olsun her sayfada ödeniyor.
+- **Sayfa başına JavaScript.** i18n'siz uygulama 41,3 KB. `vue-i18n` bunu üç katından fazlasına, **134,9 KB**'a çıkarıyor; Intlayer **57,1 KB**'da kalıyor, +15,8 KB, bunun çoğu paketlenen on locale (bir sonraki noktaya bakın).
+- **Sızıntı.** `createI18n({ messages: { en, fr, ... } })` ile her sayfa tüm locale'leri ve tüm sayfaların dizelerini gönderir: **%50 locale sızıntısı** (parmak izi alınan iki locale'de) ve **%90 sayfa sızıntısı**. Intlayer'ın `static` modu da tüm locale'leri paketler (dolayısıyla karşılaştırılabilir locale sızıntısı rakamı) ama **%0 sayfa sızıntısına** sahiptir: bir sayfa yalnızca render ettiği bileşenlerin sözlüklerini çeker. `importMode: 'dynamic'`'e geçmek locale sızıntısını da ortadan kaldırır; bu yapılandırma bu Vue çalıştırmasının parçası değildi.
+- **Bileşen boyutu mimarinin kendini gösterdiği yer.** `useI18n()` çağıran bir bileşen ortalama **196 KB**'a derlenir, çünkü `t()` her locale'in her mesajını tutan global örneğe bağlıdır. Aynı bileşen `useIntlayer()` ile **7,7 KB**'a derlenir: yalnızca kendi sözlüğüne ulaşır.
+- **Reaktivite** her ikisi için de sorun değil (2-5 ms). Mesajlar bellekte olduğunda Vue'nun reaktivite sistemi locale değiştirmeyi ucuz hale getirir.
+- **`@intlayer/vue-i18n`**, drop-in adaptör, `vue-i18n` API'sini korur ve uygulama koduna dokunulmadan **sayfa başına 47,0 KB** ve **bileşen başına 8,4 KB** ölçtü.
+
+> Referans olarak, aynı çalıştırma `fluent-vue`'yu sayfa başına 171,8 KB, 29,7 KB runtime ve bileşen başına 217 KB olarak ölçtü.
+
+## Fark neden? Global örnek vs derlenmiş sözlükler
+
+`vue-i18n` bir runtime'dır. `createI18n()`, locale başına bir mesaj ağacı tutan global bir örnek oluşturur; `useI18n()` her bileşeni ona bağlar; `t("footer.github")` anahtarı render zamanında arar. SFC `<i18n>` bloklarını, `v-t`'yi ve runtime mesaj yüklemeyi mümkün kılan şey budur ve her bileşenin bağımlılık grafiğinin tüm ağacı içermesinin nedeni de budur:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── ...                        # locale başına bir dosya, tüm sayfalar içinde
+└── src
+    ├── i18n.ts                    # createI18n({ messages: { en, fr, ... } })
+    ├── main.ts
+    └── components
+        └── Footer.vue             # const { t } = useI18n(); t("footer.github")
+```
+
+Optimize etmek, `en.json`'u rota başına dosyalara **sizin** bölmeniz, bir router guard'ında `setLocaleMessage()`'ı **sizin** çağırmanız ve bileşenler taşındıkça rota-dosya eşlemesini **sizin** doğru tutmanız anlamına gelir. Runtime bunu sizin için yapamaz çünkü bir bileşenin hangi anahtarları isteyeceği hakkında hiçbir fikri yoktur.
+
+Intlayer bu bilgiyi derlemeye taşır. İçerik bileşenin yanında bildirilir ve `vite-intlayer` hangi bileşenin hangi sözlüğü içe aktardığını çözer:
+
+```bash
+.
+├── intlayer.config.ts
+└── src
+    ├── main.ts                    # createApp(App).use(intlayer)
+    └── components
+        └── Footer
+            ├── Footer.vue         # useIntlayer("footer")
+            └── Footer.content.ts
+```
+
+Derleyici, sözlük ve locale başına, o bileşenin ihtiyaç duyduğu JSON'u tam olarak üretir ve hiçbir şeyin içe aktarmadığı sözlükleri atar. Rota başına kapsamlandırma, bileşen başına kapsamlandırmanın bir sonucudur, bir görev değil.
+
+> Kullanılmayan locale'leri de atmak için `intlayer.config.ts` içinde `dictionary.importMode: 'dynamic'` ayarlayın. [Bundle optimizasyonu dokümanına](https://intlayer.org/doc/concept/bundle-optimization) bakın.
+
+## Geliştirici deneyimi
+
+### Kurulum
+
+**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");
+```
+
+### Bileşen
+
+**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')`, mesaj şemasını kendiniz tipleyene kadar bir string'dir; bir yazım hatası anahtarı render eder.
+
+**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` ve `increment` tiplidir; bir yazım hatası TypeScript hatasıdır, eksik bir Fransızca değer derleme hatasıdır.
+
+### Locale başına lazy loading
+
+**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;
+};
+```
+
+Ardından bir router guard'ından `loadLocaleMessages()` çağırın ve sayfa başına kapsamlandırma istiyorsanız `locales/{locale}.json`'u rota başına kendiniz bölün.
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+const config: IntlayerConfig = {
+  // ...
+  dictionary: {
+    importMode: "dynamic",
+  },
+};
+```
+
+## vue-i18n API'sini koruyun, Intlayer'ın çıktısını alın
+
+`@intlayer/vue-i18n` bir drop-in adaptördür: `useI18n()`, `t()`, `d()`, `n()`, `{name}` ve `{0}` interpolasyonu, pipe çoğullar (`"car | cars"`), `v-t` ve `i18n.global.locale` çalışmaya devam eder, `vite-intlayer` tarafından derlenen Intlayer sözlüklerinden sunulur.
+
+```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()],
+});
+```
+
+Benchmark'ta aynı uygulamanın compat derlemesi, bileşenlere dokunulmadan sayfa başına **134,9 KB'dan 47,0 KB'a** ve bileşen başına **196 KB'dan 8,4 KB'a** düştü. Mevcut `locales/{locale}.json` dosyalarınız JSON senkronizasyon eklentisi aracılığıyla doğruluk kaynağı olarak kalabilir.
+
+[vue-i18n geçiş rehberine](https://intlayer.org/doc/migration/vue-i18n) ve [uyumluluk dokümanına](https://intlayer.org/doc/compatibility/vue-i18n) bakın. Nuxt kullanıcıları [`@nuxtjs/i18n` uyumluluğu](https://intlayer.org/doc/compatibility/nuxtjs-i18n) üzerinden aynı yola sahiptir.
+
+## Hangisini ne zaman seçmeli?
+
+- **vue-i18n'i seçin**: standart Vue yaklaşımını istiyorsanız, ICU mesajlarına veya SFC `<i18n>` bloklarına güveniyorsanız, zaten `@nuxtjs/i18n` kullanıyorsanız veya bir çeviri platformu merkezi JSON bekliyorsa. Bundle boyutu önemliyse katalogları bölmek ve rota başına lazy load yapmak için zaman ayırın.
+- **Intlayer'ı seçin**: **bileşen kapsamlı içerik**, **katı TypeScript**, **derleme zamanı eksik anahtar hataları**, **sıfır çabayla tree-shaking ve lazy loading** ve yerleşik editoryal araçlar (Görsel Düzenleyici, CMS, yapay zeka çevirisi, MCP sunucusu) istiyorsanız. Özellikle büyük, modüler Vue / Nuxt kod tabanları ve tasarım sistemleri için önemlidir.
+- **`@intlayer/vue-i18n`'i seçin**: zaten `vue-i18n` üzerindeyseniz ve yeniden yazma olmadan bundle kazanımlarını istiyorsanız.
+
+## İlgili karşılaştırmalar
+
+- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (aynı benchmark)
+- [i18next vs Intlayer](https://intlayer.org/blog/i18next-vs-intlayer) (aynı benchmark)
+- [Lingui vs Intlayer](https://intlayer.org/blog/lingui-vs-intlayer) (aynı benchmark)
+- [vue-i18n vs Intlayer (özellikler ve DX)](https://intlayer.org/blog/vue-i18n-vs-intlayer)
+- [vue-i18n eskidi mi?](https://intlayer.org/blog/is-vue-i18n-outdated)
+
+## GitHub Yıldızları
+
+GitHub yıldızları, bir projenin popülerliğinin, topluluk güveninin ve uzun vadeli öneminin güçlü bir göstergesidir. Teknik kalitenin doğrudan bir ölçüsü olmasa da, kaç geliştiricinin projeyi yararlı bulduğunu, ilerlemesini takip ettiğini ve benimseme olasılığını yansıtır.
+
+[![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)
+
+## Sonuç
+
+`vue-i18n` olgun, esnek ve Vue ile derinden entegre. Benchmark, runtime öncelikli tasarımının bir Vite derlemesinde neye mal olduğunu gösteriyor: **24 KB gzip runtime**, i18n'siz 41 KB olan bir uygulama için **sayfa başına 134,9 KB**, her sayfada **%90 diğer sayfa içeriği** ve global mesaj ağacına bağlı oldukları için her biri **196 KB**'a ulaşan bileşenler.
+
+Intlayer işi derleyiciye taşır. Bileşen başına sözlükler ve ölü içerik temizleme, birer derleme çıktısıdır, kural değil. Aynı uygulamada: **3,9 KB runtime**, **sayfa başına 57,1 KB**, **%0 sayfa sızıntısı**, **25 kat daha küçük** bileşenler. Ve yeniden yazma masada değilse, `@intlayer/vue-i18n` bileşenlere dokunmadan yolun büyük kısmını alır.
+
+Tüm ham veriler, test uygulamaları ve script'ler [Benchmark Bloom deposunda](https://github.com/intlayer-org/benchmark-bloom). Kendiniz çalıştırın.
+
+Daha fazla ayrıntı için ['Neden Intlayer?' dokümanına](https://intlayer.org/doc/why) bakın.

package/blog/uk/i18next_vs_intlayer-i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next проти @intlayer/i18next: Однаковий API, інший bundle"
 description: "Що змінюється, коли додаток React або Next.js зберігає виклики i18next, react-i18next та next-i18next, але обслуговує їх через адаптери @intlayer/i18next. JavaScript на сторінку, розмір компонентів, витоки рядків та гідратація, виміряні на одному коді, а також те, що адаптери зберігають, ігнорують і не можуть замінити."
 keywords:
@@ -28,6 +28,8 @@ author: aymericzip
 
 # i18next проти @intlayer/i18next | Однаковий API, інший bundle
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/i18next`, `@intlayer/react-i18next` та `@intlayer/next-i18next` - це адаптери сумісності. Вони надають API `i18next`, який ваш код уже використовує (`useTranslation`, `t()`, `<Trans>`, `i18n.changeLanguage()`, `getFixedT`, `serverSideTranslations`...) і постачають його зі словників, скомпільованих Intlayer. Компоненти не змінюються. Змінюється середовище виконання (runtime) під ними.
 
 У цій статті вимірюється така заміна на одному й тому ж додатку Next.js, зібраному один раз із `next-i18next` і один раз із `@intlayer/next-i18next`. Показники отримані з [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Для порівняння `i18next` та Intlayer як бібліотек прочитайте [i18next проти Intlayer](https://intlayer.org/uk/blog/i18next-vs-intlayer). Ця стаття присвячена тому, що саме змінює адаптер, якщо ви зберігаєте свій код без змін.
@@ -109,6 +111,10 @@ const About = () => {
 
 ### Результати на Next.js
 
+Виберіть метрики та бібліотеки, які вас цікавлять:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Конфігурація                 | Стратегія      | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |   Hydration |
 | ---------------------------- | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ----------: |
 | **base** (без i18n)          | -              |        0.0 KB |         141.0 KB |        0.0% |      0.0% |             0.9 KB |        13.4 ms |     11.8 ms |
@@ -129,10 +135,21 @@ const About = () => {
 - **Гідратація та перемикання відбуваються швидше.** Гідратація скорочується з 15.6 ms до **11.3 ms** (та з 27.7 ms у конфігурації `dynamic`, де запит до бекенда перебуває на критичному шляху). Перемикання локалі прискорюється з 15-16 ms до **11-12 ms**.
 - **Адаптер - це не нативний runtime.** `next-intlayer` займає **141.3 KB**, лише +0.3 KB над базовим додатком. Адаптер несе поверхню API `i18next` (діалект інтерполяції, суфікси множини та контексту, парсинг тегів `<Trans>`) поверх ядра Intlayer: 9.4 KB та +9.4 KB на сторінку проти нативного варіанту. Це міст для переходу, а не кінцева точка.
 
+<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;"
+/>
+
+> Повна таблиця, кожна бібліотека та кожна стратегія, у [звіті про бенчмарк Next.js](https://intlayer.org/uk/doc/benchmark/nextjs).
+
 > Адаптер `react-i18next` на Vite / TanStack Start не брав участі у цьому тестуванні. Базові показники `react-i18next` на TanStack Start наведено у статті [i18next проти Intlayer](https://intlayer.org/uk/blog/i18next-vs-intlayer): 127-184 KB на сторінку та перемикання локалі за 123-185 ms за наявності лінивого бекенда.
 
 ## Чому змінюються цифри
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 У каталозі `components/` нічого не змінилося, тож оптимізація пов'язана з тим, до чого саме прив'язаний `useTranslation`.
 
 **З `i18next`** прив'язка здійснюється до глобального екземпляра. Усе, що було в нього завантажено (усі локалі в `static`, увесь простір імен активної локалі в `dynamic`), доступне кожному компоненту, що викликає `useTranslation()`. Бандлер не може розбити бандл нижче за вміст екземпляра, а runtime не може знати наперед, які ключі знадобляться компоненту.
@@ -149,6 +166,10 @@ const About = () => {
     └── About.tsx                     # useTranslation(); t("about.title")
 ```
 
+Все, що містить екземпляр, надсилається на кожну сторінку, і витрати зростають за двома осями, сторінки та локалі:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **З `@intlayer/next-i18next`** прив'язка здійснюється до словника. `syncJSON` перетворює кожен файл простору імен на словник; оптимізаційний етап передає компоненту саме той словник, який йому потрібен, у вигляді імпорту, що бандлер може відстежити й розділити за сторінками та локалями.
 
 ```bash
@@ -297,26 +318,112 @@ export default defineConfig({
 
 ## Обмеження, які слід врахувати перед початком
 
-- **Бекенди й детектори залишаються неактивними.** `i18n.use(HttpBackend)` викликає метод `init` плагіна і нічого більше. Якщо ваш додаток залежав від завантаження перекладів із CMS у runtime, цей процес більше не працюватиме; використовуйте CMS Intlayer або команди `intlayer pull` / `push`.
-- **`resources` ігнорується, а не об'єднується.** На відміну від деяких інших адаптерів, `@intlayer/i18next` не використовує інлайнові `resources` як резервний варіант (fallback). Кожен ключ має бути присутнім у синхронізованих словниках, що перевіряється командою `intlayer test`.
-- **App Router вимагає редагування провайдера.** Лише один файл, показаний вище. Для Pages Router з `appWithTranslation` жодних змін не потрібно.
-- **`next-i18next.config.js` не зчитується.** Налаштування на кшталт `localePath`, `fallbackLng`, `reloadOnPrerender` не мають еквівалента; локалі та поведінка за замовчуванням визначаються в `intlayer.config.ts`.
-- **Адаптер має власну вагу.** Він додає 9.4 KB runtime та +9.4 KB на сторінку порівняно з `next-intlayer`. Коли всі компоненти перейдуть на `useIntlayer`, цей адаптер можна сміливо видалити.
+<AccordionGroup>
+<Accordion header="Бекенди та детектори неактивні">
+
+`i18n.use(HttpBackend)` викликає init плагіна і більше нічого. Якщо ваш додаток покладався на отримання перекладів з CMS під час виконання, цей процес більше не працює; використовуйте [Intlayer CMS](https://intlayer.org/uk/doc/concept/cms) або команди `intlayer pull` / `push`. Визначення локалі стає конфігурацією маршрутизації Intlayer (префікс URL, cookie, заголовок).
+
+</Accordion>
+<Accordion header="resources ігнорується, а не об'єднується">
+
+На відміну від деяких інших адаптерів, `@intlayer/i18next` не використовує вбудовані `resources` як резервний варіант. Кожен ключ повинен існувати в синхронізованих словниках, що перевіряє `intlayer test`.
+
+</Accordion>
+<Accordion header="App Router вимагає редагування провайдера">
+
+Один файл, показаний вище. Pages Router з `appWithTranslation` не вимагає жодних змін.
+
+</Accordion>
+<Accordion header="next-i18next.config.js не читається">
+
+`localePath`, `fallbackLng`, `reloadOnPrerender` та аналоги не мають еквівалентів; локалі та резервні варіанти надходять з `intlayer.config.ts`.
+
+</Accordion>
+<Accordion header="Адаптер не безкоштовний">
+
+9.4 КБ рантайму та +9.4 КБ на сторінку порівняно з `next-intlayer`. Як тільки кожен компонент перейде на `useIntlayer`, видаліть його.
+
+</Accordion>
+</AccordionGroup>
 
 ## Коли що використовувати?
 
-- **Залишайтеся на `i18next`**, якщо ваш додаток критично залежить від бекендів часу виконання (переклади віддаються CMS у момент запиту), екосистеми плагінів або платформи, яка не підтримується адаптерами (не React).
-- **Використовуйте `@intlayer/*`**, якщо ви працюєте з `react-i18next` / `next-i18next` і хочете отримати економію 68 KB, у 8 разів менші компоненти, 0% витоку, типізовані ключі та перевірки в CI без переписування коду. Це оптимальний вхідний квиток для наявної кодової бази `i18next`.
-- **Переходьте на нативний варіант (`next-intlayer` / `react-intlayer`)** для нових проєктів або після того, як адаптер виконав своє завдання. Це найлегший із трьох варіантів (5.5 KB, +0.3 KB на сторінку), що підтримує синхронні серверні компоненти та файли `.content.ts` для окремих компонентів.
+<AccordionGroup>
+<Accordion header="Залишитися на i18next">
+
+Ваш додаток залежить від бекендів часу виконання (переклади, що надаються CMS під час запиту), від екосистеми плагінів або від платформи без React, яку адаптери не підтримують.
+
+</Accordion>
+<Accordion header="Використовувати @intlayer/*">
+
+Ви використовуєте `react-i18next` / `next-i18next` і хочете отримати 68 КБ економії, у 8 разів менші компоненти, 0% витоків, типізовані ключі та перевірки CI без переписування коду. Це відправна точка для існуючої кодової бази `i18next`.
+
+</Accordion>
+<Accordion header="Перейти на нативний (next-intlayer / react-intlayer)">
+
+Для нових проєктів або коли адаптер виконав своє завдання. Він має найлегший рантайм (5.5 КБ, +0.3 КБ на сторінку) і відкриває доступ до синхронних Server Components та файлів `.content.ts` для кожного компонента. Почніть з [Intlayer з Next.js](https://intlayer.org/uk/doc/environment/nextjs) або [з Vite та React](https://intlayer.org/uk/doc/environment/vite-and-react).
+
+</Accordion>
+</AccordionGroup>
+
+## Часті запитання
+
+<FAQ>
+
+<Question title="Звідки беруться 68 КБ?">
+
+З `resources: { en, fr, ... }`. Стандартне налаштування `next-i18next` імпортує JSON кожної локалі в `init()`, тому кожна сторінка містить кожен простір імен на кожній мові: **218.5 КБ** на сторінку. Адаптер ніколи не включає цей блок повністю; він передає кожному компоненту лише названий словник на активній мові.
+
+</Question>
+
+<Question title="Чи продовжують працювати мої компоненти <Trans>?">
+
+Так, з `components`, нумерованими тегами `<1>...</1>` та `values`. Також підтримуються `{{interpolation}}`, вкладеність `$t(key)`, форми множини `key_one` / `key_other` (обчислювані за допомогою `Intl.PluralRules`), суфікси контексту та `returnObjects`.
+
+</Question>
+
+<Question title="Що робити, якщо я використовую один translation.json для кожної локалі?">
+
+Встановіть `splitKeys: false` у плагіні `syncJSON`. Весь файл залишається одним словником, і звичайний виклик `useTranslation()` продовжує розпізнаватися відносно нього.
+
+</Question>
+
+<Question title="Це те саме, що й міграція на Intlayer?">
+
+Ні, це міст. Адаптер зберігає API `i18next` і потребує 9.4 КБ рантайму; нативний `next-intlayer` коштує 5.5 КБ і додає синхронні Server Components та файли `.content.ts` поруч із компонентами. Ви можете мігрувати покомпонентно, оскільки словники JSON та `.content.ts` співіснують.
+
+</Question>
+
+<Question title="Чи можуть перекладачі продовжувати працювати так, як вони звикли?">
+
+Так. `locales/{lng}/{ns}.json` залишається джерелом правди: `syncJSON` зчитує його з діалектом i18next і записує переклади назад при оновленні через CLI або CMS.
+
+</Question>
+
+</FAQ>
 
 ## Схожі порівняння
 
-- [i18next проти Intlayer](https://intlayer.org/uk/blog/i18next-vs-intlayer) (порівняння бібліотек, той самий бенчмарк)
-- [next-intl проти @intlayer/next-intl](https://intlayer.org/uk/blog/next-intl-vs-intlayer-next-intl) (та сама серія адаптерів)
-- [Lingui проти @intlayer/lingui](https://intlayer.org/uk/blog/lingui-vs-intlayer-lingui) (та сама серія адаптерів)
-- [vue-i18n проти @intlayer/vue-i18n](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer-vue-i18n) (та сама серія адаптерів)
-- Посібники з міграції: [i18next](https://intlayer.org/uk/doc/migration/i18next), [react-i18next](https://intlayer.org/uk/doc/migration/react-i18next), [next-i18next](https://intlayer.org/uk/doc/migration/next-i18next)
-- Довідка з адаптерів сумісності: [i18next](https://intlayer.org/uk/doc/compatibility/i18next), [react-i18next](https://intlayer.org/uk/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/uk/doc/compatibility/next-i18next)
+Та ж серія адаптерів:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/uk/blog/next-intl-vs-intlayer-next-intl)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/uk/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+Пряме порівняння бібліотек:
+
+- [i18next vs Intlayer](https://intlayer.org/uk/blog/i18next-vs-intlayer), same benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/uk/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/uk/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Is i18next outdated?](https://intlayer.org/uk/blog/is-i18next-outdated)
+
+Довідкова документація:
+
+- Compat adapters: [i18next](https://intlayer.org/uk/doc/compatibility/i18next), [react-i18next](https://intlayer.org/uk/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/uk/doc/compatibility/next-i18next)
+- Migration guides: [i18next](https://intlayer.org/uk/doc/migration/i18next), [react-i18next](https://intlayer.org/uk/doc/migration/react-i18next), [next-i18next](https://intlayer.org/uk/doc/migration/next-i18next)
+- [Next.js benchmark report](https://intlayer.org/uk/doc/benchmark/nextjs) and [TanStack Start benchmark report](https://intlayer.org/uk/doc/benchmark/tanstack)
+- [Bundle optimization](https://intlayer.org/uk/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/uk/doc/compiler)
+- [Visual Editor](https://intlayer.org/uk/doc/concept/editor), [CMS](https://intlayer.org/uk/doc/concept/cms) and [AI translation](https://intlayer.org/uk/doc/concept/auto-fill)
 
 ## Висновок