@intlayer/docs 8.6.0 → 8.6.10

package/docs/ru/bundle_optimization.md

@@ -1,185 +0,0 @@
----
-createdAt: 2025-11-25
-updatedAt: 2025-11-25
-title: Оптимизация размера и производительности i18n-бандла
-description: Сократите размер бандла приложения, оптимизируя контент интернационализации (i18n). Узнайте, как использовать tree shaking и ленивую загрузку словарей с Intlayer.
-keywords:
-  - Оптимизация бандла
-  - Автоматизация контента
-  - Динамический контент
-  - Intlayer
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - concept
-  - bundle-optimization
-history:
-  - version: 6.0.0
-    date: 2025-11-25
-    changes: "Инициализация истории"
----
-
-# Оптимизация размера и производительности i18n-бандла
-
-Одна из самых распространённых проблем традиционных решений i18n, основанных на JSON-файлах,, это управление размером контента. Если разработчики не разделяют контент вручную по namespace, пользователи часто загружают переводы для каждой страницы и, возможно, для каждого языка, чтобы просмотреть всего одну страницу.
-
-Например, приложение с 10 страницами, переведёнными на 10 языков, может привести к тому, что пользователь загрузит контент 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 требует плагин `@intlayer/swc` для обработки трансформации, так как Next.js использует SWC для сборки.
-
-> Этот плагин установлен по умолчанию, поскольку плагины SWC для Next.js всё ещё находятся в экспериментальной стадии. В будущем это может измениться.
-
-### Vite
-
-Vite использует плагин `@intlayer/babel`, который включён как зависимость в `vite-intlayer`. Оптимизация включена по умолчанию.
-
-### Webpack
-
-Чтобы включить оптимизацию бандла с Intlayer в Webpack, необходимо установить и настроить соответствующий плагин Babel (`@intlayer/babel`) или SWC (`@intlayer/swc`).
-
-### Expo / Lynx
-
-Оптимизация бандла **пока недоступна** для этой платформы. Поддержка будет добавлена в будущих релизах.
-
-## Конфигурация
-
-Вы можете управлять тем, как Intlayer оптимизирует ваш бандл, через свойство `build` в вашем файле `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", // или 'dynamic' - режим импорта
-    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"], // шаблоны обхода файлов
-  },
-};
-
-export default config;
-```
-
-> Рекомендуется сохранять значение по умолчанию для `optimize` в большинстве случаев.
-
-> Подробнее о конфигурации смотрите в документации: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/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-файла конкретно для текущей локали.
-
-- **Преимущества:** **Tree shaking на уровне локали.** Пользователь, просматривающий английскую версию, загрузит _только_ английский словарь. Французский словарь никогда не загружается.
-- **Недостатки:** Во время гидратации для каждого компонента выполняется сетевой запрос (загрузка ассета).
-- **Лучше всего подходит для:** Больших текстовых блоков, статей или приложений, поддерживающих множество языков, где критичен размер бандла.
-
-**Пример преобразованного кода:**
-
-```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'`, если на одной странице 100 компонентов используют `useIntlayer`, браузер попытается выполнить 100 отдельных запросов. Чтобы избежать такой "водопадной" загрузки, группируйте контент в меньшее количество файлов `.content` (например, один словарь на секцию страницы), а не по одному на каждый атомарный компонент.
-
-> В настоящее время `importMode: 'dynamic'` не полностью поддерживается для Vue и Svelte. Рекомендуется использовать `importMode: 'static'` для этих фреймворков до выхода дальнейших обновлений.
-
-### 3. Live Mode
-
-Ведет себя аналогично динамическому режиму, но сначала пытается получить словари через Intlayer Live Sync API. Если вызов API не удался или контент не помечен для живых обновлений, происходит возврат к динамическому импорту.
-
-> Подробнее смотрите в документации CMS: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md)
-
-## Сводка: Статический vs Динамический
-
-| Особенность            | Статический режим                          | Динамический режим                                  |
-| :--------------------- | :----------------------------------------- | :-------------------------------------------------- |
-| **Размер JS-бандла**   | Больше (включает все языки для компонента) | Самый маленький (только код, без контента)          |
-| **Начальная загрузка** | Мгновенно (контент включен в бандл)        | Небольшая задержка (загрузка JSON)                  |
-| **Сетевые запросы**    | 0 дополнительных запросов                  | 1 запрос на каждый словарь                          |
-| **Tree Shaking**       | На уровне компонента                       | На уровне компонента + локали                       |
-| **Лучшее применение**  | UI-компоненты, небольшие приложения        | Страницы с большим количеством текста, много языков |

