Cara Memilih Library Svelte i18n yang Tepat

Svelte tidak menyediakan fitur bawaan untuk i18n. Tidak ada $t, tidak ada primitif locale, tidak ada format pesan. Setiap opsi merupakan pilihan pihak ketiga (third-party), dan ekosistem Svelte adalah tempat di mana i18n waktu kompilasi (compile-time) telah berkembang paling jauh, sehingga kandidat-kandidatnya lebih berbeda satu sama lain dibandingkan di React atau Vue.

Panduan ini mencantumkan pertanyaan yang harus dijawab terlebih dahulu, lalu memetakan jawabannya ke svelte-i18n, Paraglide, typesafe-i18n, wuchale, dan Intlayer, untuk Vite + Svelte dan untuk SvelteKit.

Daftar Isi

Enam pertanyaan yang harus dijawab sebelum membandingkan library

1. Vite SPA atau SvelteKit? Dalam sebuah SPA, store tingkat modul sudah tepat: satu tab, satu pengguna, satu locale. Di SvelteKit, singleton yang sama tersebut dibagikan ke seluruh request konkuren di server, dan request B dirender dalam bahasa request A. Library tersebut dapat memberi Anda bentuk per-request (context, locals) atau menyerahkan pengaturannya kepada Anda.
2. Siapa yang menulis terjemahan? Developer, TMS, agensi yang mengirimkan string ICU, atau pipeline AI. svelte-i18n mendukung ICU. Paraglide dan typesafe-i18n menggunakan sintaks mereka sendiri. Sesuaikan dengan vendor yang digunakan.
3. Berapa banyak locale dan halaman? Dua locale dan lima halaman dapat memuat semuanya. Sepuluh locale dan empat puluh route tidak bisa, dan perbedaan antara katalog runtime dan pesan terkompilasi menjadi biaya utama.
4. Apakah Anda memerlukan type pada kunci (keys)? $_("cart.totl") adalah kegagalan runtime di svelte-i18n. Library compile-time menjadikannya sebagai error type secara terstruktur.
5. Store Svelte 4 atau rune Svelte 5? Rune mengubah sintaks dari state locale, bukan masalah pembagian datanya (sharing problem). Namun $state di file .ts terkompilasi menjadi variabel biasa, sehingga runtime library harus mendukung rune jika Anda menggunakan Svelte 5.
6. Dapatkah Anda menerima file yang di-generate di dalam repo? Paraglide dan typesafe-i18n sama-sama men-generate file JavaScript atau TypeScript ke dalam struktur source tree Anda. Beberapa tim tidak mempermasalahkannya, sementara yang lain mengalami konflik merge pada setiap branch paralel.

Tuliskan jawabannya. Semua pembahasan di bawah ini merujuk kembali ke jawaban-jawaban tersebut.

Gambaran lanskap dalam satu gambar

Svelte i18n hadir lebih lambat daripada React atau Vue, dan langsung melompat ke gelombang compile-time.

Sejarah JavaScript i18n membahas setiap gelombang secara rinci.

Keputusan yang paling penting: di mana konten berada dan kapan dimuat

Dua pilihan struktural menjelaskan sebagian besar perbedaan bundle antar setup:

• Konten terpusat (centralized) atau terlingkup (scoped). Satu locales/en.json untuk seluruh aplikasi, atau satu deklarasi per komponen.
• Import statis atau dinamis. Semuanya saat startup, atau locale aktif (dan idealnya route aktif) di-fetch sesuai permintaan (on demand).

Grafik ini memperkirakan payload untuk aplikasi teoritis 1 hingga 10 halaman, diterjemahkan ke dalam 1 hingga 10 locale, dengan sekitar 30 KB teks per halaman.

svelte-i18n berada di kiri atas secara default: register("fr", () => import("./fr.json")) memberi Anda pemuatan dinamis per locale, tetapi katalog locale adalah satu objek tunggal dan memuatnya akan memuat salinan teks untuk setiap halaman. Paraglide adalah kasus yang menarik: karena setiap pesan adalah ekspornya sendiri, tree-shaking memberi Anda pemisahan sumbu halaman secara gratis, dan benchmark Svelte mengonfirmasi bahwa ini bekerja seperti yang diiklankan pada Vite + Svelte (namun tidak terjadi pada benchmark React dan Next.js). Intlayer mencapai hasil yang sama melalui deklarasi per komponen.

