@intlayer/docs 8.6.0 → 8.6.10

package/docs/id/bundle_optimization.md

@@ -1,185 +0,0 @@
----
-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,
-  },
-  dictionary: {},
-  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' , 'fetch'` | `'static'`                      | **Deprecated**: Use `dictionary.importMode` instead. 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/my-key/en.json").then(
-      (mod) => mod.default
-    ),
-  fr: () =>
-    import(".intlayer/dynamic_dictionary/my-key/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/it/bundle_optimization.md

@@ -1,185 +0,0 @@
----
-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,
-  },
-  dictionary: {},
-  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' , 'fetch'` | `'static'`                      | **Deprecated**: Use `dictionary.importMode` instead. 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/my-key/en.json").then(
-      (mod) => mod.default
-    ),
-  fr: () =>
-    import(".intlayer/dynamic_dictionary/my-key/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/ja/bundle_optimization.md

@@ -1,185 +0,0 @@
----
-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: "初期履歴"
----
-
-# i18n バンドルサイズとパフォーマンスの最適化
-
-従来のJSONファイルに依存するi18nソリューションで最も一般的な課題の一つは、コンテンツサイズの管理です。開発者が手動でコンテンツをネームスペースに分割しない場合、ユーザーは単一のページを閲覧するためだけに、すべてのページや場合によってはすべての言語の翻訳をダウンロードしてしまうことがよくあります。
-
-例えば、10ページが10言語に翻訳されたアプリケーションでは、ユーザーは実際に必要な**1ページ**（現在の言語の現在のページ）だけでよいにもかかわらず、100ページ分のコンテンツをダウンロードすることになりかねません。これにより、帯域幅の無駄遣いと読み込み時間の遅延が発生します。
-
-> これを検出するには、`rollup-plugin-visualizer`（vite）、`@next/bundle-analyzer`（next.js）、`webpack-bundle-analyzer`（React CRA / Angular / など）といったバンドルアナライザーを使用できます。
-
-**Intlayerはビルド時の最適化によってこの問題を解決します。** コードを解析して、各コンポーネントで実際に使用されている辞書を検出し、必要なコンテンツのみをバンドルに再注入します。
-
-## 目次
-
-<TOC />
-
-## 仕組み
-
-Intlayerは**コンポーネント単位のアプローチ**を採用しています。グローバルなJSONファイルとは異なり、コンテンツはコンポーネントのそばまたは内部に定義されます。ビルドプロセス中にIntlayerは以下を行います：
-
-1.  コードを**解析**して`useIntlayer`の呼び出しを見つけます。
-2.  対応する辞書コンテンツを**構築**します。
-3.  設定に基づいて`useIntlayer`の呼び出しを最適化されたコードに**置き換え**ます。
-
-これにより以下が保証されます：
-
-- コンポーネントがインポートされていなければ、そのコンテンツはバンドルに含まれません（デッドコード削除）。
-- コンポーネントがレイジーロードされる場合、そのコンテンツもレイジーロードされます。
-
-## プラットフォーム別セットアップ
-
-### Next.js
-
-Next.js はビルドに SWC を使用しているため、変換を処理するために `@intlayer/swc` プラグインが必要です。
-
-> このプラグインは、Next.js における SWC プラグインがまだ実験的なため、デフォルトでインストールされています。将来的に変更される可能性があります。
-
-### Vite
-
-Vite は `vite-intlayer` の依存として含まれている `@intlayer/babel` プラグインを使用します。最適化はデフォルトで有効になっています。
-
-### Webpack
-
-Webpack で Intlayer のバンドル最適化を有効にするには、適切な Babel (`@intlayer/babel`) または SWC (`@intlayer/swc`) プラグインをインストールして設定する必要があります。
-
-### Expo / Lynx
-
-このプラットフォームではバンドル最適化は**まだ利用できません**。将来のリリースでサポートが追加される予定です。
-
-## 設定
-
-Intlayerがバンドルを最適化する方法は、`intlayer.config.ts`の`build`プロパティで制御できます。
-
-```typescript fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  dictionary: {},
-  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/ja/configuration.md)
-
-### ビルドオプション
-
-`build`構成オブジェクトの下で利用可能なオプションは以下の通りです：
-
-| プロパティ            | 型                               | デフォルト                      | 説明                                                                                                                                                                                                         |
-| :-------------------- | :------------------------------- | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`optimize`**        | `boolean`                        | `undefined`                     | ビルド最適化を有効にするかどうかを制御します。`true` の場合、Intlayer は辞書呼び出しを最適化されたインジェクトに置き換えます。`false` の場合、最適化は無効になります。通常は本番環境で `true` に設定します。 |
-| **`importMode`**      | `'static' , 'dynamic' , 'fetch'` | `'static'`                      | **Deprecated**: Use `dictionary.importMode` instead. 辞書の読み込み方法を決定します（詳細は以下を参照）。                                                                                                    |
-| **`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/my-key/en.json").then(
-      (mod) => mod.default
-    ),
-  fr: () =>
-    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
-      (mod) => mod.default
-    ),
-});
-```
-
-> `importMode: 'dynamic'` を使用する場合、1ページに `useIntlayer` を使ったコンポーネントが100個あると、ブラウザは100回の個別フェッチを試みます。この「リクエストの滝」を避けるために、コンテンツをより少ない `.content` ファイル（例：ページセクションごとに1つの辞書）にまとめ、アトムコンポーネントごとに分けるのは避けてください。
-
-> 現時点で、`importMode: 'dynamic'` は Vue と Svelte で完全にはサポートされていません。これらのフレームワークでは、今後のアップデートまで `importMode: 'static'` の使用を推奨します。
-
-### 3. ライブモード
-
-動的モードと同様に動作しますが、最初にIntlayer Live Sync APIから辞書を取得しようとします。API呼び出しが失敗した場合やコンテンツがライブ更新用にマークされていない場合は、動的インポートにフォールバックします。
-
-> 詳細はCMSドキュメントをご覧ください: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)
-
-## まとめ: 静的モード vs 動的モード
-
-| 機能                       | 静的モード                               | 動的モード                            |
-| :------------------------- | :--------------------------------------- | :------------------------------------ |
-| **JSバンドルサイズ**       | 大きい（コンポーネントの全言語を含む）   | 最小（コードのみ、コンテンツなし）    |
-| **初期読み込み**           | 即時（コンテンツはバンドル内に含まれる） | わずかな遅延（JSONを取得）            |
-| **ネットワークリクエスト** | 追加リクエストなし                       | 辞書ごとに1リクエスト                 |
-| **ツリーシェイキング**     | コンポーネントレベル                     | コンポーネントレベル + ロケールレベル |
-| **最適な使用例**           | UIコンポーネント、小規模アプリ           | テキスト量が多いページ、多言語対応    |