@intlayer/docs 7.3.0 → 7.3.1

package/docs/pt/bundle_optimization.md

@@ -0,0 +1,180 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: Otimizando o Tamanho e Desempenho do Bundle i18n
+description: Reduza o tamanho do bundle da aplicação otimizando o conteúdo de internacionalização (i18n). Aprenda a aproveitar tree shaking e lazy loading para dicionários com Intlayer.
+keywords:
+  - Otimização de Bundle
+  - Automação de Conteúdo
+  - Conteúdo Dinâmico
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Histórico inicial
+---
+
+# Otimizando o Tamanho e Desempenho do Bundle i18n
+
+Um dos desafios mais comuns com soluções tradicionais de i18n que dependem de arquivos JSON é gerenciar o tamanho do conteúdo. Se os desenvolvedores não separarem manualmente o conteúdo em namespaces, os usuários frequentemente acabam baixando traduções para todas as páginas e potencialmente para todos os idiomas apenas para visualizar uma única página.
+
+Por exemplo, uma aplicação com 10 páginas traduzidas em 10 idiomas pode resultar em um usuário baixando o conteúdo de 100 páginas, mesmo que ele precise de **apenas uma** (a página atual no idioma atual). Isso leva a desperdício de largura de banda e tempos de carregamento mais lentos.
+
+> Para detectar isso, você pode usar analisadores de bundle como `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js) ou `webpack-bundle-analyzer` (React CRA / Angular / etc).
+
+**Intlayer resolve esse problema por meio da otimização em tempo de build.** Ele analisa seu código para detectar quais dicionários são realmente usados por componente e reinjeta apenas o conteúdo necessário no seu bundle.
+
+## Índice
+
+<TOC />
+
+## Como Funciona
+
+Intlayer utiliza uma **abordagem por componente**. Diferente dos arquivos JSON globais, seu conteúdo é definido junto ou dentro dos seus componentes. Durante o processo de build, o Intlayer:
+
+1.  **Analisa** seu código para encontrar chamadas de `useIntlayer`.
+2.  **Constrói** o conteúdo do dicionário correspondente.
+3.  **Substitui** a chamada `useIntlayer` por código otimizado baseado na sua configuração.
+
+Isso garante que:
+
+- Se um componente não for importado, seu conteúdo não será incluído no bundle (Eliminação de Código Morto).
+- Se um componente for carregado de forma lazy, seu conteúdo também será carregado de forma lazy.
+
+## Configuração por Plataforma
+
+### Next.js
+
+Next.js requer o plugin `@intlayer/swc` para lidar com a transformação, pois o Next.js utiliza SWC para builds.
+
+> Este plugin é instalado por padrão porque plugins SWC ainda são experimentais para Next.js. Isso pode mudar no futuro.
+
+### Vite
+
+O Vite utiliza o plugin `@intlayer/babel`, que está incluído como dependência do `vite-intlayer`. A otimização está habilitada por padrão.
+
+### Webpack
+
+Para habilitar a otimização do bundle com Intlayer no Webpack, você precisa instalar e configurar o plugin Babel (`@intlayer/babel`) ou SWC (`@intlayer/swc`) apropriado.
+
+### Expo / Lynx
+
+A otimização do bundle **ainda não está disponível** para esta plataforma. O suporte será adicionado em uma versão futura.
+
+## Configuração
+
+Você pode controlar como o Intlayer otimiza seu bundle através da propriedade `build` no seu arquivo `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", // ou 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> Manter a opção padrão para `optimize` é recomendado na maioria dos casos.
+
+> Veja a documentação de configuração para mais detalhes: [Configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md)
+
+### Opções de Build
+
+As seguintes opções estão disponíveis no objeto de configuração `build`:
+
+| Propriedade           | Tipo                            | Padrão                          | Descrição                                                                                                                                                                                                                 |
+| :-------------------- | :------------------------------ | :------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`optimize`**        | `boolean`                       | `undefined`                     | Controla se a otimização da build está habilitada. Se `true`, o Intlayer substitui chamadas ao dicionário por injeções otimizadas. Se `false`, a otimização é desativada. Idealmente configurado como `true` em produção. |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | Determina como os dicionários são carregados (veja detalhes abaixo).                                                                                                                                                      |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | Padrões glob que definem quais arquivos o Intlayer deve escanear para otimização. Use isso para excluir arquivos não relacionados e acelerar as builds.                                                                   |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | Controla o formato de saída dos dicionários construídos.                                                                                                                                                                  |
+
+## Modos de Importação
+
+A configuração `importMode` determina como o conteúdo do dicionário é injetado no seu componente.
+
+### 1. Modo Estático (`default`)
+
+No modo estático, o Intlayer substitui `useIntlayer` por `useDictionary` e injeta o dicionário diretamente no bundle JavaScript.
+
+- **Prós:** Renderização instantânea (síncrona), zero requisições de rede adicionais durante a hidratação.
+- **Contras:** O bundle inclui traduções para **todas** as línguas disponíveis para aquele componente específico.
+- **Ideal para:** Aplicações Single Page (SPA).
+
+**Exemplo de Código Transformado:**
+
+```tsx
+// Seu código
+const content = useIntlayer("my-key");
+
+// Código otimizado (Estático)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. Modo Dinâmico
+
+No modo dinâmico, o Intlayer substitui `useIntlayer` por `useDictionaryAsync`. Isso utiliza `import()` (mecanismo semelhante ao Suspense) para carregar preguiçosamente especificamente o JSON para o locale atual.
+
+- **Prós:** **Tree shaking ao nível do locale.** Um usuário visualizando a versão em inglês irá _apenas_ baixar o dicionário em inglês. O dicionário em francês nunca é carregado.
+- **Contras:** Dispara uma requisição de rede (busca de asset) por componente durante a hidratação.
+- **Melhor para:** Blocos grandes de texto, artigos, ou aplicações que suportam muitas línguas onde o tamanho do bundle é crítico.
+
+**Exemplo de Código Transformado:**
+
+```tsx
+// Seu código
+const content = useIntlayer("my-key");
+
+// Código otimizado (Dinâmico)
+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),
+});
+```
+
+> Ao usar `importMode: 'dynamic'`, se você tiver 100 componentes usando `useIntlayer` em uma única página, o navegador tentará fazer 100 requisições separadas. Para evitar essa "cascata" de requisições, agrupe o conteúdo em menos arquivos `.content` (por exemplo, um dicionário por seção da página) em vez de um por componente atômico.
+
+> Atualmente, `importMode: 'dynamic'` não é totalmente suportado para Vue e Svelte. Recomenda-se usar `importMode: 'static'` para esses frameworks até atualizações futuras.
+
+### 3. Modo Live
+
+Comporta-se de forma semelhante ao modo Dinâmico, mas tenta buscar os dicionários da API Intlayer Live Sync primeiro. Se a chamada à API falhar ou o conteúdo não estiver marcado para atualizações ao vivo, ele recorre à importação dinâmica.
+
+> Veja a documentação do CMS para mais detalhes: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md)
+
+## Resumo: Estático vs Dinâmico
+
+| Recurso                  | Modo Estático                                     | Modo Dinâmico                             |
+| :----------------------- | :------------------------------------------------ | :---------------------------------------- |
+| **Tamanho do Bundle JS** | Maior (inclui todos os idiomas para o componente) | Menor (apenas código, sem conteúdo)       |
+| **Carregamento Inicial** | Instantâneo (Conteúdo está no bundle)             | Pequeno atraso (Busca JSON)               |
+| **Requisições de Rede**  | 0 requisições extras                              | 1 requisição por dicionário               |
+| **Tree Shaking**         | Nível de componente                               | Nível de componente + Nível de localidade |
+| **Melhor Caso de Uso**   | Componentes de UI, Aplicações pequenas            | Páginas com muito texto, Muitos idiomas   |

package/docs/pt/how_works_intlayer.md

@@ -140,7 +140,7 @@ O pacote `vue-intlayer` é usado para interpretar os dicionários do Intlayer e
 
 O pacote `nuxt-intlayer` é um módulo Nuxt para tornar os dicionários do Intlayer utilizáveis em aplicações Nuxt. Ele integra recursos essenciais para fazer o Intlayer funcionar em um ambiente Nuxt, como middleware de tradução, roteamento e a configuração do arquivo `nuxt.config.js`.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 O pacote `svelte-intlayer` é usado para interpretar os dicionários do Intlayer e torná-los utilizáveis em aplicações Svelte.
 

package/docs/pt/vs_code_extension.md

@@ -42,6 +42,10 @@ Link da extensão: [https://marketplace.visualstudio.com/items?itemName=Intlayer
 
 ## Funcionalidades
 
+![Extrair conteúdo](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Extrair Conteúdo** – Extraia conteúdo dos seus componentes React / Vue / Svelte
+
 ![Preencher dicionários](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Navegação Instantânea** – Vá rapidamente para o arquivo de conteúdo correto ao clicar em uma chave `useIntlayer`.

package/docs/ru/bundle_optimization.md

@@ -0,0 +1,180 @@
+---
+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, // локаль по умолчанию
+  },
+  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' , '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-файла конкретно для текущей локали.
+
+- **Преимущества:** **Tree shaking на уровне локали.** Пользователь, просматривающий английскую версию, загрузит _только_ английский словарь. Французский словарь никогда не загружается.
+- **Недостатки:** Во время гидратации для каждого компонента выполняется сетевой запрос (загрузка ассета).
+- **Лучше всего подходит для:** Больших текстовых блоков, статей или приложений, поддерживающих множество языков, где критичен размер бандла.
+
+**Пример преобразованного кода:**
+
+```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. 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/ru/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/tr/bundle_optimization.md

