vue-i18n VS @intlayer/vue-i18n: Aynı API, Farklı Bundle

@intlayer/vue-i18n, bir uyumluluk adaptörüdür: vue-i18n API'sini (createI18n, useI18n, t(), d(), n(), $t, v-t, i18n.global.locale...) ortaya çıkarır ve bunu Intlayer tarafından derlenmiş sözlüklerden sunar. .vue dosyalarınız değişmez. t("footer.github")'nin bağlı olduğu şey değişir.

Bu makale, aynı Vite + Vue 3 uygulamasında bu değişimi ölçer; bir kez vue-i18n ile ve bir kez adapter ile oluşturulmuştur. Sayılar Benchmark Bloom kaynağından gelmektedir. vue-i18n ve Intlayer'ı kütüphaneler olarak karşılaştırmak için vue-i18n vs Intlayer ve vue-i18n vs Intlayer benchmark makalesini okuyun. Bu makale, bileşenlerinizi olduğu gibi tuttuğunuzda adapterın ne değiştirdiği hakkındadır.

tl;dr: Aynı Vite + Vue 3 uygulamasında, vue-i18n yerine @intlayer/vue-i18n kullanmak sayfa başına JavaScript'i gzip olarak 134.9 KB'den 47.0 KB'ye düşürdü (i18n olmadan uygulama 41.3 KB ağırlığında), runtime'ı 24.3 KB'den 7.9 KB'ye, ortalama component'i 196 KB'den 8.4 KB'ye ve yabancı sayfa string sızıntısını %90'dan %0'a indirdi, hiçbir .vue dosyası düzenlenmedi. createI18n({ messages }) fallback olarak çalışmaya devam eder; yukarıdaki sayıları elde etmek için JSON imports'ları kaldırın. SFC <i18n> blokları ve runtime setLocaleMessage(), bu özelliklerin aktarılmayan iki özelliğidir.

@intlayer/vue-i18n nedir

vue-i18n bir çalışma zamanıdır. createI18n({ messages: { en, fr, ... } }) her yerel ayarın tüm mesajlarını tutan genel bir örnek oluşturur; useI18n() her bileşeni buna bağlar; t("footer.github") render zamanında ağacı dolaşır. Bu tasarım, SFC <i18n> bloklarını ve setLocaleMessage() mümkün kılan şeydir ve aynı zamanda her bileşenin bağımlılık grafiğinin tüm ağacı içermesinin nedenidir.

@intlayer/vue-i18n API'yi korur ve ağacı değiştirir:

1. İçe aktarma takma adı. @intlayer/vue-i18n/plugin içindeki vueI18nVitePlugin(), vite-intlayer'ı sarmalanır ve vue-i18n'in @intlayer/vue-i18n olarak çözülmesi için bir resolve.alias ekler. Hiçbir içe aktarma yeniden adlandırılmaz.
2. JSON as source of truth. The syncJSON plugin reads your existing locales/{locale}.json with format: "vue-i18n" (so {name}, {0} list interpolation and "car | cars" pipe plurals are parsed correctly) and writes translations back when the CLI or the CMS updates them.
3. Call-site binding. The Intlayer optimize pass rewrites useI18n() call sites so the component receives the dictionaries its keys name, in the active locale, as imports the bundler can trace and split.

<!-- Kodunuz, değiştirilmemiş -->
<script setup lang="ts">
import { useI18n } from "vue-i18n";

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

<template>
  <a href="https://github.com/intlayer-org/benchmark-bloom">{{
    t("footer.github")
  }}</a>
</template>

import _dicHash_footer from "../.intlayer/dictionaries/footer.mjs";
import { useDictionary as useI18n } from "@intlayer/vue-i18n";

const { t } = useI18n(_dicHash_footer);

Bileşen artık global mesaj ağacına ulaşmıyor. Yalnızca footer'a ulaşıyor. Bu nedenle aşağıdaki bileşen boyutu sütunu 196 KB'den 8 KB'ye düşüyor.

Adaptörün ne tuttuğu, ne görmezden geldiği ve ne değiştirmediği

Benchmark

Ölçülen içerik

Benchmark Bloom paketi, aynı Vite + Vue 3 uygulamasını her setup ile 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), özdeş bileşenler ve özdeş içerik. Sayfalar en ve fr dilinde ölçülür.

Her ikisi de static konfigürasyonda derlenmiştir; çoğu Vue projesinin sevk ettiği konfigürasyon: vue-i18n için, her locale'in JSON'u import edilip createI18n({ messages }) öğesine iletilir; adapter için, vite.config.ts ve intlayer.config.ts değiştirilmiş aynı bileşenler ve messages import'u kaldırılmıştır. Referans için native vue-intlayer dahil edilmiştir.

Her derleme için, suite şunları kaydeder:

