vue-i18n VS Intlayer

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. 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'dan geliyor.

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.

Tüm tablo içeriğini göster

Tüm tablo içeriğini göster

Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

Kütüphane	GitHub Yıldızları	Toplam Commit	Son Commit	İlk Sürüm	NPM Sürümü	NPM İndirmeleri
aymericzip/intlayer				Nisan 2024
intlify/vue-i18n				Ara 2016

Rozetler otomatik olarak güncellenir. Anlık görüntüler zamanla değişecektir.

Yan yana özellik karşılaştırması

Benchmark

Ne ölçüldü

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ülemediğ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

İlgilendiğiniz metrikleri ve kütüphaneleri seçin:

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ü.

Tüm kütüphaneleri ve tüm stratejileri içeren tam tablo, Vue benchmark raporunda.

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:

.
├── 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:

.
├── 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 bakın.

Geliştirici deneyimi

Kurulum

vue-i18n

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 },
});

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

import { type IntlayerConfig, Locales } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [intlayer(), vue()],
});

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

{
  "counter": {
    "label": "Counter",
    "increment": "Increment"
  }
}

<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

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;

<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

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

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.

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 ve uyumluluk dokümanına bakın. Nuxt kullanıcıları @nuxtjs/i18n uyumluluğu ü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.

SSS

İlgili karşılaştırmalar

Referans dokümanlar:

Benchmark raporları:

Bu kütüphanelerin nereden geldiğini anlamak için JavaScript i18n tarihini okuyun.

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.

Commit etkinliği

Yıldızlar popülerliği gösterir. Commit sayısı ise bir projeye ne kadar emek verildiğini gösterir. Bu yazı yazıldığında Intlayer yaklaşık 7.500 commit içeriyor; bu, burada karşılaştırılan kütüphanelerin çoğundan fazla ve next-intl ya da next-i18next kütüphanesinin yaklaşık 5 katı.

Intlayer bir monorepo olduğundan bu sayı her framework paketini, CLI'yi ve dokümantasyonu kapsar. Commit sayısını kalitenin değil, etkinliğin bir göstergesi olarak okuyun.

npm indirmeleri

İndirme sayıları en iyi çözümleri değil, en eski çözümleri ödüllendirir. Yıllar önce yayımlanmış bir kütüphane, onu o zaman seçen her proje, her CI çalışması ve ona bağımlı her paket tarafından hâlâ kurulur. Bu sayı yeni bir tercihten çok ataleti ölçer.

Yapay zekâ asistanları bu etkiyi büyütür. next-intl, i18next ve vue-i18n eğitildikleri kodun her yerinde bulunduğu için, alternatifleri karşılaştırmadan bunları varsayılan olarak önerirler. Her öneri indirme sayısını artırır, bu da bir sonraki öneriyi besler. İndirme sayısına değil, benchmark sonuçlarına göre karşılaştırın.

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. Kendiniz çalıştırın.

Daha fazla ayrıntı için 'Neden Intlayer?' dokümanına bakın.