Apakah vue-i18n Sudah Ketinggalan Zaman di Tahun 2026?

Dalam ekosistem Vue, hampir tidak ada pustaka yang memiliki tingkat adopsi setinggi vue-i18n. Dikelola oleh Kazupon sejak masa Vue 2, pustaka ini menjadi fondasi bagi @nuxtjs/i18n dan pilihan alami untuk proyek multibahasa di Vue.

Meski demikian, hasil benchmark tahun 2026 menunjukkan fakta mengejutkan: vue-i18n merupakan runtime lokalisasi terberat di antara seluruh framework frontend yang kami uji.

Pada aplikasi dasar berbasis Vite + Vue yang hanya berukuran 31.5 KB, penambahan vue-i18n mendongkrak rata-rata JavaScript per halaman menjadi 136.4 KB, lebih dari empat kali lipat ukuran semula.

Mengapa framework yang terkenal ringan ini harus menanggung beban i18n yang begitu besar? Dan apakah model murni runtime ini masih relevan saat ini?

Poin Utama

Runtime terberat yang diuji:

Dengan ukuran 24.3 KB gzipped (83.2 KB minified) sebelum menyertakan teks apa pun, vue-i18n tercatat sekitar 9 kali lebih berat dibanding mesin inti intlayer (2.7 KB).

Peningkatan ukuran halaman 330%:

vue-i18n membuat halaman awal yang semula 31.5 KB melonjak ke 136.4 KB. Sebaliknya, Intlayer hanya menghasilkan 59.3 KB, menghasilkan payload 56% lebih ringan.

Kompiler tersembunyi di peramban:

Kecuali Anda mengonfigurasi alias khusus pada bundler, vue-i18n secara default mengirimkan kompiler pesan lengkap ke browser untuk memproses string secara instan.

Laju pemeliharaan:

Sepanjang tahun lalu vue-i18n mencatatkan ~259 commit, yang sebagian besar ditujukan untuk perbaikan bug dan penyesuaian rilis Vue.

Ketiadaan perkakas modern resmi:

Tidak tersedia dukungan terintegrasi untuk Language Server (LSP), server MCP untuk AI, maupun perintah terjemahan CLI otomatis.

Pemeliharaan vs. Perkakas Modern

Tampilkan semua isi tabel

Tampilkan semua isi tabel

Buka tabel dalam modal untuk melihat semua isi data dengan jelas

Repositori	Bintang	Total commit	Commit / tahun	Commit terakhir
intlify/vue-i18n
aymericzip/intlayer

Catatan selama 12 bulan terakhir:

• intlify/vue-i18n: 259 commit (perawatan berkala untuk Vue 3 dan Nuxt).
• aymericzip/intlayer: 4.343 commit (pengembangan berkelanjutan pada optimasi kompiler, LSP, dan integrasi AI agent).

Pustaka yang matang memang menjamin keandalan. Namun paradigma frontend modern kini berpusat pada transformasi AST saat build time, pembersihan dead code, dan otomatisasi AI. Sistem yang terpaku pada eksekusi di browser sulit mengadopsi kemudahan ini.

Hasil Tolok Ukur di Vite + Vue

Pengujian pada aplikasi 10 halaman dan 10 bahasa yang dibangun dengan Vite dan Vue 3:

Diuji pada peramban aktual menggunakan kompresi gzip produksi. Data lengkap tercantum di dokumentasi benchmark Vue.

Beban Pustaka Dasar

Beban awal sebelum file terjemahan dimasukkan:

Mesin runtime vue-i18n sendiri memakan 24.3 KB gzipped, hampir sebanding dengan ukuran keseluruhan inti Vue. Di sisi lain, Intlayer hanya menambah 2.7 KB.

Ukuran Halaman dan Kebocoran Konten

Kesimpulan Utama

Pertumbuhan proporsional yang tinggi:

Karena fondasi Vue sangat ramping (~31 KB), pemakaian vue-i18n melipatgandakan ukuran muatan halaman lebih dari empat kali lipat.

Kebocoran data ke rute lain:

Secara bawaan, 90% terjemahan yang dikirimkan ke suatu rute sebenarnya adalah milik halaman lain. Intlayer sepenuhnya memangkas data yang tidak relevan ini hingga 0.0%.

Ukuran komponen terisolasi:

Komponen dengan scope lokal mencapai rata-rata 196 KB pada vue-i18n akibat duplikasi kamus, berbanding 6.5 KB pada Intlayer.

Mengapa vue-i18n Begitu Berat?

Kompiler AST yang Dikirimkan ke Browser

vue-i18n membawa modul kompilasi pesannya sendiri. Penanganan plural dan substitusi variabel diuraikan menjadi Abstract Syntax Tree (AST) secara langsung di browser saat aplikasi berjalan.

Untuk mencegahnya, bundler harus diarahkan ke vue-i18n/dist/vue-i18n.runtime.esm-bundler.js dan file perlu diprekompilasi lewat @intlify/unplugin-vue-i18n. Langkah ini sering kali terlewatkan.