package/docs/tr/bundle_optimization.md

@@ -1,184 +0,0 @@
----
-createdAt: 2025-11-25
-updatedAt: 2025-11-25
-title: i18n Paket Boyutu ve Performansını Optimize Etme
-description: Uluslararasılaştırma (i18n) içeriğini optimize ederek uygulama paket boyutunu azaltın. Intlayer ile sözlüklerde tree shaking ve lazy loading nasıl kullanılır öğrenin.
-keywords:
-  - Paket Optimizasyonu
-  - İçerik Otomasyonu
-  - Dinamik İçerik
-  - Intlayer
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - concept
-  - bundle-optimization
-history:
-  - version: 6.0.0
-    date: 2025-11-25
-    changes: "Başlangıç geçmişi"
----
-
-# i18n Paket Boyutu ve Performansını Optimize Etme
-
-JSON dosyalarına dayanan geleneksel i18n çözümlerinde en yaygın zorluklardan biri içerik boyutunu yönetmektir. Geliştiriciler içeriği manuel olarak namespace'lere ayırmazsa, kullanıcılar genellikle tek bir sayfayı görüntülemek için her sayfanın ve potansiyel olarak her dilin çevirilerini indirirler.
-
-Örneğin, 10 sayfadan oluşan ve 10 dile çevrilmiş bir uygulamada, kullanıcı yalnızca **bir** sayfaya (mevcut dildeki mevcut sayfa) ihtiyaç duysa bile, 100 sayfanın içeriğini indirmek zorunda kalabilir. Bu durum, gereksiz bant genişliği kullanımına ve daha yavaş yükleme sürelerine yol açar.
-
-> Bunu tespit etmek için `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js) veya `webpack-bundle-analyzer` (React CRA / Angular / vb.) gibi bundle analizörleri kullanabilirsiniz.
-
-**Intlayer bu sorunu derleme zamanı optimizasyonu ile çözer.** Kodunuzu analiz ederek her bileşen için hangi sözlüklerin gerçekten kullanıldığını tespit eder ve yalnızca gerekli içeriği paketinizin içine yeniden enjekte eder.
-
-## İçindekiler
-
-<TOC />
-
-## Nasıl Çalışır
-
-Intlayer, **bileşen başına yaklaşım** kullanır. Küresel JSON dosyalarının aksine, içeriğiniz bileşenlerinizin yanında veya içinde tanımlanır. Derleme sürecinde Intlayer:
-
-1.  `useIntlayer` çağrılarını bulmak için kodunuzu **analiz eder**.
-2.  İlgili sözlük içeriğini **oluşturur**.
-3.  `useIntlayer` çağrısını yapılandırmanıza bağlı olarak optimize edilmiş kodla **değiştirir**.
-
-Bu, şunları garanti eder:
-
-- Bir bileşen içe aktarılmamışsa, içeriği pakete dahil edilmez (Ölü Kod Eliminasyonu).
-- Bir bileşen tembel yükleniyorsa, içeriği de tembel yüklenir.
-
-## Platforma Göre Kurulum
-
-### Next.js
-
-Next.js, dönüşümü yönetmek için `@intlayer/swc` eklentisini gerektirir, çünkü Next.js derlemeler için SWC kullanır.
-
-> Bu eklenti varsayılan olarak yüklüdür çünkü SWC eklentileri Next.js için hâlâ deneysel durumdadır. Gelecekte değişebilir.
-
-### Vite
-
-Vite, `vite-intlayer` bağımlılığı olarak dahil edilen `@intlayer/babel` eklentisini kullanır. Optimizasyon varsayılan olarak etkinleştirilmiştir.
-
-### Webpack
-
-Webpack üzerinde Intlayer ile paket optimizasyonunu etkinleştirmek için uygun Babel (`@intlayer/babel`) veya SWC (`@intlayer/swc`) eklentisini yükleyip yapılandırmanız gerekir.
-
-### Expo / Lynx
-
-Bu platform için paket optimizasyonu **henüz mevcut değildir**. Destek gelecekteki bir sürümde eklenecektir.
-
-## Yapılandırma
-
-Intlayer'ın paket optimizasyonunu `intlayer.config.ts` dosyanızdaki `build` özelliği aracılığıyla kontrol edebilirsiniz.
-
-```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,
-    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
-  },
-};
-
-export default config;
-```
-
-> `optimize` için varsayılan seçeneğin korunması çoğu durumda önerilir.
-
-> Daha fazla detay için doküman yapılandırmasına bakınız: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md)
-
-### Build Seçenekleri
-
-`build` yapılandırma nesnesi altında aşağıdaki seçenekler mevcuttur:
-
-| Özellik               | Tür                              | Varsayılan                      | Açıklama                                                                                                                                                                                                                                             |
-| :-------------------- | :------------------------------- | :------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`optimize`**        | `boolean`                        | `undefined`                     | Derleme optimizasyonunun etkin olup olmadığını kontrol eder. `true` ise, Intlayer sözlük çağrılarını optimize edilmiş enjeksiyonlarla değiştirir. `false` ise optimizasyon devre dışı bırakılır. Üretimde ideal olarak `true` olarak ayarlanmalıdır. |
-| **`importMode`**      | `'static' , 'dynamic' , 'fetch'` | `'static'`                      | **Deprecated**: Use `dictionary.importMode` instead. Sözlüklerin nasıl yükleneceğini belirler (detaylar aşağıda).                                                                                                                                    |
-| **`traversePattern`** | `string[]`                       | `['**/*.{js,ts,jsx,tsx}', ...]` | Intlayer'ın optimizasyon için taraması gereken dosyaları tanımlayan glob desenleri. İlgisiz dosyaları hariç tutmak ve derlemeleri hızlandırmak için bunu kullanın.                                                                                   |
-| **`outputFormat`**    | `'esm', 'cjs'`                   | `'esm', 'cjs'`                  | Oluşturulan sözlüklerin çıktı formatını kontrol eder.                                                                                                                                                                                                |
-
-## İçe Aktarım Modları
-
-`importMode` ayarı, sözlük içeriğinin bileşeninize nasıl enjekte edileceğini belirler.
-
-### 1. Statik Mod (`default`)
-
-Statik modda, Intlayer `useIntlayer`'ı `useDictionary` ile değiştirir ve sözlüğü doğrudan JavaScript paketine enjekte eder.
-
-- **Avantajlar:** Anında render (eşzamanlı), hydration sırasında ekstra ağ isteği yok.
-- **Dezavantajlar:** Paket, o belirli bileşen için mevcut **tüm** dillerin çevirilerini içerir.
-- **En uygun:** Tek Sayfa Uygulamaları (SPA).
-
-**Dönüştürülmüş Kod Örneği:**
-
-```tsx
-// Kodunuz
-const content = useIntlayer("my-key");
-
-// Optimize edilmiş kod (Statik)
-const content = useDictionary({
-  key: "my-key",
-  content: {
-    nodeType: "translation",
-    translation: {
-      en: "My title",
-      fr: "Mon titre",
-    },
-  },
-});
-```
-
-### 2. Dinamik Mod
-
-Dinamik modda, Intlayer `useIntlayer`'ı `useDictionaryAsync` ile değiştirir. Bu, `import()` (Suspense benzeri mekanizma) kullanarak mevcut yerel ayar için JSON'u tembel yükler.
-
-- **Avantajlar:** **Yerel düzeyde tree shaking.** İngilizce sürümü görüntüleyen bir kullanıcı sadece İngilizce sözlüğü indirir. Fransızca sözlük asla yüklenmez.
-- **Dezavantajlar:** Hydration sırasında her bileşen için bir ağ isteği (varlık alma) tetikler.
-- **En uygun:** Paket boyutunun kritik olduğu, çok sayıda dili destekleyen büyük metin blokları, makaleler veya uygulamalar için.
-
-**Dönüştürülmüş Kod Örneği:**
-
-```tsx
-// Kodunuz
-const content = useIntlayer("my-key");
-
-// Optimize edilmiş kod (Dinamik)
-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'` kullanıldığında, tek bir sayfada `useIntlayer` kullanan 100 bileşen varsa, tarayıcı 100 ayrı fetch denemesi yapacaktır. Bu istek "şelalesi"nden kaçınmak için içeriği daha az sayıda `.content` dosyasına (örneğin, sayfa bölümü başına bir sözlük) gruplayın, atom bileşen başına değil.
-
-> Şu anda, `importMode: 'dynamic'` Vue ve Svelte için tam olarak desteklenmemektedir. Bu çerçeveler için ek güncellemelere kadar `importMode: 'static'` kullanılması önerilir.
-
-### 3. Canlı Mod (Live Mode)
-
-Dinamik moda benzer şekilde davranır ancak önce sözlükleri Intlayer Live Sync API'den getirmeye çalışır. Eğer API çağrısı başarısız olursa veya içerik canlı güncellemeler için işaretlenmemişse, dinamik import yöntemine geri döner.
-
-> Daha fazla detay için CMS dokümantasyonuna bakınız: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_CMS.md)
-
-## Özet: Statik vs Dinamik
-
-| Özellik             | Statik Mod                                   | Dinamik Mod                             |
-| :------------------ | :------------------------------------------- | :-------------------------------------- |
-| **JS Paket Boyutu** | Daha büyük (bileşen için tüm dilleri içerir) | En küçük (sadece kod, içerik yok)       |
-| **İlk Yükleme**     | Anında (İçerik pakette)                      | Hafif gecikme (JSON çeker)              |
-| **Ağ İstekleri**    | Ekstra 0 istek                               | Her sözlük için 1 istek                 |
-| **Tree Shaking**    | Bileşen seviyesi                             | Bileşen seviyesi + Dil seviyesi         |
-| **En İyi Kullanım** | UI Bileşenleri, Küçük Uygulamalar            | Çok metin içeren sayfalar, Çoklu Diller |