• Kütüphane boyutu: i18n kütüphanesini yalnızca içe aktaran boş bir bileşenin gzip (ve küçültülmüş) boyutu.
• Sayfa JS: sayfa başına indirilen gzip JavaScript, tüm sayfalar ve locale'ler üzerinde ortalama.
• Locale sızıntısı %: indirilen JS'teki çevrilmiş dizelerin kullanıcının görüntülemediği bir locale'e ait olan yüzdesi.
• Sayfa sızıntısı %: indirilen JS'teki çevrilmiş dizelerin kullanıcının bulunmadığı bir sayfaya ait olan yüzdesi.
• Bileşen ortalaması: izolasyon halinde derlenen her bileşenin ortalama gzip boyutu.
• E2E tepkisellik: yeni bir locale seçimi ile DOM'da html[lang] güncellemesi arasındaki duvar saati zamanı (Playwright, 5 yineleme).
• Sayfa yükleme: PerformanceNavigationTiming.duration.

Aşağıdaki rakamlar 2026-09-12 tarihinde vue-i18n 11.4.0 ve @intlayer/vue-i18n 9.5.1 ile yapılan çalıştırmadan gelmiştir. Test uygulaması kasıtlı olarak küçüktür (locale başına birkaç düzine string), bu nedenle sızıntı yüzdeleri bir pattern açıklar: içeriğiniz büyüdükçe artar, ancak runtime maliyeti sabit kalır.

Vite + Vue 3 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 alma paylaşılan chunk'lardaki sabit kodlanmış stringleri alır ve sayı anlamlı değildir.

Nasıl okunur

• Sayfa başına 88 KB daha az, aynı bileşenler. vue-i18n, 41.3 KB uygulamayı 134.9 KB olarak alır. Aynı bileşenlerin adapter derlemesi 47.0 KB ile sonuçlanır, temel uygulamadan 5.7 KB üstündedir. Farkın çoğu, createI18n({ messages }) tarafından her sayfaya çekilen 74.9 KB src/locales ve adaptörün asla bir blok olarak paketlemediği şeydir.
• Runtime 3 kat küçülüyor. Sadece vue-i18n içe aktaran boş bir component 24.3 KB gzip / 83.2 KB minified maliyetlidir: @intlify/core-base, mesaj derleyicisi ve runtime. Adapter 7.9 KB / 23.2 KB maliyetlidir, çoğunluğu Intlayer'ın core'u artı vue-i18n API surface'idir.
• Componentler: 23 kat daha küçük. İzolasyon halinde derlenen bir useI18n() component ortalaması 196 KB'dir, çünkü t her locale'in her mesajını tutan instance'a bağlıdır. Adapter ile aynı component ortalaması 8.4 KB'dir: kendi sözlüğüne ulaşır.
• Sızıntı. vue-i18n, her yerel ayarı ve her sayfanın dizelerini her sayfada gönderir: %50 yerel ayar sızıntısı (iki parmakli yerel ayarda; on yerel ayar paketlenmiş olsa bile gerçek harcama daha yüksektir), %90 sayfa sızıntısı. Adapter, her bileşen yalnızca kendi sözlüklerini içe aktardığından sayfa sızıntısını %0'a düşürür. Bu static çalıştırmada yerel ayar sızıntısı %15'tedir; importMode: 'dynamic' bunu kaldıran ayardır ve bu yapılandırma bu Vue çalıştırmasının bir parçası değildi.
• Reaktivite ve sayfa yükü. Yerel ayar değiştirme her ikisi için de ucuzdur (1,5-2,8 ms); Vue'nin reaktivite sistemi mesajlar bellekte olduktan sonra bunu sağlar. Sayfa yükü 13,6 ms'den 9,3 ms'ye gider; ayrıştırılacak 88 KB daha az JavaScript ile uyumludur.
• Yerel satırlar hakkında. vue-intlayer bu çalıştırmada static modunda her yerel ayarı paketledi ve 3,9 KB çalışma zamanı ile 57,1 KB'ye ulaştı; adaptörün senkronize edilen sözlükleri daha az yabancı yerel ayar dizesi içeriyordu, bu nedenle sayfa başına daha düşük rakam. Yerel çalışma zamanı üçünün en hafifi olmaya devam ediyor ve .content.ts modeli SFC <i18n> bloklarının eşdeğerini bulduğu yerdir.

Tüm tablo, her kütüphane ve her strateji, Vue kıyaslama raporunda.

Sayılar neden değişiyor

src/components/ içinde hiçbir şey değişmedi, bu nedenle kazançlar useI18n bağlı olduğu şeyden geliyor.

vue-i18n ile, bağlama global örnek olur. createI18n({ messages: { en, fr, ... } }) her şeyi içeren tek bir importtur; useI18n() çağıran her bileşen tümüne erişebilir, bu nedenle bundler örneğin altında bölemez. Optimize etmek, siz en.json dosyasını rota tarafından bölmeniz, bir router guard içinde setLocaleMessage() çağırmanız ve bileşenler hareket ettikçe rota-dosya haritasını doğru tutmanız anlamına gelir. İsraf aynı anda iki eksende büyür, sayfalar ve diller:

.
├── locales
│   ├── en.json                    # her sayfanın stringleri
│   └── fr.json
└── src
    ├── i18n.ts                    # createI18n({ messages: { en, fr, ... } })
    ├── main.ts                    # app.use(i18n)
    └── components
        └── Footer.vue             # useI18n(); t("footer.github")

