Lingui ve Intlayer Karşılaştırması: React & Next.js Uluslararasılaşma (i18n) Testi

Lingui ve Intlayer, bu karşılaştırmada saf bir çalışma zamanı (runtime) yerine bir derleyiciye (compiler) dayanan iki kütüphanedir. Lingui derleme sırasında makrolardan mesajları çıkarır ve her dil için kataloglar derler. Intlayer ise bileşen başına sözlükler derler ve bunları dil başına tree-shake eder. Kağıt üzerinde birbirine çok yakın görünmelidirler. Ancak sayılar nerede ayrıştıklarını açıkça ortaya koyuyor.

Veriler, her kütüphaneyle aynı uygulamayı oluşturan ve tarayıcının gerçekte ne indirdiğini ve çalıştırdığını kaydeden açık kaynaklı bir test paketi olan Benchmark Bloom projesinden gelmektedir.

Özetle (tl;dr): Lingui, ham sayfa başına JavaScript konusunda Intlayer'a en yakın olanıdır: TanStack Start üzerinde tembel yükleme (lazy loading) yapılandırıldıktan sonra 115-120 KB vs 118.6 KB, Next.js üzerinde 148.6 KB vs 141.3 KB. Ancak fark diğer alanlarda açılmaktadır: yalıtılmış olarak derlenen bir Lingui bileşeni Intlayer'ın 6-8 KB değerine karşılık 58-153 KB yer kaplar, hidrasyon 11-14 ms yerine 28-34 ms sürer, kaynak dil yedeği her optimize kurulumda fr sayfalarına en dizgilerinin %3-15'ini sızdırır ve optimize edilmiş kuruluma ulaşmak, katalogları rota başına manuel olarak ayıklamak, derlemek ve seçmek anlamına gelir. Intlayer ise buna hiçbir yapılandırma gerektirmeden ulaşır.

Kısaca

• Lingui - Makro tabanlı ( t`...` , <Trans>, msg), ICU MessageFormat, .po / JSON katalogları, lingui extract + lingui compile iş akışı. Mesaj kimliklerini kısa hash'lere derler, dil başına dinamik katalog yüklemeyi destekler. Köklü, çatıdan bağımsız (framework-agnostic), .po çevresinde güçlü çevirmen araçları geçmişine sahip.
• Intlayer - Bileşen odaklı içerik modeli. .content.ts sözlükleri hizmet ettikleri bileşenin hemen yanında bulunur, derleme zamanı derleyicisi bunları bileşen ve dil başına tree-shake ve tembel yükleme yapar, içeriğinizden katı TypeScript tipleri oluşturulur ve eksik çeviriler derleme zamanında hata verir. Ara yazılım (middleware), SEO yardımcıları, Görsel Düzenleyici / CMS ve yapay zeka destekli çeviri ile birlikte 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
lingui/js-lingui				Aralık 2016

Rozetler otomatik olarak güncellenir. Anlık görüntüler zaman içinde değişebilir.

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

Karşılaştırmalı test

Neler ölçüldü?

Benchmark Bloom test paketi, her kütüphane ile birebir aynı uygulamayı derler: 10 sayfa (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), 10 dil (en, fr, es, de, it, pt, zh, ja, ko, ru), özdeş bileşenler ve özdeş içerik. Sayfalar en ve fr dillerinde ölçülür. Her kütüphane, en basit kurulumdan en uygun kuruluma kadar dört yükleme stratejisi ile uygulanmıştır:

Intlayer'ın "scoped" varyantı yoktur: derleyici içeriği otomatik olarak bileşen başına sınırlar, bu nedenle static ve dynamic satırları zaten kapsamlandırılmıştır.

Her derleme için test paketi şunları kaydeder:

