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

    vue-i18n VERSUS @intlayer/vue-i18n | API yang Sama, Bundle Berbeda

    @intlayer/vue-i18n adalah adapter kompatibilitas: ini mengekspos API vue-i18n (createI18n, useI18n, t(), d(), n(), $t, v-t, i18n.global.locale...) dan melayaninya dari kamus yang dikompilasi oleh Intlayer. File .vue Anda tidak berubah. Apa yang terikat pada t("footer.github") yang berubah.

    Artikel ini mengukur pertukaran tersebut pada aplikasi Vite + Vue 3 yang sama, dibangun sekali dengan vue-i18n dan sekali dengan adapter. Angka-angka tersebut berasal dari Benchmark Bloom. Untuk perbandingan vue-i18n dan Intlayer sebagai library, baca vue-i18n vs Intlayer dan benchmark vue-i18n vs Intlayer. Yang ini tentang apa yang berubah adapter ketika Anda mempertahankan komponen seperti apa adanya.

    tl;dr: Pada aplikasi Vite + Vue 3 yang sama, mengganti vue-i18n dengan @intlayer/vue-i18n mengurangi JavaScript per-halaman dari 134.9 KB menjadi 47.0 KB gzip (aplikasi tanpa i18n berukuran 41.3 KB), runtime dari 24.3 KB menjadi 7.9 KB, rata-rata komponen dari 196 KB menjadi 8.4 KB, dan kebocoran string halaman asing dari 90% menjadi 0%, tanpa mengedit file .vue apa pun. createI18n({ messages }) terus berfungsi sebagai fallback; hapus impor JSON untuk mendapatkan angka di atas. Blok SFC <i18n> dan setLocaleMessage() runtime adalah dua fitur yang tidak terbawa.

    Apa itu @intlayer/vue-i18n

    Lingui vs @intlayer/linguiNext.js

    Komentar

    Belum ada komentar. Jadilah yang pertama membagikan pemikiran Anda.

    Postingan Terkait

    Cara mengotomatisasi terjemahan JSON react-intl Anda menggunakan Intlayer

    Otomatiskan terjemahan JSON Anda dengan Intlayer dan react-intl untuk peningkatan internasionalisasi dalam aplikasi React.

    Aymeric PINEAU

    Hreflang, panduan untuk SEO multibahasa

    Apa itu hreflang, aturan yang diterapkan search engine, mengapa x-default hampir selalu salah, dan cara membuat tag yang benar di Next.js dan TanStack Start.

    Aymeric PINEAU

    i18next vs @intlayer/i18next: API yang Sama, Bundle Berbeda

    Apa yang berubah ketika aplikasi React atau Next.js tetap menggunakan panggilan i18next, react-i18next, dan next-i18next tetapi menyajikannya melalui adapter @intlayer/i18next. JavaScript per halaman, ukuran komponen, kebocoran, dan hidrasi diukur pada kode yang sama, serta apa yang dipertahankan, diabaikan, dan tidak dapat digantikan oleh adapter.

    Aymeric PINEAU

    Alat Internasionalisasi (i18n) Terbaik untuk React Native - Panduan lengkap menerjemahkan React Native i18n 2026: Best Tools for Expo & TypeScript

    Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan React Native aplikasi mobile 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

    vue-i18n vs Intlayer: Benchmark 2026

    vue-i18n dan Intlayer diukur pada aplikasi Vite + Vue 3 yang sama. Ukuran library, JavaScript per-halaman, content leakage, ukuran komponen dan reaktivitas locale-switch, dengan angka-angka yang dijelaskan.

    Aymeric PINEAU