Penulis:
    Aymeric PINEAU
    Dibuat:2026-09-13Terakhir diperbarui:2026-09-13

    vue-i18n VS Intlayer | Benchmark Internasionalisasi (i18n) Vue

    vue-i18n adalah library i18n referensi untuk Vue. Intlayer adalah alternatif berbasis compiler, scoped-component dengan integrasi Vue (vue-intlayer). Kami sudah membandingkan fitur dan developer experience mereka. Artikel ini melihat apa yang masing-masing biayai setelah app dibangun.

    Data berasal dari Benchmark Bloom, sebuah suite open-source yang membangun aplikasi yang sama dengan setiap library dan mencatat apa yang sebenarnya browser unduh dan jalankan.

    tl;dr: Pada aplikasi Vite + Vue 3 yang sama, vue-i18n mengirimkan 134.9 KB JavaScript ter-gzip per halaman dibandingkan 41.3 KB untuk aplikasi tanpa i18n. Intlayer mengirimkan 57.1 KB. Runtime vue-i18n sendiri memiliki berat 24.3 KB gzip (6x lebih berat dari Intlayer's 3.9 KB), setiap halaman membawa 90% string halaman asing, dan komponen yang dikompilasi secara terisolasi membawa 196 KB karena terikat pada pohon pesan global. Adapter @intlayer/vue-i18n mempertahankan API vue-i18n dan diukur pada 47.0 KB per halaman.

    Singkatnya

    • vue-i18n - Perpustakaan i18n de-facto untuk Vue 2 / Vue 3 dan inti dari @nuxtjs/i18n. Pesan gaya ICU, blok <i18n> SFC, directive v-t, formatter d() / n(), ekosistem besar. Pesan didaftarkan pada instance global di createI18n(); lazy loading per locale adalah pola manual setLocaleMessage(), dan pemisahan per-route adalah tugas Anda sendiri.
    • Intlayer - Model konten yang berpusat pada komponen. Kamus .content.ts duduk di sebelah komponen yang mereka layani, compiler build-time (vite-intlayer) tree-shakes dan lazy-loads mereka per komponen dan per locale, tipe TypeScript yang ketat dihasilkan dari konten Anda, dan terjemahan yang hilang gagal pada build time. Dilengkapi dengan helper router / SEO, Visual Editor / CMS dan terjemahan berbantuan AI.
    PerpustakaanGitHub StarsTotal CommitsLast CommitFirst VersionNPM VersionNPM Downloads
    aymericzip/intlayerGitHub Repo starsGitHub commit activityLast CommitApril 2024npmnpm downloads
    Lingui vs Intlayernext-intl vs @intlayer/next-intl

    Komentar

    Belum ada komentar. Jadilah yang pertama membagikan pemikiran Anda.

    Postingan Terkait

    Cara Membuat Multibahasa (i18n) Aplikasi Next.js yang Sudah Ada Setelahnya (Panduan i18n 2026)

    Panduan 2026 untuk menambahkan dukungan multibahasa (i18n) pada aplikasi Next.js yang sudah berjalan tanpa refaktor rumit. Ekstraksi otomatis, terjemahan AI, dan routing dengan Intlayer.

    Aymeric PINEAU

    Cara Menemukan Terjemahan yang Hilang Sebelum Pengguna Anda Menemukannya

    Terjemahan yang hilang gagal secara diam-diam. Mengapa fallback menyembunyikannya, empat lapisan deteksi yang benar-benar berfungsi, dan cara menggagalkan build pada kunci yang belum diterjemahkan.

    Aymeric PINEAU

    Solid i18n: why translations freeze on locale change

    Why Solid components capture translations as constants, how @solid-primitives/i18n works, lazy catalogs, SolidStart locale routing, and what Intlayer changes.

    Aymeric PINEAU

    Cara menginternasionalisasi aplikasi Next.js Anda menggunakan next-intl - Panduan lengkap menerjemahkan Translate Next.js 16 with next-intl — App Router Setup

    Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan Next.js 16 situs web Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.

    Aymeric PINEAU

    Postingan Terbaru

    next-intl vs Intlayer: Tolok Ukur & Perbandingan 2026

    Perbandingan mendalam antara next-intl dan Intlayer pada Next.js App Router dan TanStack Start. Ukuran bundle, kebocoran konten, ukuran komponen, hidrasi, dan pengalaman pengembang.

    Aymeric PINEAU

    i18next vs Intlayer: Benchmark & Perbandingan 2026

    react-i18next dan next-i18next diuji terhadap Intlayer pada Next.js dan TanStack Start. Ukuran bundle, kebocoran konten, responsivitas pergantian bahasa, dan pengalaman pengembang.

    Aymeric PINEAU

    Lingui vs Intlayer: Tolok Ukur & Perbandingan 2026

    Dua pustaka i18n berbasis kompiler diuji pada Next.js dan TanStack Start. Ukuran bundle, kebocoran konten, ukuran komponen, hidrasi, reaktivitas pergantian lokal, dan pengalaman pengembang.

    Aymeric PINEAU

    next-intl vs @intlayer/next-intl: API yang Sama, Bundle Berbeda

    Apa yang berubah ketika impor next-intl dari aplikasi Next.js disajikan oleh adapter kompatibilitas @intlayer/next-intl. Ukuran bundle, kebocoran, ukuran komponen dan hidrasi diukur pada kode yang sama, ditambah apa yang adapter pertahankan, abaikan dan tidak dapat gantikan.

    Aymeric PINEAU