• Kütüphane boyutu (Lib size): Yalnızca i18n kütüphanesini içe aktaran boş bir bileşenin gzip boyutu. Çalışma zamanının sabit maliyeti.
• Sayfa JS (Page JS): Sayfa başına indirilen gzip sıkıştırmalı JavaScript, tüm sayfalar ve diller üzerinden ortalaması alınır.
• Dil sızıntısı % (Locale leak %): İndirilen JS içinde bulunan ve kullanıcının görüntülemediği bir dile ait olan çevrilmiş dizgilerin oranı (en ve fr üzerinde ölçülmüştür, dolayısıyla %50 "ölçülen diğer dil tamamen mevcuttur" anlamına gelir; 10 dil paketlendiğinde gerçek israf çok daha yüksektir).
• Sayfa sızıntısı % (Page leak %): İndirilen JS içinde bulunan ve kullanıcının üzerinde olmadığı bir sayfaya ait olan çevrilmiş dizgilerin oranı.
• Bileşen ortalaması (Component avg): Yalıtılmış olarak derlenen her bileşenin ortalama gzip boyutu. Tek bir bileşenin ne kadar i18n çalışma zamanı ve katalog getirdiğini gösterir.
• Uçtan uca tepkisellik (E2E reactivity): Yeni bir dil seçilmesi ile DOM'daki html[lang] etiketinin güncellenmesi arasındaki süre (Playwright, 5 yineleme).
• Hidrasyon (Hydration): React hidrasyon aşamasının süresi.

Aşağıdaki sayılar, @lingui/react 6.6.0 ve intlayer 9.5.1 ile 2026-09-12 tarihindeki çalıştırmadan alınmıştır. Test uygulaması kasıtlı olarak küçüktür (dil başına birkaç düzine dize), bu nedenle sızıntı yüzdeleri bir kalıbı tanımlar: içeriğiniz büyüdükçe artarlar ancak çalışma zamanı sabit kalır.

Next.js Sonuçları

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

Sonuçlar nasıl okunmalı?