@@ -0,0 +1,180 @@
+---
+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,
+  },
+  build: {
+    optimize: true,
+    importMode: "static", // veya 'dynamic'
+    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' , 'live'` | `'static'`                      | 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/en.json").then((mod) => mod.default),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/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/tr/how_works_intlayer.md

@@ -142,7 +142,7 @@ Intlayer, çeviri sürecinde belirli bir rolü olan birkaç paketten oluşur. İ
 
 `nuxt-intlayer` paketi, Intlayer sözlüklerini Nuxt uygulamalarında kullanılabilir hale getirmek için bir Nuxt modülü olarak kullanılır. Çeviri ara yazılımı, yönlendirme veya `nuxt.config.js` dosyası konfigürasyonu gibi Intlayer'ı bir Nuxt ortamında çalışacak şekilde yapmak için gerekli özellikleri entegre eder.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 `svelte-intlayer` paketi, Intlayer sözlüklerini yorumlamak ve Svelte uygulamalarında kullanılabilir hale getirmek için kullanılır.
 

package/docs/tr/vs_code_extension.md

@@ -42,6 +42,10 @@ Eklenti bağlantısı: [https://marketplace.visualstudio.com/items?itemName=Intl
 
 ## Özellikler
 
+![İçerik çıkar](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **İçerik Çıkar** – React / Vue / Svelte bileşenlerinizden içerik çıkarın
+
 ![Sözlükleri doldur](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Anında Gezinme** – `useIntlayer` anahtarına tıkladığınızda doğru içerik dosyasına hızlıca atlayın.