@intlayer/vue-i18n ile, binding sözlüktür. syncJSON her en.json dosyasının üst düzey anahtarını bir sözlüğe dönüştürür; optimize işlemi komponente adlarını verdiği anahtarları, bundler'ın izlediği ve sayfa başına böldüğü importlar olarak geçirir.

.
├── intlayer.config.ts             # syncJSON({ format: "vue-i18n", source: ... })
├── locales
│   ├── en.json                    # unchanged, still the source of truth
│   └── fr.json
├── .intlayer/                     # generated: one dictionary per top-level key, per locale
└── src
    ├── i18n.ts                    # createI18n({})   ← messages import removed
    ├── main.ts                    # app.use(i18n)    ← unchanged
    └── components
        └── Footer.vue             # useI18n(); t("footer.github")  ← unchanged

i18n.ts dosyasındaki messages import'ı silinecek tek satırdır. Bu 88 KB'dir.

Üç adımda geçiş

1. 1

   Kurulum

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npx intlayer init --interactive
   

   Komut vue-i18n'i algılar, intlayer, vue-intlayer, @intlayer/vue-i18n ve @intlayer/sync-json-plugin'i kurar ve intlayer.config.ts'i önceden doldurur. vue-i18n'i kurulu tutun: bu bir peer bağımlılığıdır ve türleri sağlar.

2. 2

   Intlayer'ı yerel dosyalarınıza yönlendirin

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     dictionary: {
       // "static" her yerel ayarı paketler; "dynamic" aktif olanı talep üzerine yükler
       importMode: "dynamic",
       format: "vue-i18n",
     },
     plugins: [
       syncJSON({
         // vue-i18n lehçesi: {name}, {0}, "car | cars"
         format: "vue-i18n",
         source: ({ locale }) => `./locales/${locale}.json`,
         location: "locales",
       }),
     ],
   };
   
   export default config;
   

   locales/{locale}.json bulunduğu yerde kalır. Her üst düzey anahtar (footer, hero...) bir sözlük haline gelir.

3. 3

   Eklentiyi ekleyin ve mesaj importunu kaldırın

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { vueI18nVitePlugin } from "@intlayer/vue-i18n/plugin";
   
   export default defineConfig({
     plugins: [vue(), vueI18nVitePlugin()],
   });
   

   src/i18n.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { createI18n } from "vue-i18n";
   
   // Önce: createI18n({ locale: "en", messages: { en, fr, es } })
   export const i18n = createI18n({ locale: "en" });
   

   vueI18nVitePlugin() eklentisi vite-intlayer'ı (içerik izleme, sözlük derleme, optimize geçişi) sarmaladığından ve vue-i18n'i adaptöre alias ettiğinden; messages importunu kaldırmak 88 KB'lik tasarrufu sağlar; bunu bırakmak uygulamanın çalışmasını devam ettirse de hem eski hem de yeni versiyonu yükler.

Sonra silebileceğiniz şeyler

Baytların ötesinde neler kazanırsınız

• Yazılı anahtarlar. t("footer.github") derlenmiş footer sözlüğüne karşı yazılıdır; yanlış bir yol, metni anahtar olarak render etmek yerine bir TypeScript hatasıdır.
• npx intlayer test herhangi bir locale'de eksik bir anahtar için CI'yi başarısız kılar. npx intlayer fill eksik olanları kendi sağlayıcı anahtarınızla (OpenAI, Anthropic, Mistral, Gemini...) çevirir ve bunları locales/{locale}.json dosyasına geri yazar.
• Visual Editor ve CMS aynı JSON üzerinde çalışır, bu nedenle geliştirici olmayanlar bir UI aracılığıyla düzenler ve dosyalar güncellenir.
• .content.ts dosyasına kademeli geçiş. Herhangi bir component, bir co-located content dosyası ile useI18n() öğesinden useIntlayer("footer") öğesine geçebilir. JSON ve .content.ts sözlükleri bir arada bulunur ve birleşir.

Başlamadan önce bilmeniz gereken sınırlamalar

Hangisini ne zaman kullanmalı?

SSS

İlgili karşılaştırmalar

Aynı adaptör serisi:

Doğrudan karşılaştırılan kütüphaneler:

Referans belgeler:

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

Sonuç

@intlayer/vue-i18n, useI18n() işlevini değiştirir: her yerel ayarın her mesajını tutan global bir instance'dan, o bileşen için derlenmiş bir sözlüğe. 88 KB daha küçük sayfa başına, 3x daha küçük runtime, 23x daha küçük bileşenler ve %0 sayfa sızıntısı ile aynı Vite + Vue 3 uygulamasında, bir config dosyası, bir plugin satırı ve silinen bir import için. SFC <i18n> blokları ve runtime message yüklenmesi, taşımadığı iki şeydir ve native vue-intlayer runtime'ı boyutunun yarısı kalır.

Tüm ham veriler, test uygulamaları ve scriptler Benchmark Bloom repository içinde bulunmaktadır. Kendiniz çalıştırabilirsiniz.

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