Jika jawaban Anda untuk pertanyaan 3 adalah "banyak halaman", pertimbangkan bagian ini lebih dari preferensi API apa pun. Artikel i18n per komponen vs terpusat membahas sisi pemeliharaan dari kompromi yang sama.

Para kandidat

Ukuran library diambil dari benchmark Svelte: store ditambah accessor dalam komponen kosong, setelah bundling, tree-shaking, dan minifikasi, pada aplikasi 10 halaman dan 10 locale. Konten diukur secara terpisah.

Angka-angka tersebut merupakan gambaran pada versi saat benchmark dilakukan. Jalankan pada aplikasi Anda sendiri sebelum memutuskan hanya berdasarkan ukuran.

Ukuran library Paraglide yang hampir nol diperoleh dari rancangannya: runtime di-generate langsung ke dalam repository Anda. Intlayer memerlukan vite-intlayer, sehingga tidak dapat berjalan tanpa langkah build.

Mencocokkan jawaban Anda dengan library

Kelemahan masing-masing library

• svelte-i18n: paling berat di antara semuanya, tanpa type pada kunci, tanpa pemisahan per route, dan store tingkat modul yang bocor di antara request pada SvelteKit kecuali jika Anda mengonfigurasi context sendiri.
• typesafe-i18n: proses watcher, file yang di-generate di dalam repo, dan repository yang belum banyak bergerak baru-baru ini.
• Paraglide: file yang di-generate di-commit ke dalam repo dan harus di-generate ulang sebelum setiap push, menimbulkan konflik merge pada branch paralel, dan locale dibaca dari cookie atau storage pada setiap pemanggilan pesan daripada dari sebuah store, yang menambah beban kerja saat pergantian locale.
• wuchale: ide ekstraksi yang menarik, tetapi masih baru. Benchmark React mengalami masalah reactivity yang mengharuskan re-render provider secara paksa, dan dokumentasinya masih minim.
• Intlayer: memerlukan plugin build wajib, ekosistem lebih kecil, dukungan ICU parsial, dan konten tersebar di seluruh codebase berdasarkan rancangannya, sehingga mengekspor satu file JSON untuk penerjemah memerlukan tooling tambahan.

Tampilan setiap opsi dalam kode

Komponen yang sama, ringkasan keranjang dengan judul dan bentuk jamak (plural), ditulis dengan masing-masing kandidat. Bagian yang menarik bukanlah markup-nya, melainkan di mana konten berada, bagaimana locale disimpan, dan apa yang diketahui oleh pemeriksa tipe (type checker).

{
  "cart": {
    "title": "Your cart",
    "items": "{count, plural, one {# item} other {# items}}"
  }
}

<script lang="ts">
  import { _ } from "svelte-i18n";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$_("cart.title")}</h2>
  <p>{$_("cart.items", { values: { count } })}</p>
</section>

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

<script lang="ts">
  import { m } from "$lib/paraglide/messages.js";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{m.cart_title()}</h2>
  <p>{m.cart_items({ count })}</p>
</section>

import type { BaseTranslation } from "../i18n-types";

const en = {
  cart: {
    title: "Your cart",
    items: "{count} item{{s}}",
  },
} satisfies BaseTranslation;

export default en;

<script lang="ts">
  import LL from "$i18n/i18n-svelte";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$LL.cart.title()}</h2>
  <p>{$LL.cart.items({ count })}</p>
</section>

