@intlayer/docs 9.4.2 → 9.4.3

package/blog/id/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Apakah vue-i18n Sudah Ketinggalan Zaman di Tahun 2026?
+description: vue-i18n telah menjadi standar untuk Vue dan Nuxt selama satu dekade. Namun dalam pengujian tolok ukur kami, pustaka ini menjadi runtime i18n terberat di web. Simak ulasannya.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internasionalisasi
+  - i18n
+  - Vue
+  - Nuxt
+  - Ukuran bundle
+  - Blog
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# 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?
+
+<TOC/>
+
+## 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
+
+| Repositori            | Bintang                                                                                                                                                | Total commit                                                                                                                                                        | Commit / tahun                                                                                                                                                     | Commit terakhir                                                                                                                              |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlify/vue-i18n`    | [![stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/intlify/vue-i18n?style=for-the-badge&label=%2Fyear)](https://github.com/intlify/vue-i18n/commits)       | [![last](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+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).
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+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:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Diuji pada peramban aktual menggunakan kompresi gzip produksi. Data lengkap tercantum di [dokumentasi benchmark Vue](https://intlayer.org/id/doc/benchmark/vue).
+
+### Beban Pustaka Dasar
+
+Beban awal sebelum file terjemahan dimasukkan:
+
+| Pustaka           | Gzipped    | Minified   |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB    |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB** |
+
+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
+
+| Konfigurasi        | Rata-rata JS/hlm (gz) | Kebocoran bahasa | Kebocoran hlm lain | Rata-rata komponen (gz) |
+| ------------------ | --------------------- | ---------------- | ------------------ | ----------------------- |
+| Dasar (tanpa i18n) | 31.5 KB               | 0.0%             | 90.0%              | 0.9 KB                  |
+| `vue-i18n`         | **136.4 KB**          | 50.2%            | 90.0%              | 196.0 KB                |
+| Intlayer           | **59.3 KB**           | 51.1%            | **0.0%**           | **6.5 KB**              |
+
+### 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.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("home.hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+[Kompiler Intlayer](https://intlayer.org/id/doc/compiler) mengenali properti yang diakses dan membersihkan data yang tidak terpakai sebelum chunk klien dibuat. Baca selengkapnya di [optimasi bundle](https://intlayer.org/id/doc/concept/bundle-optimization).
+
+## 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:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="locales/en.json"
+{
+  "hero": {
+    "title": "Ship in every language"
+  }
+}
+```
+
+```json fileName="locales/id.json"
+{
+  "hero": {
+    "title": "Rilis dalam setiap bahasa"
+  }
+}
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+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;
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+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`](https://intlayer.org/id/doc/concept/configuration) akan langsung memicu error build jika ada terjemahan yang terlewat pada bahasa mana pun.
+
+### Ekosistem Alat Bantu dan AI
+
+| Fitur                     | `vue-i18n`               | Intlayer                                                                |
+| ------------------------- | ------------------------ | ----------------------------------------------------------------------- |
+| **Ekstensi VS Code**      | Pihak ketiga (i18n Ally) | ✅ [Ekstensi resmi](https://intlayer.org/id/doc/vs-code-extension)      |
+| **Language Server (LSP)** | ❌ Tidak ada             | ✅ [LSP khusus](https://intlayer.org/id/doc/lsp)                        |
+| **Server MCP untuk AI**   | ❌ Tidak ada             | ✅ [Server MCP bawaan](https://intlayer.org/id/doc/mcp-server)          |
+| **Skill Agen AI**         | ❌ Tidak ada             | ✅ [Skill mandiri](https://intlayer.org/id/doc/agent_skills)            |
+| **CMS Visual in-context** | ❌ Tidak ada             | ✅ [CMS Open Source gratis](https://intlayer.org/id/doc/concept/editor) |
+
+## 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](https://intlayer.org/id/doc/concept/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?
+
+<AccordionGroup>
+<Accordion header="Proyek Nuxt 2/3 yang Sudah Berjalan">
+
+Jika sistem routing telah menyatu erat dengan `@nuxtjs/i18n`, merombak arsitektur mungkin tidak sebanding dengan biayanya.
+
+</Accordion>
+<Accordion header="Kebutuhan ICU yang Rumit">
+
+Jika Anda memanfaatkan format pesan bersarang atau aturan tanggal yang sangat spesifik.
+
+</Accordion>
+<Accordion header="Aplikasi Percobaan Ringan">
+
+Ketika ukuran bundle bukan prioritas penentu keberhasilan produk.
+
+</Accordion>
+</AccordionGroup>
+
+## 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:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx 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`](https://intlayer.org/id/doc/compatibility/vue-i18n) atau [`@nuxtjs/i18n`](https://intlayer.org/id/doc/compatibility/nuxtjs-i18n).
+- **Panduan Langkah Demi Langkah:** Ubah file JSON menjadi kamus terstruktur melalui panduan: [dari vue-i18n](https://intlayer.org/id/doc/migration/vue-i18n) atau [dari @nuxtjs/i18n](https://intlayer.org/id/doc/migration/nuxtjs-i18n).
+- **Pendekatan Bertahap:** Tetap gunakan `vue-i18n` di sisi runtime sembari [memanfaatkan Intlayer bersama vue-i18n](https://intlayer.org/id/blog/intlayer-with-vue-i18n) untuk mendapatkan validasi tipe ketat dan terjemahan AI lokal.
+
+Periksa ukuran bundle dan kebocoran data situs Anda dengan [Pemindai SEO i18n gratis](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Bacaan Pilihan
+
+- [Benchmark Vue & Vite i18n: Evaluasi Mendalam](https://intlayer.org/id/doc/benchmark/vue)
+- [Perbandingan vue-i18n vs Intlayer](https://intlayer.org/id/blog/vue-i18n-vs-intlayer)
+- [Apakah next-intl Sudah Ketinggalan Zaman di Tahun 2026?](https://intlayer.org/id/blog/is-next-intl-outdated)
+- [Internasionalisasi Berbasis Kompiler vs Deklaratif](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)

package/blog/id/list_i18n_technologies/build-tools/vite.md

@@ -0,0 +1,177 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: glob import, chunk, dan pesan waktu kompilasi"
+description: Apa yang benar-benar spesifik untuk Vite dalam i18n. Katalog lazy dengan import.meta.glob, mengapa pemisahan rute jarang bekerja, batas HMR, dan plugin build-time.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - pemisahan kode vite
+  - lazy load terjemahan
+  - plugin vite i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: Bagian yang Terkait dengan Vite, Bukan Framework Anda
+
+Sebagian besar tutorial "Vite i18n" sebenarnya adalah tutorial React atau Vue yang kebetulan menggunakan Vite. Artikel ini membahas lapisan di bawahnya: bagaimana katalog diimpor, apa yang dilakukan Rollup terhadapnya, dan mengapa lazy loading yang Anda tulis kemungkinan besar sebenarnya tidak benar-benar lazy.
+
+## Daftar Isi
+
+<TOC/>
+
+## Impor statis adalah bawaan, dan sifatnya langsung (eager)
+
+Pengaturan paling sederhana mengimpor setiap katalog di baris teratas sebuah modul:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Itu menempatkan tiga katalog di dalam entry chunk utama, di setiap halaman, untuk setiap pengunjung. Tidak masalah untuk dua bahasa dan seratus teks. Pada sepuluh bahasa, ini menjadi pemborosan terbesar yang sebenarnya sangat mudah dihindari dalam bundle Anda.
+
+## `import.meta.glob` dan opsi yang kerap salah dikonfigurasi
+
+Fitur glob import bawaan Vite adalah solusi umumnya:
+
+```ts
+const catalogs = import.meta.glob("./locales/*.json");
+
+export const loadCatalog = async (locale: string) => {
+  const load = catalogs[`./locales/${locale}.json`];
+  return (await load()) as Record<string, string>;
+};
+```
+
+Pemuatan asinkron (lazy) adalah bawaan: setiap entri adalah fungsi yang mengembalikan dynamic import, dan Rollup menghasilkan satu chunk per file. Menambahkan `{ eager: true }` akan menyatukan semua file langsung ke dalam modul pemanggil, yang justru membatalkan optimasi yang Anda inginkan:
+
+```ts
+// Semua bahasa digabungkan ke dalam entry chunk. Hampir tidak pernah diinginkan:
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+Jebakannya adalah kedua versi berjalan mulus di lingkungan dev, karena Vite melayani modul secara terpisah tanpa dibundel. Perbedaannya baru terlihat di dalam direktori `dist`. Uji dengan `npx vite build && npx vite preview`, lalu periksa apa saja yang sebenarnya masuk ke dalam entry chunk.
+
+## Pemisahan per rute jarang memisahkan katalog secara nyata
+
+Ini adalah bagian yang kerap mengejutkan pengembang. Anda memisahkan katalog berdasarkan halaman:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Kemudian dua rute berbeda sama-sama mengimpor `checkout.json`, dan Rollup mengangkat file tersebut ke dalam chunk bersama (shared chunk) yang diunduh di kedua halaman. Pembagian chunk oleh Rollup digerakkan oleh graf modul, bukan oleh struktur folder Anda: modul apa pun yang dapat dijangkau dari lebih dari satu titik masuk akan dijadikan dependensi bersama. Menambahkan rute ketiga tidak mengubah apa pun, dan rute keempat mungkin mengubah pola pembagian secara tak terduga.
+
+Oleh karena itu, pemisahan katalog per rute hanya berlaku jika graf impor benar-benar terpisah total. Jika ukuran bundle penting, lakukan pengukuran nyata dengan alat analisis:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Jika Anda terpaksa mengunci batas-batas chunk, opsi `build.rollupOptions.output.manualChunks` adalah jalan keluar darurat, dengan konsekuensi pemeliharaan konfigurasi manual.
+
+## Katalog tidak mendukung Hot Reload (HMR) secara otomatis
+
+Ubah komponen, Vite langsung memperbaruinya di layar. Ubah `locales/fr.json`, dan tergantung pada cara impornya, tidak ada yang terjadi. File JSON yang diimpor secara dinamis tidak memiliki batas HMR bawaan, sehingga graf modul tidak tahu bagaimana cara membatalkan komponen yang menggunakannya.
+
+Banyak tim mengatasi hal ini dengan me-restart server dev setiap kali mengedit teks. Solusi yang benar ada pada plugin i18n: plugin harus menangani pembaruan HMR dan menyalurkan pesan terbaru ke aplikasi yang sedang berjalan. Saat memilih pustaka, pastikan plugin Vite-nya memiliki kapabilitas ini.
+
+## `define` mengunci bahasa secara permanen saat kompilasi
+
+Sangat menggoda untuk menetapkan locale bawaan saat proses build:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` melakukan penggantian teks secara literal saat kompilasi. Nilai yang ada saat proses build adalah nilai yang dikirim ke pengguna, sehingga memaksa Anda membuat satu build terpisah per bahasa. Ini adalah strategi yang valid (seperti yang diterapkan oleh i18n resmi Angular), tetapi bukan yang Anda inginkan jika satu penyebaran harus melayani semua bahasa secara dinamis.
+
+Untuk nilai yang perlu bervariasi pada setiap permintaan pengguna, hindari `define` dan evaluasi pada waktu proses (runtime).
+
+## Memindahkan penguraian pesan ke waktu kompilasi
+
+Semua solusi yang matang di ekosistem ini bermuara pada langkah yang sama: berhenti mengurai pesan di dalam browser.
+
+| Plugin                       | Apa yang dipindahkan ke waktu build                                       |
+| :--------------------------- | :------------------------------------------------------------------------ |
+| `@intlify/unplugin-vue-i18n` | Mengompilasi pesan vue-i18n ke fungsi render (bundle ringan runtime-only) |
+| Lingui (makro + plugin)      | Mengekstrak dan mengompilasi katalog, mengganti makro dengan ID pesan     |
+| Paraglide (inlang)           | Mengompilasi setiap pesan ke dalam fungsi tree-shakable tersendiri        |
+| `vite-intlayer`              | Membangun kamus per komponen, membuang (purge) dan meminifikasi kunci     |
+
+Keuntungannya ganda: modul kompiler pesan tidak lagi disertakan ke dalam browser, dan entri yang tidak terpakai dapat dibuang secara statis. Konsekuensinya: server dev dan CI Anda harus menjalankan plugin tersebut, dan eksekusi `tsc` murni atau runner tes non-Vite akan membutuhkan konfigurasi tambahan.
+
+## SSR: jangan simpan status bahasa di tingkat modul
+
+Jika Anda menerapkan SSR (baik melalui framework atau `vite-plugin-ssr`), aturan terpenting adalah: variabel tingkat modul yang menyimpan locale saat ini akan dibagikan ke seluruh permintaan bersamaan pada proses server tersebut.
+
+```ts
+// Aman di browser. Kebocoran data antar-permintaan di server:
+export let currentLocale = "en";
+```
+
+Dua pengguna yang mengakses server pada saat bersamaan akan mengalami race condition, dan salah satu dari mereka akan menerima bahasa milik pengguna lainnya. Bug ini tidak muncul saat pengujian lokal karena hanya ada Anda sendiri. Tentukan locale per permintaan dan teruskan secara eksplisit melalui context atau request-local storage milik framework.
+
+## Plugin Vite dari Intlayer
+
+Intlayer mendaftarkan satu plugin terintegrasi yang menangani kompilasi kamus, pengawasan mode dev, dan saluran optimasi:
+
+```ts fileName="vite.config.ts"
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+Penulisan ulang impor, pembersihan (purge), dan minifikasi sudah aktif secara default. Dua pengaturan penting berada di `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // membuang bidang teks yang tidak dibaca oleh komponen mana pun
+    minify: true, // mengganti nama kunci konten menjadi alias ringkas
+  },
+};
+
+export default config;
+```
+
+Karena teks dideklarasikan berdampingan dengan komponen alih-alih dalam file global raksasa, proses pembersihan mengandalkan graf modul nyata sehingga penghapusan kode mati terjamin keamanannya. Rincian selengkapnya di [optimasi bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/bundle_optimization.md).
+
+## Kesalahan umum
+
+- **`{ eager: true }` pada glob yang seharusnya lazy.** Bekerja di dev, memuat seluruh bahasa sekaligus di produksi.
+- **Berharap struktur folder otomatis membagi chunk.** Rollup mengikuti alur impor, bukan nama folder.
+- **Me-restart server dev demi melihat perubahan teks.** Pertanda absennya penanganan HMR di plugin.
+- **Memasukkan locale ke dalam `define`.** Memaksa pembuatan satu build terpisah untuk tiap bahasa.
+- **Status bahasa di tingkat modul pada SSR.** Menimbulkan kebocoran data antar-permintaan pengguna.
+- **Mengukur performa bundle di server dev.** Modul tanpa bundel tidak mencerminkan bundle produksi.
+
+## Pelajari lebih lanjut
+
+- [Optimasi bundle: pembersihan, minifikasi, dan muatan akhir peramban](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/bundle_optimization.md)
+- [Laporan benchmark performa antar-framework](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/benchmark/index.md)
+- [Referensi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)
+- [Menyiapkan Intlayer dengan Vite dan React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+react.md)
+- [Adapter kompatibilitas i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compat/i18next.md)
+- [React i18n: bagaimana model provider bekerja](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: cara kerja dan kendalanya](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/list_i18n_technologies/frameworks/vue.md)
+- [i18n per komponen vs i18n terpusat](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/per-component_vs_centralized_i18n.md)

package/blog/id/list_i18n_technologies/frameworks/angular.md

@@ -25,8 +25,6 @@ Di dunia yang saling terhubung saat ini, menawarkan situs web Anda dalam berbaga
 
 ---
 
-![ilustrasi i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Apa itu Internasionalisasi (i18n)?
 
 Internasionalisasi, yang sering disebut sebagai i18n, adalah proses merancang dan mempersiapkan aplikasi Anda untuk mendukung berbagai bahasa dan konteks budaya. Dalam Angular, ini melibatkan konfigurasi aplikasi Anda sehingga teks, tanggal, angka, dan bahkan tata letak UI dapat beradaptasi dengan mulus ke berbagai lokal. Menyiapkan dasar ini dengan benar memastikan bahwa integrasi terjemahan di masa depan tetap terorganisir dan efisien.

package/blog/id/list_i18n_technologies/frameworks/react-native.md

@@ -25,8 +25,6 @@ Dalam pasar yang semakin global, menghadirkan aplikasi React Native Anda dalam b
 
 ---
 
-![ilustrasi i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Apa itu Internasionalisasi (i18n)?
 
 Internasionalisasi, atau i18n, melibatkan penyusunan aplikasi agar dapat dengan mudah beradaptasi dengan berbagai bahasa, format regional, dan norma budaya. Dalam React Native, i18n mencakup penanganan string untuk tombol dan label, serta pemformatan tanggal, waktu, mata uang, dan lainnya sesuai dengan lokal pengguna. Aplikasi React Native yang disiapkan dengan baik memungkinkan Anda mengintegrasikan bahasa tambahan dan perilaku spesifik lokal secara mulus di kemudian hari tanpa perlu refaktor besar-besaran.

package/blog/id/list_i18n_technologies/frameworks/react.md

@@ -25,8 +25,6 @@ Di lanskap digital saat ini, memperluas jangkauan situs web Anda untuk melayani
 
 ---
 
-![ilustrasi i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Apa itu Internasionalisasi (i18n)?
 
 Internasionalisasi, disingkat i18n, adalah proses merancang dan mempersiapkan situs web Anda untuk mendukung berbagai bahasa dan konteks budaya. Dalam React, ini berarti mengatur aplikasi Anda sehingga string, format tanggal, format angka, dan bahkan tata letak dapat dengan mudah disesuaikan untuk pengguna dari berbagai wilayah. Mempersiapkan aplikasi React Anda untuk i18n meletakkan dasar untuk mengintegrasikan terjemahan dan fitur lokalisasi lainnya dengan rapi.

package/blog/id/list_i18n_technologies/frameworks/svelte.md

@@ -25,8 +25,6 @@ Seiring web terus menghubungkan orang-orang di seluruh dunia, menyediakan konten
 
 ---
 
-![ilustrasi i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Apa itu Internasionalisasi (i18n)?
 
 Internasionalisasi, yang biasa disingkat i18n, adalah proses merancang dan membangun aplikasi Anda agar dapat dengan mudah beradaptasi dengan berbagai bahasa, wilayah, dan konvensi budaya. Dalam Svelte, ini biasanya berarti menyiapkan string terjemahan, melokalisasi tanggal, waktu, dan angka, serta memastikan antarmuka pengguna dapat beralih secara dinamis di antara berbagai locale tanpa perlu penulisan ulang kode yang besar.

package/blog/id/list_i18n_technologies/frameworks/vue.md

@@ -25,8 +25,6 @@ Dalam lanskap digital yang semakin mengglobal, memperluas jangkauan situs web Vu
 
 ---
 
-![ilustrasi i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Apa itu Internasionalisasi (i18n)?
 
 Internasionalisasi (i18n) adalah praktik mempersiapkan aplikasi perangkat lunak (atau situs web) untuk berbagai bahasa dan konvensi budaya. Dalam ekosistem Vue.js, ini mencakup penetapan bagaimana teks, tanggal, angka, mata uang, dan elemen lain yang dapat dilokalisasi dapat disesuaikan dengan berbagai lokal. Dengan mengatur i18n sejak awal, Anda memastikan struktur yang terorganisir dan skalabel untuk menambahkan bahasa baru serta menangani kebutuhan lokalisasi di masa depan.

package/blog/id/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # Apa itu Internasionalisasi (i18n)? Definisi dan tantangan
 
-![ilustrasi i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Memahami Internasionalisasi (i18n)
 
 **Internasionalisasi**, yang sering disingkat sebagai **i18n**, adalah proses merancang dan mempersiapkan sebuah aplikasi untuk mendukung berbagai bahasa, budaya, dan konvensi regional **tanpa** perubahan besar pada basis kode. Nama i18n berasal dari fakta bahwa terdapat 18 huruf antara **i** dan **n** dalam kata “internationalization.”