@intlayer/docs 7.3.0 → 7.3.2-canary.0

package/docs/pl/vs_code_extension.md

@@ -42,6 +42,10 @@ Link do rozszerzenia: [https://marketplace.visualstudio.com/items?itemName=Intla
 
 ## Funkcje
 
+![Wyodrębnij zawartość](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Wyodrębnij Zawartość** – Wyodrębnij zawartość z komponentów React / Vue / Svelte
+
 ![Wypełnianie słowników](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Natychmiastowa Nawigacja** – Szybko przejdź do odpowiedniego pliku z treścią, klikając na klucz `useIntlayer`.

package/docs/pt/bundle_optimization.md

@@ -0,0 +1,184 @@
+---
+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/my-key/en.json").then(
+      (mod) => mod.default
+    ),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/my-key/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/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Extração Automática de Conteúdo para i18n
+description: Automatize seu processo de internacionalização com o Intlayer Compiler. Extraia conteúdo diretamente dos seus componentes para uma i18n mais rápida e eficiente em Vite, Next.js e mais.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internacionalização
+  - i18n
+  - Automação
+  - Extração
+  - Velocidade
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Lançamento do Compiler
+---
+
+# Intlayer Compiler | Extração Automática de Conteúdo para i18n
+
+## O que é o Intlayer Compiler?
+
+O **Intlayer Compiler** é uma ferramenta poderosa projetada para automatizar o processo de internacionalização (i18n) em suas aplicações. Ele escaneia seu código-fonte (JSX, TSX, Vue, Svelte) em busca de declarações de conteúdo, extrai-as e gera automaticamente os arquivos de dicionário necessários. Isso permite que você mantenha seu conteúdo localizado junto aos seus componentes, enquanto o Intlayer gerencia e sincroniza seus dicionários.
+
+## Por que Usar o Intlayer Compiler?
+
+- **Automação**: Elimina a cópia manual e colagem de conteúdo nos dicionários.
+- **Velocidade**: Extração de conteúdo otimizada garantindo que seu processo de build permaneça rápido.
+- **Experiência do Desenvolvedor**: Mantenha as declarações de conteúdo exatamente onde são usadas, melhorando a manutenção.
+- **Atualizações em Tempo Real**: Suporta Hot Module Replacement (HMR) para feedback instantâneo durante o desenvolvimento.
+
+Veja o post do blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/compiler_vs_declarative_i18n.md) para uma comparação mais aprofundada.
+
+## Por que não usar o Intlayer Compiler?
+
+Embora o compilador ofereça uma excelente experiência "funciona automaticamente", ele também introduz algumas compensações das quais você deve estar ciente:
+
+- **Ambiguidade heurística**: O compilador deve adivinhar o que é conteúdo voltado para o usuário versus a lógica da aplicação (por exemplo, `className="active"`, códigos de status, IDs de produtos). Em bases de código complexas, isso pode levar a falsos positivos ou strings perdidas que exigem anotações manuais e exceções.
+- **Extração apenas estática**: A extração baseada em compilador depende de análise estática. Strings que existem apenas em tempo de execução (códigos de erro de API, campos CMS, etc.) não podem ser descobertas ou traduzidas pelo compilador sozinho, então você ainda precisa de uma estratégia i18n de tempo de execução complementar.
+
+Para uma comparação arquitetural mais profunda, veja o post do blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/compiler_vs_declarative_i18n.md).
+
+Como alternativa, para automatizar seu processo i18n mantendo controle total sobre seu conteúdo, o Intlayer também fornece um comando de auto-extração `intlayer transform` (consulte a [documentação CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/transform.md)), ou o comando `Intlayer: extract content to Dictionary` da extensão Intlayer VS Code (consulte a [documentação da extensão VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/vs_code_extension.md)).
+
+## Uso
+
+### Vite
+
+Para aplicações baseadas em Vite (React, Vue, Svelte, etc.), a maneira mais fácil de usar o compilador é através do plugin `vite-intlayer`.
+
+#### Instalação
+
+```bash
+npm install vite-intlayer
+```
+
+#### Configuração
+
+Atualize seu `vite.config.ts` para incluir o plugin `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Adiciona o plugin do compilador
+  ],
+});
+```
+
+#### Suporte a Frameworks
+
+O plugin do Vite detecta e lida automaticamente com diferentes tipos de arquivos:
+
+- **React / JSX / TSX**: Suportado nativamente.
+- **Vue**: Requer `@intlayer/vue-compiler`.
+- **Svelte**: Requer `@intlayer/svelte-compiler`.
+
+Certifique-se de instalar o pacote do compilador apropriado para o seu framework:
+
+```bash
+# Para Vue
+npm install @intlayer/vue-compiler
+
+# Para Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Para Next.js ou outras aplicações baseadas em Webpack que usam Babel, você pode configurar o compilador usando o plugin `@intlayer/babel`.
+
+#### Instalação
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Configuração
+
+Atualize seu `babel.config.js` (ou `babel.config.json`) para incluir o plugin de extração. Fornecemos um helper `getExtractPluginOptions` para carregar automaticamente sua configuração do Intlayer.
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+Esta configuração garante que o conteúdo declarado em seus componentes seja automaticamente extraído e usado para gerar dicionários durante o processo de build.

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,184 @@
+---
+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/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-компоненты, небольшие приложения        | Страницы с большим количеством текста, много языков |