import { plural, t, type Dictionary } from "intlayer";

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({
      id: "Keranjang Anda",
      en: "Your cart",
      fr: "Votre panier",
      es: "Tu carrito",
    }),
    items: t({
      id: plural({ one: "{{count}} item", other: "{{count}} item" }),
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

<script lang="ts">
  import { useIntlayer } from "svelte-intlayer";

  let { count }: { count: number } = $props();
  const content = useIntlayer("cart-summary");
</script>

<section>
  <h2>{$content.title}</h2>
  <p>{$content.items(count)}</p>
</section>

Sudah menggunakan svelte-i18n? Adaptor kompatibilitas @intlayer/svelte-i18n membuat alias untuk package pada tingkat bundler sehingga $_, $date, $number, dan kunci flat Anda tetap berfungsi sementara Intlayer menyajikan kontennya.

Sebelum Anda memutuskan

Tabel fitur memberi tahu apa yang dilakukan library hari ini. Poin-poin ini memberi tahu seperti apa pengalaman menggunakannya dalam jangka panjang.

Periksa aktivitas repository.

Commit, waktu respons issue, dan apakah rilis minor terakhir dilakukan tahun ini. Desain yang solid tanpa maintainer adalah migrasi yang tinggal menunggu waktu.

Jangan memilih berdasarkan unduhan npm.

Library yang paling banyak diinstal adalah library yang dirilis lebih dulu, bukan yang paling cocok untuk codebase Svelte tahun 2026. Jumlah unduhan mengukur riwayat masa lalu, bukan kesesuaian saat ini.

Tanyakan siapa yang mendanai maintainer, dan apa yang mereka jual.

svelte-i18n didukung oleh Crowdin, seperti next-intl dan vue-i18n. i18next didukung oleh Locize. Tolgee, Paraglide (inlang), dan Intlayer masing-masing menjalankan platform mereka sendiri. Vendor yang pendapatannya berasal dari hosting terjemahan memiliki sedikit alasan untuk membuat terjemahan gratis di dalam toolchain Anda. Intlayer adalah satu-satunya dari kumpulan ini yang menyediakan terjemahan AI melalui CLI dengan API key Anda sendiri, serta CMS yang dapat Anda host sendiri (self-host).

Apakah sudah siap untuk AI-agent?

Agent masih kesulitan dengan i18n: mereka melupakan locale, mengarang kunci, dan mencampur sintaks pesan. Apakah library menyediakan Agent Skills atau server MCP sehingga agent dapat mendaftar, mengisi, dan menguji konten? Dan apakah pemuatan konten dioptimalkan secara default, atau seseorang harus meninjau namespace dan lazy import setiap kuartal?

Type safety langsung siap pakai.

Bukan "dapat diberi tipe dengan konfigurasi tambahan", melainkan "kunci yang salah akan menggagalkan tsc pada instalasi baru". Periksa apa yang terjadi dengan kunci yang tidak ada, dan dengan locale yang kehilangan satu terjemahan.

Deteksi konten yang tidak digunakan.

Katalog hanya akan terus bertambah. Build Intlayer membersihkan field yang tidak digunakan dan mencatatnya dalam log (build.purge). Paraglide mencapainya melalui arsitektur, karena fungsi pesan yang tidak dipanggil akan di-tree-shake. Opsi lainnya menyerahkan pembersihan ini sepenuhnya kepada Anda.

Pengalaman developer (Developer experience).

Waktu setup hingga string terjemahan pertama, LSP atau ekstensi VS Code yang menampilkan terjemahan saat hover dan melompat ke deklarasi, CLI untuk fill, test, dan push, serta cara bagi non-developer untuk mengedit konten (visual editor atau CMS) tanpa pull request.

Pertanyaan yang Sering Diajukan

Melangkah lebih jauh

• Benchmark Svelte i18n: ukuran bundle, kebocoran, dan waktu peralihan locale
• Svelte i18n: store, rune, dan jebakan level modul dan SvelteKit i18n: routing, SSR, dan shared state
• Adaptor kompatibilitas svelte-i18n drop-in
• Sejarah JavaScript i18n
• i18n compiler vs deklaratif
• i18n per komponen vs terpusat
• Cara kerja optimasi bundle pada waktu build
• Menyiapkan i18n di aplikasi Vite + Svelte dan di aplikasi SvelteKit
• Panduan yang sama untuk React, Vue, dan Solid