• Çalışma zamanı maliyeti. Boş bir bileşen Lingui ile 11.9 KB gzip, Intlayer ile 5.5 KB yer kaplar. Sayfanın tamamında, Lingui'nin en iyi yapılandırması Intlayer'ın +7.3 KB üzerindedir (148.6'ya karşı 141.3 KB); Intlayer temel uygulamanın yalnızca +0.3 KB üzerindedir.
• Basit kurulum maliyetlidir. Derlenmiş her kataloğu baştan yüklemek sayfa başına 207.4 KB ile sonuçlanır; bu, temel uygulamanın +66 KB üzerindedir. Parmak izi alınan dizgilerin yarısı yanlış dile, %90'ı ise yanlış sayfaya aittir.
• Dinamik yükleme dili düzeltir, sayfayı değil. Dil başına bir katalog ile sayfa sızıntısı ~%90 seviyesinde kalır: tüm fr kataloğu her Fransızca sayfada gönderilir. %0 sayfa sızıntısına ulaşmak için scoped-dynamic kurulumu gerekir: rota başına bir katalog, ayrı ayrı çıkarılmış ve derlenmiş, her sayfada manuel olarak seçilmiş.
• Kaynak dil yedeği sızdırır. Optimize edilmiş kurulumlarda bile en dizgilerinin %3-15'i fr sayfalarına gönderilir. Lingui makroları kaynak mesajı yedek olarak hazır tutar, bu nedenle çevirinin yanında pakete girer. Intlayer ise yedekleri derleme sırasında çözer ve yalnızca etkin dili gönderir.
• scoped-dynamic modunda bileşen boyutu aşırı büyür. Yalıtılmış olarak derlenen her bileşenin ortalaması 152.6 KB olur, çünkü her rotanın kataloğu onu içe aktaran bileşenden erişilebilir hale gelir. useIntlayer() kullanan aynı bileşenin ortalaması yalnızca 6.9 KB'dır.

Tüm kütüphaneler ve stratejiler için tam tablo Next.js benchmark raporunda.

TanStack Start Sonuçları

Sonuçlar nasıl okunmalı?

• Sayfa başına JavaScript konusunda Lingui kıl payı öndedir. dynamic Lingui 115.2 KB değerine ulaşarak Intlayer'ın 118.6 KB değerinin 3.4 KB altındadır. Lingui'nin hash kimlikli derlenmiş katalogları oldukça küçüktür ve TanStack Start yönlendiricisi rotaları o kadar iyi böler ki dynamic satırında sayfa sızıntısı zaten %0'dır.
• Sayfa boyutunun dışındaki tüm diğer metriklerde üstünlük Intlayer'dadır. Hidrasyon Lingui ile 28-34 ms sürerken Intlayer ile 11-14 ms sürer: React hidrasyonu tamamlamadan önce istemcide i18n.load() + i18n.activate() çalıştırılır. Tek başına derlenen bileşenler 6-8 KB yerine 58-148 KB yer tutar. Kaynak dil yedeği sebebiyle dil sızıntısı asla %0'a inmez (%4-9).
• Optimize edilmiş kurulumda dil değiştirme yavaştır. scoped-dynamic Lingui'nin html[lang] etiketini güncellemesi 42 ms sürer: değişiklik görünür olmadan önce yeni rota kataloğunun getirilmesi, yüklenmesi ve etkinleştirilmesi gerekir. Intlayer ise her iki modda da 3-4 ms içinde geçiş yapar.
• Intlayer'ın static satırı zaten %0 sayfa sızıntısına sahiptir, çünkü yalnızca sayfa bileşenlerinin içe aktardığı sözlükler paketlenir. Tek satırlık bir yapılandırma (importMode: 'dynamic') dil sızıntısını da ortadan kaldırır.
• @intlayer/lingui, Lingui'nin makro sözdizimini korur ve bunu Intlayer sözlüklerinden sunar. Orijinal Lingui'ye göre daha küçük bileşenler (12.8 KB) ve daha hızlı hidrasyon elde etmek için sayfa boyutundan (137 KB) bir miktar ödün verir. Bu bir geçiş adımıdır, nihai hedef değildir.

Tam tablo TanStack Start benchmark raporunda.

Neden bu fark var? İki derleyici, iki çalışma birimi

Her iki kütüphane de derleme yapar. Fark, neyi derlediklerindedir.

Lingui katalogları derler. Kaynak kodunuzdaki makrolar dil başına bir .po dosyasına ayıklanır, ardından dil başına bir JS modülüne derlenir. Temel birim dildir. Rota veya bileşen bazında daha fazla bölmek; birden fazla katalog oluşturmak, lingui.config.ts dosyasını her birini farklı dosya kümelerinden ayıklayacak şekilde yapılandırmak ve her rotada doğru olanı yüklemek anlamına gelir. Çalışma zamanı I18n örneği geneldir; her useLingui() çağrısı bileşeni buna bağlar.

.
├── lingui.config.ts
└── src
    ├── i18n.ts                          # setupI18n(), load(), activate()
    ├── locales
    │   ├── en
    │   │   ├── messages.po
    │   │   └── messages.mjs             # lingui compile çıktısı
    │   └── fr
    │       ├── messages.po
    │       └── messages.mjs
    ├── components
    │   └── Counter.tsx                  # const { t } = useLingui(); t`Increment`
    └── routes
        └── $locale
            └── about.tsx                # await import(`../locales/${locale}/messages.mjs`)

Intlayer sözlükleri derler. Her .content.ts dosyası bir anahtara bağlı bir sözlüktür; derleyici hangi bileşenin hangi anahtarı içe aktardığını çözer ve sözlük ile dil başına tam olarak o bileşenin ihtiyaç duyduğu JSON'ı üretir. Temel birim bileşendir. Rota kapsamı bunun doğal bir sonucudur: bir sayfa yalnızca oluşturduğu bileşenlerin sözlüklerini çeker.

.
├── intlayer.config.ts
└── src
    ├── components
    │   └── Counter
    │       ├── index.tsx                # useIntlayer("counter")
    │       └── index.content.ts
    └── routes
        └── $locale
            ├── about.tsx
            └── about.content.ts

Bu nedenle scoped-dynamic modeli Intlayer için doğal bir derleme çıktısı iken, Lingui için zahmetli bir yapılandırma projesidir. Fark iki eksende birden açılır: sayfalar ve diller:

dynamic satırının sayılarını elde etmek için intlayer.config.ts dosyasında dictionary.importMode: 'dynamic' ayarını yapın. Paket optimizasyonu kılavuzuna göz atın.

Geliştirici deneyimi

Kurulum

import { defineConfig } from "@lingui/cli";

export default defineConfig({
  sourceLocale: "en",
  locales: ["en", "fr"],
  catalogs: [
    {
      path: "<rootDir>/src/locales/{locale}/messages",
      include: ["src"],
    },
  ],
});

import { setupI18n } from "@lingui/core";

export const loadCatalog = async (locale: string) => {
  const { messages } = await import(`./locales/${locale}/messages.mjs`);
  const i18n = setupI18n();
  i18n.load(locale, messages);
  i18n.activate(locale);
  return i18n;
};

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

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

export default config;

Bileşen

import { useState } from "react";
import { useLingui } from "@lingui/react/macro";
import { Trans } from "@lingui/react/macro";

export const Counter = () => {
  const { t, i18n } = useLingui();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{i18n.number(count)}</p>
      <button aria-label={t`Counter`} onClick={() => setCount((c) => c + 1)}>
        <Trans>Increment</Trans>
      </button>
    </div>
  );
};

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;