package/docs/uk/bundle_optimization.md

@@ -1,186 +0,0 @@
----
-createdAt: 2025-11-25
-updatedAt: 2025-11-25
-title: Оптимізація розміру бандла та продуктивності i18n
-description: Зменшіть розмір бандла застосунку, оптимізуючи контент інтернаціоналізації (i18n). Дізнайтесь, як використовувати tree shaking та lazy loading для словників з Intlayer.
-keywords:
-  - Оптимізація bundle
-  - Автоматизація контенту
-  - Динамічний контент
-  - Intlayer
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - concept
-  - bundle-optimization
-history:
-  - version: 6.0.0
-    date: 2025-11-25
-    changes: "Init history"
----
-
-# Оптимізація розміру бандла та продуктивності i18n
-
-Одна з найпоширеніших проблем традиційних i18n-рішень, що базуються на JSON-файлах, це керування розміром контенту. Якщо розробники не розділяють контент вручну по неймспейсах, користувачі часто в кінцевому підсумку завантажують переклади для всіх сторінок і, можливо, для всіх мов лише для перегляду однієї сторінки.
-
-Наприклад, застосунок з 10 сторінками, перекладеними на 10 мов, може призвести до того, що користувач завантажує контент 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` на оптимізований код відповідно до вашої конфігурації.
-
-Це гарантує, що:
-
-- Якщо компонент не імпортується, його вміст не включається до бандла (видалення мертвого коду. 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
-
-Щоб увімкнути оптимізацію бандла з Intlayer на Webpack, потрібно встановити та налаштувати відповідний плагін Babel (`@intlayer/babel`) або SWC (`@intlayer/swc`).
-
-### Expo / Lynx
-
-Оптимізація бандла **ще недоступна** для цієї платформи. Підтримка буде додана в майбутньому релізі.
-
-## Конфігурація
-
-Ви можете контролювати, як Intlayer оптимізує ваш бандл через властивість `build` у файлі `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", // або 'dynamic'
-    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
-  },
-};
-
-export default config;
-```
-
-> У більшості випадків рекомендовано залишати опцію `optimize` за замовчуванням.
-
-> Див. документацію з конфігурації для більш детальної інформації: [Конфігурація](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md)
-
-### Параметри збірки
-
-Наступні параметри доступні в об'єкті конфігурації `build`:
-
-| Властивість           | Тип                              | Значення за замовчуванням       | Опис                                                                                                                                                                                                              |
-| :-------------------- | :------------------------------- | :------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`optimize`**        | `boolean`                        | `undefined`                     | Керує тим, чи увімкнена оптимізація під час збірки. Якщо `true`, Intlayer замінює виклики словників на оптимізовані інжекти. Якщо `false`, оптимізація вимкнена. Рекомендовано встановлювати `true` у production. |
-| **`importMode`**      | `'static' , 'dynamic' , 'fetch'` | `'static'`                      | **Deprecated**: Use `dictionary.importMode` instead. Визначає, як завантажуються словники (див. деталі нижче).                                                                                                    |
-| **`traversePattern`** | `string[]`                       | `['**/*.{js,ts,jsx,tsx}', ...]` | Glob-шаблони, що визначають, які файли 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: {
-      uk: "Мій заголовок",
-      en: "My title",
-      fr: "Mon titre",
-    },
-  },
-});
-```
-
-### 2. Динамічний режим
-
-У динамічному режимі Intlayer замінює `useIntlayer` на `useDictionaryAsync`. Це використовує `import()` (механізм, схожий на Suspense) для лінивого підвантаження саме JSON для поточної локалі.
-
-- **Плюси:** **Tree-shaking на рівні локалі.** Користувач, який переглядає англійську версію, завантажить _лише_ англійський словник. Французький словник ніколи не завантажується.
-- **Мінуси:** Під час гідратації ініціюється мережевий запит (завантаження ресурсу) для кожного компонента.
-- **Кращий вибір для:** Великих текстових блоків, статей або застосунків з підтримкою багатьох мов, де розмір бандла критично важливий.
-
-**Приклад трансформованого коду:**
-
-```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'`, якщо на одній сторінці 100 компонентів використовують `useIntlayer`, браузер спробує виконати 100 окремих запитів. Щоб уникнути цього «водоспаду» запитів, групуйте контент у меншу кількість `.content` файлів (наприклад, по одному словнику на секцію сторінки), замість одного файлу на кожен атом-компонент.
-
-> Наразі `importMode: 'dynamic'` не повністю підтримується для Vue та Svelte. Рекомендується використовувати `importMode: 'static'` для цих фреймворків до наступних оновлень.
-
-### 3. Живий режим
-
-Працює аналогічно динамічному режиму, але спочатку намагається отримати словники з Intlayer Live Sync API. Якщо виклик API не вдасться або вміст не позначено для живих оновлень, виконується відкат до динамічного імпорту.
-
-> Див. документацію CMS для детальнішої інформації: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md)
-
-## Підсумок: Статичний vs Динамічний
-
-| Особливість                | Статичний режим                           | Динамічний режим                                |
-| :------------------------- | :---------------------------------------- | :---------------------------------------------- |
-| **Розмір JS-бандла**       | Більший (включає всі мови для компонента) | Найменший (тільки код, без контенту)            |
-| **Початкове завантаження** | Миттєво (вміст у bundle)                  | Невелика затримка (завантажує JSON)             |
-| **Мережеві запити**        | 0 додаткових запитів                      | 1 запит на словник                              |
-| **Tree Shaking**           | На рівні компонентів                      | На рівні компонентів + на рівні локалі          |
-| **Найкраще використання**  | UI Components, невеликі додатки           | Сторінки з великою кількістю тексту, багато мов |