@intlayer/docs 7.3.0-canary.0 → 7.3.1

package/docs/fr/how_works_intlayer.md

@@ -141,7 +141,7 @@ Le package `vue-intlayer` est utilisé pour interpréter les dictionnaires Intla
 
 Le package `nuxt-intlayer` est un module Nuxt permettant de rendre les dictionnaires Intlayer utilisables dans les applications Nuxt. Il intègre des fonctionnalités essentielles pour faire fonctionner Intlayer dans un environnement Nuxt, telles que le middleware de traduction, le routage ou la configuration du fichier `nuxt.config.js`.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 Le package `svelte-intlayer` est utilisé pour interpréter les dictionnaires Intlayer et les rendre utilisables dans les applications Svelte.
 

package/docs/fr/vs_code_extension.md

@@ -42,6 +42,10 @@ Lien de l'extension : [https://marketplace.visualstudio.com/items?itemName=Intla
 
 ## Fonctionnalités
 
+![Extraire le contenu](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Extraire le contenu** – Extrayez le contenu de vos composants React / Vue / Svelte
+
 ![Remplir les dictionnaires](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Navigation instantanée** – Accédez rapidement au fichier de contenu correct en cliquant sur une clé `useIntlayer`.

package/docs/hi/bundle_optimization.md

@@ -0,0 +1,180 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: i18n बंडल आकार और प्रदर्शन का अनुकूलन
+description: अंतर्राष्ट्रीयकरण (i18n) सामग्री को अनुकूलित करके एप्लिकेशन बंडल आकार को कम करें। Intlayer के साथ शब्दकोशों के लिए ट्री शेकिंग और लेज़ी लोडिंग का लाभ उठाना सीखें।
+keywords:
+  - बंडल अनुकूलन
+  - सामग्री स्वचालन
+  - गतिशील सामग्री
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Init history
+---
+
+# i18n बंडल आकार और प्रदर्शन का अनुकूलन
+
+JSON फ़ाइलों पर निर्भर पारंपरिक i18n समाधानों के साथ सबसे आम चुनौतियों में से एक सामग्री के आकार का प्रबंधन है। यदि डेवलपर्स सामग्री को मैन्युअल रूप से namespaces में विभाजित नहीं करते हैं, तो उपयोगकर्ता अक्सर केवल एक पृष्ठ देखने के लिए हर पृष्ठ और संभावित रूप से हर भाषा के अनुवाद डाउनलोड कर लेते हैं।
+
+उदाहरण के लिए, 10 पृष्ठों वाले एक एप्लिकेशन के 10 भाषाओं में अनुवादित होने पर उपयोगकर्ता 100 पृष्ठों की सामग्री डाउनलोड कर सकता है, जबकि उसे केवल **एक** (वर्तमान पृष्ठ वर्तमान भाषा में) की आवश्यकता होती है। इससे बैंडविड्थ की बर्बादी होती है और लोड समय धीमा हो जाता है।
+
+> इसे पता लगाने के लिए, आप `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), या `webpack-bundle-analyzer` (React CRA / Angular / आदि) जैसे बंडल विश्लेषक का उपयोग कर सकते हैं।
+
+**Intlayer इस समस्या को build-time optimization के माध्यम से हल करता है।** यह आपके कोड का विश्लेषण करता है ताकि पता लगाया जा सके कि कौन से डिक्शनरी वास्तव में प्रत्येक कंपोनेंट में उपयोग किए जाते हैं और केवल आवश्यक सामग्री को आपके बंडल में पुनः सम्मिलित करता है।
+
+## विषय सूची
+
+<TOC />
+
+## यह कैसे काम करता है
+
+Intlayer एक **प्रति-कंपोनेंट दृष्टिकोण** का उपयोग करता है। वैश्विक JSON फ़ाइलों के विपरीत, आपकी सामग्री आपके कंपोनेंट्स के साथ या उनके भीतर परिभाषित होती है। बिल्ड प्रक्रिया के दौरान, Intlayer:
+
+1.  आपके कोड का **विश्लेषण** करता है ताकि `useIntlayer` कॉल्स को खोज सके।
+2.  संबंधित डिक्शनरी सामग्री का **निर्माण** करता है।
+3.  आपकी कॉन्फ़िगरेशन के आधार पर `useIntlayer` कॉल को अनुकूलित कोड से **प्रतिस्थापित** करता है।
+
+यह सुनिश्चित करता है कि:
+
+- यदि कोई कंपोनेंट आयातित नहीं है, तो उसकी सामग्री बंडल में शामिल नहीं की जाती (Dead Code Elimination)।
+- यदि कोई कंपोनेंट lazy-loaded है, तो उसकी सामग्री भी lazy-loaded होती है।
+
+## प्लेटफ़ॉर्म द्वारा सेटअप
+
+### Next.js
+
+Next.js को ट्रांसफ़ॉर्मेशन को संभालने के लिए `@intlayer/swc` प्लगइन की आवश्यकता होती है, क्योंकि Next.js बिल्ड के लिए SWC का उपयोग करता है।
+
+> यह प्लगइन डिफ़ॉल्ट रूप से इंस्टॉल होता है क्योंकि SWC प्लगइन्स अभी भी Next.js के लिए प्रायोगिक हैं। भविष्य में इसमें बदलाव हो सकता है।
+
+### Vite
+
+Vite `@intlayer/babel` प्लगइन का उपयोग करता है जो `vite-intlayer` की निर्भरता के रूप में शामिल है। अनुकूलन डिफ़ॉल्ट रूप से सक्षम है।
+
+### Webpack
+
+Webpack पर Intlayer के साथ बंडल अनुकूलन सक्षम करने के लिए, आपको उपयुक्त Babel (`@intlayer/babel`) या SWC (`@intlayer/swc`) प्लगइन को इंस्टॉल और कॉन्फ़िगर करना होगा।
+
+### Expo / Lynx
+
+इस प्लेटफ़ॉर्म के लिए बंडल अनुकूलन **अभी उपलब्ध नहीं है**। समर्थन भविष्य के रिलीज़ में जोड़ा जाएगा।
+
+## कॉन्फ़िगरेशन
+
+आप अपने `intlayer.config.ts` में `build` प्रॉपर्टी के माध्यम से नियंत्रित कर सकते हैं कि Intlayer आपके बंडल को कैसे अनुकूलित करता है।
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  build: {
+    optimize: true,
+    importMode: "static", // या 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> अधिकांश मामलों में `optimize` के लिए डिफ़ॉल्ट विकल्प रखना अनुशंसित है।
+
+> अधिक विवरण के लिए डॉक्यूमेंटेशन कॉन्फ़िगरेशन देखें: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)
+
+### बिल्ड विकल्प
+
+`build` कॉन्फ़िगरेशन ऑब्जेक्ट के तहत निम्नलिखित विकल्प उपलब्ध हैं:
+
+| प्रॉपर्टी             | प्रकार                          | डिफ़ॉल्ट                        | विवरण                                                                                                                                                                                                                                                      |
+| :-------------------- | :------------------------------ | :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`**        | `boolean`                       | `undefined`                     | नियंत्रित करता है कि बिल्ड ऑप्टिमाइज़ेशन सक्षम है या नहीं। यदि `true` है, तो Intlayer डिक्शनरी कॉल्स को ऑप्टिमाइज़्ड इंजेक्ट्स से बदल देता है। यदि `false` है, तो ऑप्टिमाइज़ेशन अक्षम होता है। आदर्श रूप से उत्पादन में इसे `true` पर सेट किया जाना चाहिए। |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | यह निर्धारित करता है कि डिक्शनरी कैसे लोड की जाती हैं (नीचे विवरण देखें)।                                                                                                                                                                                  |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | ग्लोब पैटर्न जो परिभाषित करते हैं कि Intlayer किन फाइलों को ऑप्टिमाइज़ेशन के लिए स्कैन करेगा। इसका उपयोग अप्रासंगिक फाइलों को बाहर करने और बिल्ड को तेज़ करने के लिए करें।                                                                                 |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | निर्मित डिक्शनरी के आउटपुट फॉर्मेट को नियंत्रित करता है।                                                                                                                                                                                                   |
+
+## इम्पोर्ट मोड्स
+
+`importMode` सेटिंग यह निर्धारित करती है कि डिक्शनरी सामग्री आपके कंपोनेंट में कैसे इंजेक्ट की जाती है।
+
+### 1. स्टैटिक मोड (`default`)
+
+स्थैतिक मोड में, Intlayer `useIntlayer` को `useDictionary` से बदल देता है और डिक्शनरी को सीधे JavaScript बंडल में इंजेक्ट करता है।
+
+- **फायदे:** त्वरित रेंडरिंग (सिंक्रोनस), हाइड्रेशन के दौरान कोई अतिरिक्त नेटवर्क अनुरोध नहीं।
+- **नुकसान:** बंडल में उस विशिष्ट कंपोनेंट के लिए **सभी** उपलब्ध भाषाओं के अनुवाद शामिल होते हैं।
+- **सबसे अच्छा:** सिंगल पेज एप्लिकेशन (SPA) के लिए।
+
+**परिवर्तित कोड उदाहरण:**
+
+```tsx
+// आपका कोड
+const content = useIntlayer("my-key");
+
+// ऑप्टिमाइज़्ड कोड (स्थैतिक)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. डायनेमिक मोड
+
+डायनामिक मोड में, Intlayer `useIntlayer` को `useDictionaryAsync` से बदल देता है। यह `import()` (Suspense-जैसे तंत्र) का उपयोग करता है ताकि वर्तमान लोकल के लिए JSON को लेज़ी-लोड किया जा सके।
+
+- **फायदे:** **लोकल-स्तर पर ट्री शेकिंग।** अंग्रेज़ी संस्करण देखने वाला उपयोगकर्ता केवल अंग्रेज़ी डिक्शनरी डाउनलोड करेगा। फ्रेंच डिक्शनरी कभी लोड नहीं होती।
+- **नुकसान:** हाइड्रेशन के दौरान प्रत्येक कंपोनेंट के लिए एक नेटवर्क अनुरोध (एसेट फेच) ट्रिगर होता है।
+- **सबसे अच्छा:** बड़े टेक्स्ट ब्लॉक्स, लेख, या कई भाषाओं का समर्थन करने वाले एप्लिकेशन जहां बंडल का आकार महत्वपूर्ण हो।
+
+**परिवर्तित कोड उदाहरण:**
+
+```tsx
+// आपका कोड
+const content = useIntlayer("my-key");
+
+// अनुकूलित कोड (डायनामिक)
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+});
+```
+
+> जब `importMode: 'dynamic'` का उपयोग किया जाता है, यदि आपके पास एक पेज पर 100 कंपोनेंट्स हैं जो `useIntlayer` का उपयोग करते हैं, तो ब्राउज़र 100 अलग-अलग फेच करने का प्रयास करेगा। इस "वाटरफॉल" अनुरोधों से बचने के लिए, सामग्री को कम `.content` फाइलों में समूहित करें (जैसे, पेज सेक्शन के लिए एक डिक्शनरी) बजाय कि प्रत्येक एटम कंपोनेंट के लिए एक।
+
+> वर्तमान में, `importMode: 'dynamic'` Vue और Svelte के लिए पूरी तरह से समर्थित नहीं है। इन फ्रेमवर्क्स के लिए आगे के अपडेट तक `importMode: 'static'` का उपयोग करने की सलाह दी जाती है।
+
+### 3. लाइव मोड
+
+डायनामिक मोड के समान व्यवहार करता है लेकिन पहले Intlayer लाइव सिंक API से शब्दकोश प्राप्त करने का प्रयास करता है। यदि API कॉल विफल हो जाती है या सामग्री लाइव अपडेट के लिए चिह्नित नहीं है, तो यह डायनामिक इम्पोर्ट पर वापस चला जाता है।
+
+> अधिक जानकारी के लिए CMS दस्तावेज़ देखें: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_CMS.md)
+
+## सारांश: स्टैटिक बनाम डायनामिक
+
+| फीचर                      | स्टैटिक मोड                                        | डायनामिक मोड                           |
+| :------------------------ | :------------------------------------------------- | :------------------------------------- |
+| **JS बंडल आकार**          | बड़ा (कंपोनेंट के लिए सभी भाषाओं को शामिल करता है) | सबसे छोटा (केवल कोड, कोई सामग्री नहीं) |
+| **प्रारंभिक लोड**         | त्वरित (सामग्री बंडल में है)                       | थोड़ा विलंब (JSON प्राप्त करता है)     |
+| **नेटवर्क अनुरोध**        | 0 अतिरिक्त अनुरोध                                  | प्रति शब्दकोश 1 अनुरोध                 |
+| **ट्री शेकिंग**           | कंपोनेंट-स्तर                                      | कंपोनेंट-स्तर + लोकल-स्तर              |
+| **सर्वोत्तम उपयोग मामला** | UI कंपोनेंट्स, छोटे ऐप्स                           | बहुत सारे टेक्स्ट वाले पेज, कई भाषाएँ  |

package/docs/hi/vs_code_extension.md

@@ -42,6 +42,10 @@ history:
 
 ## विशेषताएँ
 
+![सामग्री निकालें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **सामग्री निकालें** – अपने React / Vue / Svelte घटकों से सामग्री निकालें
+
 ![शब्दकोश भरें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **तत्काल नेविगेशन** – `useIntlayer` कुंजी पर क्लिक करने पर सही सामग्री फ़ाइल पर तेजी से जाएं।

package/docs/id/bundle_optimization.md

@@ -0,0 +1,180 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: Mengoptimalkan Ukuran & Performa Bundle i18n
+description: Mengurangi ukuran bundle aplikasi dengan mengoptimalkan konten internasionalisasi (i18n). Pelajari cara memanfaatkan tree shaking dan lazy loading untuk kamus dengan Intlayer.
+keywords:
+  - Optimasi Bundle
+  - Otomasi Konten
+  - Konten Dinamis
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Inisialisasi riwayat
+---
+
+# Mengoptimalkan Ukuran & Performa Bundle i18n
+
+Salah satu tantangan paling umum dengan solusi i18n tradisional yang mengandalkan file JSON adalah mengelola ukuran konten. Jika pengembang tidak secara manual memisahkan konten ke dalam namespace, pengguna sering kali harus mengunduh terjemahan untuk setiap halaman dan berpotensi setiap bahasa hanya untuk melihat satu halaman saja.
+
+Misalnya, sebuah aplikasi dengan 10 halaman yang diterjemahkan ke dalam 10 bahasa mungkin mengakibatkan pengguna mengunduh konten dari 100 halaman, meskipun mereka hanya membutuhkan **satu** (halaman saat ini dalam bahasa saat ini). Hal ini menyebabkan pemborosan bandwidth dan waktu muat yang lebih lambat.
+
+> Untuk mendeteksinya, Anda dapat menggunakan bundle analyzer seperti `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), atau `webpack-bundle-analyzer` (React CRA / Angular / dll).
+
+**Intlayer menyelesaikan masalah ini melalui optimasi saat build.** Intlayer menganalisis kode Anda untuk mendeteksi kamus mana yang benar-benar digunakan per komponen dan hanya menyuntikkan kembali konten yang diperlukan ke dalam bundle Anda.
+
+## Daftar Isi
+
+<TOC />
+
+## Cara Kerjanya
+
+Intlayer menggunakan **pendekatan per-komponen**. Berbeda dengan file JSON global, konten Anda didefinisikan berdampingan atau di dalam komponen Anda. Selama proses build, Intlayer:
+
+1.  **Menganalisis** kode Anda untuk menemukan panggilan `useIntlayer`.
+2.  **Membangun** konten kamus yang sesuai.
+3.  **Mengganti** panggilan `useIntlayer` dengan kode yang dioptimalkan berdasarkan konfigurasi Anda.
+
+Ini memastikan bahwa:
+
+- Jika sebuah komponen tidak diimpor, kontennya tidak disertakan dalam bundle (Eliminasi Kode Mati).
+- Jika sebuah komponen dimuat secara lazy, kontennya juga dimuat secara lazy.
+
+## Setup berdasarkan Platform
+
+### Next.js
+
+Next.js memerlukan plugin `@intlayer/swc` untuk menangani transformasi, karena Next.js menggunakan SWC untuk proses build.
+
+> Plugin ini terpasang secara default karena plugin SWC masih bersifat eksperimental untuk Next.js. Hal ini mungkin akan berubah di masa depan.
+
+### Vite
+
+Vite menggunakan plugin `@intlayer/babel` yang sudah termasuk sebagai dependensi dari `vite-intlayer`. Optimasi ini diaktifkan secara default.
+
+### Webpack
+
+Untuk mengaktifkan optimasi bundle dengan Intlayer pada Webpack, Anda perlu menginstal dan mengonfigurasi plugin Babel (`@intlayer/babel`) atau SWC (`@intlayer/swc`) yang sesuai.
+
+### Expo / Lynx
+
+Optimasi bundle **belum tersedia** untuk platform ini. Dukungan akan ditambahkan pada rilis mendatang.
+
+## Konfigurasi
+
+Anda dapat mengontrol bagaimana Intlayer mengoptimalkan bundle Anda melalui properti `build` di dalam `intlayer.config.ts` Anda.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  build: {
+    optimize: true,
+    importMode: "static", // atau 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> Menjaga opsi default untuk `optimize` direkomendasikan dalam sebagian besar kasus.
+
+> Lihat dokumentasi konfigurasi untuk detail lebih lanjut: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md)
+
+### Opsi Build
+
+Opsi berikut tersedia di bawah objek konfigurasi `build`:
+
+| Properti              | Tipe                            | Default                         | Deskripsi                                                                                                                                                                                                          |
+| :-------------------- | :------------------------------ | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`**        | `boolean`                       | `undefined`                     | Mengontrol apakah optimasi build diaktifkan. Jika `true`, Intlayer menggantikan pemanggilan kamus dengan injeksi yang dioptimalkan. Jika `false`, optimasi dinonaktifkan. Idealnya diatur ke `true` pada produksi. |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | Menentukan bagaimana kamus dimuat (lihat detail di bawah).                                                                                                                                                         |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | Pola glob yang menentukan file mana yang harus dipindai oleh Intlayer untuk optimasi. Gunakan ini untuk mengecualikan file yang tidak terkait dan mempercepat proses build.                                        |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | Mengontrol format output dari kamus yang dibangun.                                                                                                                                                                 |
+
+## Mode Impor
+
+Pengaturan `importMode` menentukan bagaimana konten kamus disuntikkan ke dalam komponen Anda.
+
+### 1. Mode Statis (`default`)
+
+Dalam mode statis, Intlayer menggantikan `useIntlayer` dengan `useDictionary` dan menyuntikkan kamus langsung ke dalam bundle JavaScript.
+
+- **Kelebihan:** Rendering instan (sinkron), tanpa permintaan jaringan tambahan selama hidrasi.
+- **Kekurangan:** Bundle menyertakan terjemahan untuk **semua** bahasa yang tersedia untuk komponen tersebut.
+- **Cocok untuk:** Single Page Applications (SPA).
+
+**Contoh Kode yang Dioptimalkan:**
+
+```tsx
+// Kode Anda
+const content = useIntlayer("my-key");
+
+// Kode yang Dioptimalkan (Statis)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. Mode Dinamis
+
+Dalam mode dinamis, Intlayer menggantikan `useIntlayer` dengan `useDictionaryAsync`. Ini menggunakan `import()` (mekanisme mirip Suspense) untuk memuat malas secara spesifik JSON untuk locale saat ini.
+
+- **Kelebihan:** **Tree shaking tingkat locale.** Pengguna yang melihat versi bahasa Inggris akan _hanya_ mengunduh kamus bahasa Inggris. Kamus bahasa Prancis tidak pernah dimuat.
+- **Kekurangan:** Memicu permintaan jaringan (pengambilan aset) per komponen selama hidrasi.
+- **Terbaik untuk:** Blok teks besar, artikel, atau aplikasi yang mendukung banyak bahasa di mana ukuran bundle sangat penting.
+
+**Contoh Kode yang Dioptimalkan:**
+
+```tsx
+// Kode Anda
+const content = useIntlayer("my-key");
+
+// Kode yang Dioptimalkan (Dinamis)
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+});
+```
+
+> Saat menggunakan `importMode: 'dynamic'`, jika Anda memiliki 100 komponen yang menggunakan `useIntlayer` pada satu halaman, browser akan mencoba melakukan 100 pengambilan terpisah. Untuk menghindari "air terjun" permintaan ini, kelompokkan konten ke dalam lebih sedikit file `.content` (misalnya, satu kamus per bagian halaman) daripada satu per komponen atom.
+
+> Saat ini, `importMode: 'dynamic'` belum sepenuhnya didukung untuk Vue dan Svelte. Disarankan menggunakan `importMode: 'static'` untuk framework ini sampai pembaruan lebih lanjut.
+
+### 3. Mode Live
+
+Berperilaku mirip dengan mode Dynamic tetapi mencoba mengambil kamus dari Intlayer Live Sync API terlebih dahulu. Jika panggilan API gagal atau konten tidak ditandai untuk pembaruan langsung, maka akan kembali ke impor dinamis.
+
+> Lihat dokumentasi CMS untuk detail lebih lanjut: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md)
+
+## Ringkasan: Static vs Dynamic
+
+| Fitur                | Mode Static                                        | Mode Dynamic                              |
+| :------------------- | :------------------------------------------------- | :---------------------------------------- |
+| **Ukuran Bundle JS** | Lebih besar (termasuk semua bahasa untuk komponen) | Paling kecil (hanya kode, tanpa konten)   |
+| **Initial Load**     | Instan (Konten ada dalam bundle)                   | Sedikit penundaan (Mengambil JSON)        |
+| **Network Requests** | 0 permintaan tambahan                              | 1 permintaan per kamus                    |
+| **Tree Shaking**     | Tingkat komponen                                   | Tingkat komponen + tingkat lokal          |
+| **Best Use Case**    | Komponen UI, Aplikasi kecil                        | Halaman dengan banyak teks, Banyak Bahasa |