import { useState } from "react";
import { useIntlayer } from "react-intlayer";
import { useNumber } from "react-intlayer/format";

export const Counter = () => {
  const { label, increment } = useIntlayer("counter");
  const number = useNumber();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{number(count)}</p>
      <button aria-label={label} onClick={() => setCount((c) => c + 1)}>
        {increment}
      </button>
    </div>
  );
};

Bileşenlerin dışında

Meta veriler, yükleyiciler (loaders), sunucu fonksiyonları: React ağacının bulunmadığı her yer.

import { setupI18n } from "@lingui/core";
import { msg } from "@lingui/core/macro";

const title = msg`About us`;

export const loader = async ({ params }: { params: { locale: string } }) => {
  const { messages } = await import(
    `../../locales/${params.locale}/messages.mjs`
  );
  const i18n = setupI18n({
    locale: params.locale,
    messages: { [params.locale]: messages },
  });

  return { title: i18n._(title) };
};

import { getIntlayer } from "intlayer";

export const loader = async ({ params }: { params: { locale: string } }) => {
  const { title } = getIntlayer("about-metadata", params.locale);

  return { title };
};

Lingui makrolarını koruyun, Intlayer sözlüklerine geçin

@intlayer/lingui, @lingui/core ve @lingui/react için doğrudan kullanılabilir bir uyumluluk adaptörüdür. Makrolar eskisi gibi derlenmeye devam eder; derlendikleri çalışma zamanı i18n._() çağrısı Intlayer sözlüklerinden beslenir ve .po senkronizasyon eklentileri mevcut kataloglarınızı kaynak olarak korur. ICU çoğul ve seçim ifadeleri birebir aynı şekilde işlenir.

import { defineConfig } from "vite";
import { lingui } from "@intlayer/lingui/plugin";

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

@lingui/babel-plugin-lingui-macro / @lingui/swc-plugin eklentisini Intlayer derleyicisinden önce çalışacak şekilde yapılandırmada tutun. Lingui uyumluluk kılavuzuna bakın.

Hangisi ne zaman seçilmeli?

FAQ

İlgili karşılaştırmalar

Aynı benchmark, diğer kütüphaneler:

Daha fazlası:

Referans belgeler:

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ülaritesinin, topluluk güveninin ve uzun vadeli kalıcılığının önemli bir göstergesidir. Teknik kalitenin doğrudan bir ölçüsü olmasa da, projeyi kaç geliştiricinin faydalı bulduğunu ve gelişimini takip ettiğini gösterir.

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ç

Lingui, bu testteki en güçlü çalışma zamanı + derleyici hibrit kütüphanesidir. Hash'lenmiş derlenmiş katalogları, sayfa başına JavaScript boyutunu Intlayer'a sadece birkaç kilobayt mesafede tutar, hatta TanStack Start üzerinde biraz daha altına indirir. Yalnızca sayfa başına bayt dikkate alınsaydı, bu bir beraberlik olurdu.

Ancak metrikler bundan ibaret değildir. Lingui'nin derleyicisi dil düzeyinde durur; bunun altındaki her şey (rota başına kataloglar, tembel yükleme, yedeklerin paketten çıkarılması) manuel yapılandırma gerektirir. Karşılaştırma bu sınırın maliyetini net bir şekilde gösterir: 10-20 kat daha büyük bileşenler, 2-3 kat daha yavaş hidrasyon, asla sıfırlanmayan %3-15 dil sızıntısı ve optimize edilmiş modda 42 ms süren dil değişimi. Intlayer'ın derleyicisi ise bileşen düzeyinde çalışır; bu sayede bu değerler hiçbir manuel yapılandırmaya ihtiyaç duymadan 6-8 KB, 11-14 ms, %0 ve 3-4 ms seviyesindedir.

Tüm ham veriler, test uygulamaları ve betikler Benchmark Bloom deposunda yer almaktadır. Kendiniz de test edebilirsiniz.

Daha fazla ayrıntı için 'Neden Intlayer?' belgesine başvurun.