Struktur Fitur yang Monolitik

vue-i18n memaketkan sekaligus penanganan tanggal dan angka, pesan terhubung, jembatan Options API ($t, v-t), serta proxy reaktif. Sekalipun Anda hanya butuh teks sederhana di dalam <script setup>, seluruh mesin tetap diunduh.

String Key Dinamis Menghambat Tree-Shaking

Karena "home.hero.title" dievaluasi pada saat runtime, bundler tidak dapat mengidentifikasi teks mana yang terpakai. Alhasil, teks yang tidak diperlukan tetap tersimpan di dalam bundle.

<script setup>
import { useI18n } from "vue-i18n";

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

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Kompiler Intlayer mengenali properti yang diakses dan membersihkan data yang tidak terpakai sebelum chunk klien dibuat. Baca selengkapnya di optimasi bundle.

Pengalaman Pengembang (DX)

Folder Terpisah vs. Ko-Lokasi

Pada vue-i18n, teks tersimpan di direktori locales/ yang terpisah. Intlayer mendukung penempatan file deklarasi konten berdampingan dengan komponen:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "Rilis dalam setiap bahasa"
  }
}

<script setup>
import { useI18n } from "vue-i18n";

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

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

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

export default {
  key: "hero",
  content: {
    title: t({
      en: "Ship in every language",
      id: "Rilis dalam setiap bahasa",
    }),
  },
} satisfies Dictionary;

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Menghapus atau mengubah nama Hero.vue akan membuat file kontennya ikut diproses secara serentak.

Petunjuk Editor vs. Jaminan Kelengkapan

DefineLocaleMessage menyajikan autocomplete berdasarkan skema dasar. Namun fitur ini tidak memvalidasi kelengkapan semua bahasa. Menghapus key dari id.json tidak akan menggagalkan build TypeScript.

Di Intlayer, kamus diverifikasi secara menyeluruh. Mode strictMode akan langsung memicu error build jika ada terjemahan yang terlewat pada bahasa mana pun.

Ekosistem Alat Bantu dan AI

Alur Kerja Penerjemahan

vue-i18n tidak menyediakan perintah built-in untuk menerjemahkan teks. Developer biasanya mengekspor file ke layanan eksternal seperti Crowdin atau Phrase.

Intlayer menyediakan fungsi-fungsi tersebut secara langsung:

Pengisian Otomatis AI Lokal (intlayer fill):

Menerjemahkan teks yang hilang menggunakan API key OpenAI, Anthropic, Mistral, atau Gemini Anda sendiri.

CMS Visual yang Dapat Di-hosting Mandiri:

Terapkan Intlayer CMS agar tim konten dapat mengedit terjemahan secara visual dengan sinkronisasi langsung ke Git.

Lisensi Open Source:

Seluruh komponen didistribusikan di bawah lisensi Apache 2.0.

Kapan vue-i18n Masih Menjadi Pilihan Tepat?

Bagaimana Meningkatkan Konfigurasi vue-i18n yang Sudah Ada?

Intlayer menawarkan paket kompatibilitas drop-in yang mereplikasi tanda tangan fungsi vue-i18n dan @nuxtjs/i18n (useI18n, $t, <i18n-t>). Anda tidak perlu menulis ulang template atau composable untuk menikmati efisiensi arsitektur ringan berbasis kompiler.

Pemasangan selesai dengan satu baris perintah:

npx intlayer init --interactive

CLI interaktif ini secara otomatis:

1. Memasang paket kompatibilitas @intlayer/vue-i18n atau @intlayer/nuxt-i18n.
2. Mengonfigurasi alias bundler Vite atau Nuxt agar impor dan template yang ada diarahkan ke Intlayer, sehingga vue-i18n dapat dihapus dari package.json.
3. Mengaktifkan diagnostik Language Server (LSP) secara instan, menyingkirkan parser AST 24 KB dari bundle klien, dan membuka alur kerja terjemahan AI lokal tanpa migrasi besar.

Untuk instruksi langkah demi langkah, telusuri panduan khusus kami:

• Kompatibilitas Mudah: Gunakan kembali template lama dengan lapisan kompatibilitas vue-i18n atau @nuxtjs/i18n.
• Panduan Langkah Demi Langkah: Ubah file JSON menjadi kamus terstruktur melalui panduan: dari vue-i18n atau dari @nuxtjs/i18n.
• Pendekatan Bertahap: Tetap gunakan vue-i18n di sisi runtime sembari memanfaatkan Intlayer bersama vue-i18n untuk mendapatkan validasi tipe ketat dan terjemahan AI lokal.

Periksa ukuran bundle dan kebocoran data situs Anda dengan Pemindai SEO i18n gratis:

Bacaan Pilihan

• Benchmark Vue & Vite i18n: Evaluasi Mendalam
• Perbandingan vue-i18n vs Intlayer
• Apakah next-intl Sudah Ketinggalan Zaman di Tahun 2026?
• Internasionalisasi Berbasis Kompiler vs Deklaratif