package/docs/id/how_works_intlayer.md

@@ -146,7 +146,7 @@ Paket `vue-intlayer` digunakan untuk menginterpretasikan kamus Intlayer dan memb
 
 Paket `nuxt-intlayer` adalah modul Nuxt untuk membuat kamus Intlayer dapat digunakan dalam aplikasi Nuxt. Paket ini mengintegrasikan fitur-fitur penting agar Intlayer dapat bekerja di lingkungan Nuxt, seperti middleware terjemahan, routing, atau konfigurasi file `nuxt.config.js`.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 Paket `svelte-intlayer` digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi Svelte.
 

package/docs/id/vs_code_extension.md

@@ -42,6 +42,10 @@ Tautan ekstensi: [https://marketplace.visualstudio.com/items?itemName=Intlayer.i
 
 ## Fitur
 
+![Ekstrak konten](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Ekstrak Konten** – Ekstrak konten dari komponen React / Vue / Svelte Anda
+
 ![Isi kamus](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Navigasi Instan** – Melompat dengan cepat ke file konten yang benar saat mengklik kunci `useIntlayer`.

package/docs/it/bundle_optimization.md

@@ -0,0 +1,180 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: Ottimizzazione della Dimensione e delle Prestazioni del Bundle i18n
+description: Riduci la dimensione del bundle dell'applicazione ottimizzando i contenuti di internazionalizzazione (i18n). Scopri come sfruttare il tree shaking e il lazy loading per i dizionari con Intlayer.
+keywords:
+  - Ottimizzazione del Bundle
+  - Automazione dei Contenuti
+  - Contenuti Dinamici
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Inizializzazione della cronologia
+---
+
+# Ottimizzazione della Dimensione e delle Prestazioni del Bundle i18n
+
+Una delle sfide più comuni con le soluzioni i18n tradizionali basate su file JSON è la gestione della dimensione dei contenuti. Se gli sviluppatori non separano manualmente i contenuti in namespace, gli utenti spesso finiscono per scaricare le traduzioni di ogni pagina e potenzialmente di ogni lingua solo per visualizzare una singola pagina.
+
+Ad esempio, un'applicazione con 10 pagine tradotte in 10 lingue potrebbe far sì che un utente scarichi il contenuto di 100 pagine, anche se ha bisogno solo di **una** (la pagina corrente nella lingua corrente). Questo comporta uno spreco di banda e tempi di caricamento più lenti.
+
+> Per rilevarlo, puoi utilizzare un bundle analyzer come `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js) o `webpack-bundle-analyzer` (React CRA / Angular / ecc).
+
+**Intlayer risolve questo problema attraverso l'ottimizzazione in fase di build.** Analizza il tuo codice per rilevare quali dizionari sono effettivamente utilizzati per ogni componente e reinserisce solo il contenuto necessario nel tuo bundle.
+
+## Indice
+
+<TOC />
+
+## Come Funziona
+
+Intlayer utilizza un **approccio per componente**. A differenza dei file JSON globali, il tuo contenuto è definito accanto o all'interno dei tuoi componenti. Durante il processo di build, Intlayer:
+
+1.  **Analizza** il tuo codice per trovare le chiamate a `useIntlayer`.
+2.  **Costruisce** il contenuto del dizionario corrispondente.
+3.  **Sostituisce** la chiamata a `useIntlayer` con codice ottimizzato basato sulla tua configurazione.
+
+Questo garantisce che:
+
+- Se un componente non è importato, il suo contenuto non viene incluso nel bundle (Eliminazione del codice morto).
+- Se un componente è caricato in modo lazy, anche il suo contenuto viene caricato in modo lazy.
+
+## Configurazione per Piattaforma
+
+### Next.js
+
+Next.js richiede il plugin `@intlayer/swc` per gestire la trasformazione, poiché Next.js utilizza SWC per le build.
+
+> Questo plugin è installato di default perché i plugin SWC sono ancora sperimentali per Next.js. Potrebbe cambiare in futuro.
+
+### Vite
+
+Vite utilizza il plugin `@intlayer/babel` che è incluso come dipendenza di `vite-intlayer`. L'ottimizzazione è abilitata di default.
+
+### Webpack
+
+Per abilitare l'ottimizzazione del bundle con Intlayer su Webpack, è necessario installare e configurare il plugin Babel (`@intlayer/babel`) o SWC (`@intlayer/swc`) appropriato.
+
+### Expo / Lynx
+
+L'ottimizzazione del bundle **non è ancora disponibile** per questa piattaforma. Il supporto sarà aggiunto in una futura release.
+
+## Configurazione
+
+Puoi controllare come Intlayer ottimizza il tuo bundle tramite la proprietà `build` nel tuo file `intlayer.config.ts`.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  build: {
+    optimize: true,
+    importMode: "static", // oppure 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> È consigliato mantenere l'opzione di default per `optimize` nella maggior parte dei casi.
+
+> Consulta la documentazione per maggiori dettagli: [Configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
+
+### Opzioni di Build
+
+Le seguenti opzioni sono disponibili sotto l'oggetto di configurazione `build`:
+
+| Proprietà             | Tipo                            | Predefinito                     | Descrizione                                                                                                                                                                                                                        |
+| :-------------------- | :------------------------------ | :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`**        | `boolean`                       | `undefined`                     | Controlla se l'ottimizzazione della build è abilitata. Se `true`, Intlayer sostituisce le chiamate al dizionario con inject ottimizzati. Se `false`, l'ottimizzazione è disabilitata. Idealmente impostato a `true` in produzione. |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | Determina come vengono caricati i dizionari (vedi dettagli sotto).                                                                                                                                                                 |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | Pattern glob che definiscono quali file Intlayer deve scansionare per l'ottimizzazione. Usalo per escludere file non correlati e velocizzare le build.                                                                             |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | Controlla il formato di output dei dizionari costruiti.                                                                                                                                                                            |
+
+## Modalità di Importazione
+
+L'impostazione `importMode` determina come il contenuto del dizionario viene iniettato nel tuo componente.
+
+### 1. Modalità Statica (`default`)
+
+In modalità statica, Intlayer sostituisce `useIntlayer` con `useDictionary` e inietta il dizionario direttamente nel bundle JavaScript.
+
+- **Vantaggi:** Rendering istantaneo (sincrono), nessuna richiesta di rete aggiuntiva durante l'hydration.
+- **Svantaggi:** Il bundle include le traduzioni per **tutte** le lingue disponibili per quel componente specifico.
+- **Ideale per:** Single Page Applications (SPA).
+
+**Esempio di codice trasformato:**
+
+```tsx
+// Il tuo codice
+const content = useIntlayer("my-key");
+
+// Codice ottimizzato (Statico)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. Modalità Dinamica
+
+In modalità dinamica, Intlayer sostituisce `useIntlayer` con `useDictionaryAsync`. Questo utilizza `import()` (meccanismo simile a Suspense) per caricare pigramente specificamente il JSON per la locale corrente.
+
+- **Vantaggi:** **Tree shaking a livello di locale.** Un utente che visualizza la versione inglese scaricherà _solo_ il dizionario inglese. Il dizionario francese non viene mai caricato.
+- **Svantaggi:** Genera una richiesta di rete (fetch dell'asset) per ogni componente durante l'hydration.
+- **Ideale per:** Blocchi di testo grandi, articoli o applicazioni che supportano molte lingue dove la dimensione del bundle è critica.
+
+**Esempio di codice trasformato:**
+
+```tsx
+// Il tuo codice
+const content = useIntlayer("my-key");
+
+// Codice ottimizzato (Dinamico)
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+});
+```
+
+> Quando si utilizza `importMode: 'dynamic'`, se si hanno 100 componenti che usano `useIntlayer` in una singola pagina, il browser tenterà 100 richieste separate. Per evitare questa "cascata" di richieste, raggruppare il contenuto in meno file `.content` (ad esempio, un dizionario per sezione della pagina) invece di uno per ogni componente atomico.
+
+> Attualmente, `importMode: 'dynamic'` non è completamente supportato per Vue e Svelte. Si consiglia di utilizzare `importMode: 'static'` per questi framework fino a futuri aggiornamenti.
+
+### 3. Modalità Live
+
+Si comporta in modo simile alla modalità Dynamic ma tenta prima di recuperare i dizionari dall'API Intlayer Live Sync. Se la chiamata API fallisce o il contenuto non è contrassegnato per aggiornamenti live, si ricade sull'importazione dinamica.
+
+> Consulta la documentazione CMS per maggiori dettagli: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md)
+
+## Riepilogo: Static vs Dynamic
+
+| Caratteristica           | Modalità Static                                        | Modalità Dynamic                              |
+| :----------------------- | :----------------------------------------------------- | :-------------------------------------------- |
+| **Dimensione Bundle JS** | Più grande (include tutte le lingue per il componente) | Più piccolo (solo codice, nessun contenuto)   |
+| **Caricamento Iniziale** | Istantaneo (Il contenuto è nel bundle)                 | Leggero ritardo (Recupera JSON)               |
+| **Richieste di Rete**    | 0 richieste aggiuntive                                 | 1 richiesta per dizionario                    |
+| **Tree Shaking**         | A livello di componente                                | A livello di componente + a livello di lingua |
+| **Caso d'Uso Migliore**  | Componenti UI, Piccole App                             | Pagine con molto testo, Molte lingue          |

package/docs/it/how_works_intlayer.md

@@ -141,7 +141,7 @@ Il pacchetto `vue-intlayer` è utilizzato per interpretare i dizionari di Intlay
 
 Il pacchetto `nuxt-intlayer` è un modulo Nuxt per rendere utilizzabili i dizionari Intlayer nelle applicazioni Nuxt. Integra funzionalità essenziali per far funzionare Intlayer in un ambiente Nuxt, come il middleware per la traduzione, il routing e la configurazione del file `nuxt.config.js`.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 Il pacchetto `svelte-intlayer` è utilizzato per interpretare i dizionari di Intlayer e renderli utilizzabili nelle applicazioni Svelte.
 

package/docs/it/vs_code_extension.md

@@ -42,6 +42,10 @@ Link all'estensione: [https://marketplace.visualstudio.com/items?itemName=Intlay
 
 ## Funzionalità
 
+![Estrai contenuto](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Estrai Contenuto** – Estrai contenuto dai tuoi componenti React / Vue / Svelte
+
 ![Riempi dizionari](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Navigazione Istantanea** – Passa rapidamente al file di contenuto corretto cliccando su una chiave `useIntlayer`.