@intlayer/docs 9.4.1 → 9.4.3

package/blog/uk/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Чи застарів vue-i18n у 2026 році?
+description: vue-i18n був стандартом для застосунків Vue та Nuxt ціле десятиліття. Проте в наших бенчмарках він виявився найважчим runtime i18n у вебі. Пояснюємо причини.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Інтернаціоналізація
+  - i18n
+  - Vue
+  - Nuxt
+  - Розмір бандла
+  - Блог
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# Чи застарів vue-i18n у 2026 році?
+
+У спільноті Vue небагато бібліотек мають настільки високий рівень використання, як `vue-i18n`. Підтримуваний Kazupon ще з часів Vue 2, він забезпечує роботу `@nuxtjs/i18n` і слугує рішенням за замовчуванням практично для кожного багатомовного Vue-проєкту.
+
+Однак наші бенчмарки 2026 року показали несподіваний результат: **`vue-i18n` виявився найважчим runtime локалізації серед усіх протестованих фронтенд-фреймворків.**
+
+На чистій базі Vite + Vue розміром 31.5 КБ додавання `vue-i18n` збільшило середній обсяг JavaScript на сторінку до **136.4 КБ**, більш ніж учетверо перевищивши початковий розмір.
+
+Як інструмент для фреймворку, відомого компактністю, отримав настільки важкий стек інтернаціоналізації? І чи має сенс класична модель часу виконання сьогодні?
+
+<TOC/>
+
+## Головні висновки
+
+**Найважчий протестований runtime:**
+
+З вагою **24.3 КБ gzipped (83.2 КБ minified)** до додавання будь-яких перекладів `vue-i18n` приблизно в **9 разів важчий** за рушій `intlayer` (2.7 КБ).
+
+**Збільшення ваги сторінки на 330%:**
+
+`vue-i18n` збільшив базову сторінку Vue з 31.5 КБ до 136.4 КБ. Intlayer забезпечив 59.3 КБ, тобто **на 56% менший обсяг**.
+
+**Прихований компілятор у браузері:**
+
+За замовчуванням, без створення спеціальних аліасів у збирачі, `vue-i18n` відправляє повний компілятор повідомлень у браузер для розбору рядків на льоту.
+
+**Темпи підтримки:**
+
+За минулий рік `vue-i18n` зафіксував ~259 комітів, спрямованих на виправлення помилок та сумісність із версіями Vue.
+
+**Відсутність рідних сучасних інструментів:**
+
+Немає офіційної підтримки Language Server (LSP), MCP-серверів для ШІ або автоматизованих CLI-команд перекладу.
+
+## Підтримка проти сучасного інструментарію
+
+| Репозиторій           | Зірки                                                                                                                                                  | Всього комітів                                                                                                                                                      | Комітів / рік                                                                                                                                                      | Останній коміт                                                                                                                               |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlify/vue-i18n`    | [![stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/intlify/vue-i18n?style=for-the-badge&label=%2Fyear)](https://github.com/intlify/vue-i18n/commits)       | [![last](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+Показники за останні 12 місяців:
+
+- `intlify/vue-i18n`: **259 комітів** (регулярні виправлення для Vue 3 і Nuxt).
+- `aymericzip/intlayer`: **4 343 коміти** (активна розробка оптимізацій компілятора, LSP-інструментів та інтеграцій для ШІ).
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+Зріла бібліотека забезпечує передбачуваність. Проте сучасні фронтенд-рішення застосовують AST-трансформації на етапі збірки, очищення мертвого коду та автоматизацію за допомогою ШІ. Системі, орієнтованій виключно на виконання у браузері, складно переймати ці переваги.
+
+## Тестування продуктивності у Vite + Vue
+
+Бенчмарк застосунку на 10 сторінок та 10 мов із використанням Vite та Vue 3:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Вимірювання у реальних браузерах зі стисненням gzip. Вичерпні дані наведено в [документації бенчмарка Vue](https://intlayer.org/uk/doc/benchmark/vue).
+
+### Початковий оверхед бібліотек
+
+Вага до додавання файлів перекладу:
+
+| Бібліотека        | Gzipped    | Minified   |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 КБ    | 83.2 КБ    |
+| `intlayer@8.7.12` | **2.7 КБ** | **7.6 КБ** |
+
+Runtime `vue-i18n` сам по собі важить **24.3 КБ gzipped**, що майже дорівнює вазі всього ядра Vue. Intlayer додає лише **2.7 КБ**.
+
+### Вага сторінок та витік перекладів
+
+| Конфігурація    | Сер. JS / стор. (gz) | Витік мов | Витік ін. сторінок | Сер. компонент (gz) |
+| --------------- | -------------------- | --------- | ------------------ | ------------------- |
+| База (без i18n) | 31.5 КБ              | 0.0%      | 90.0%              | 0.9 КБ              |
+| `vue-i18n`      | **136.4 КБ**         | 50.2%     | 90.0%              | 196.0 КБ            |
+| Intlayer        | **59.3 КБ**          | 51.1%     | **0.0%**           | **6.5 КБ**          |
+
+### Головні підсумки
+
+**Значне пропорційне зростання:**
+
+Оскільки база Vue дуже легка (~31 КБ), підключення `vue-i18n` збільшує вагу сторінки більш ніж у чотири рази.
+
+**Витік на інші маршрути:**
+
+За замовчуванням **90% тексту**, що передається на сторінку, стосується інших розділів. Intlayer повністю прибирає зайві дані, зменшуючи показник до **0.0%**.
+
+**Вага окремих компонентів:**
+
+Компоненти з локальними областями видимості досягали в середньому 196 КБ у `vue-i18n` через дублювання каталогів, проти лише **6.5 КБ** в Intlayer.
+
+## Чому vue-i18n важкий?
+
+### Компілятор AST у браузері користувача
+
+`vue-i18n` містить власний компілятор повідомлень. Правила множини та підстановки інтерпретуються як дерева AST безпосередньо у браузері під час роботи.
+
+Щоб запобігти цьому, потрібно прописувати спеціальні аліаси до `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` і прекомпілювати файли через `@intlify/unplugin-vue-i18n`. Багато команд пропускають цей крок.
+
+### Монолітний набір функцій
+
+`vue-i18n` включає модулі форматування чисел і дат, зв'язані повідомлення, мости для застарілого Options API (`$t`, `v-t`) та реактивні проксі. Навіть для виведення простих рядків у `<script setup>` завантажується весь комплекс.
+
+### Динамічні ключі блокують tree-shaking
+
+Оскільки `"home.hero.title"` обчислюється під час виконання, збирачі не можуть перевірити реальне використання ключів. Зайві тексти залишаються в коді.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("home.hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+[Компілятор Intlayer](https://intlayer.org/uk/doc/compiler) бачить використані поля та прибирає зайвий контент до створення клієнтських чанків. Детальніше в розділі [оптимізація бандла](https://intlayer.org/uk/doc/concept/bundle-optimization).
+
+## Досвід розробника
+
+### Окремі каталоги проти спільного розміщення
+
+У `vue-i18n` переклади зберігаються в окремій папці `locales/`. Intlayer розміщує типізовані файли контенту поруч із компонентами:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="locales/en.json"
+{
+  "hero": {
+    "title": "Ship in every language"
+  }
+}
+```
+
+```json fileName="locales/uk.json"
+{
+  "hero": {
+    "title": "Запускайте будь-якою мовою"
+  }
+}
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      en: "Ship in every language",
+      uk: "Запускайте будь-якою мовою",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+При видаленні чи перейменуванні `Hero.vue` його файл контенту переміщується або видаляється одночасно.
+
+### Автодоповнення проти суворої перевірки повноти
+
+`DefineLocaleMessage` забезпечує автодоповнення в IDE на основі базової схеми. Проте воно не гарантує повноту всіх мов. Пропуск ключа в `uk.json` не викликає помилки під час збірки TypeScript.
+
+В Intlayer словники перевіряються суворо. Активація [`strictMode`](https://intlayer.org/uk/doc/concept/configuration) призводить до зупинки збірки при відсутності перекладу в будь-якій мові.
+
+### Інструменти для IDE та ШІ
+
+| Можливість                   | `vue-i18n`           | Intlayer                                                                     |
+| ---------------------------- | -------------------- | ---------------------------------------------------------------------------- |
+| **Розширення VS Code**       | Сторонні (i18n Ally) | ✅ [Офіційне розширення](https://intlayer.org/uk/doc/vs-code-extension)      |
+| **Language Server (LSP)**    | ❌ Немає             | ✅ [Вбудований LSP](https://intlayer.org/uk/doc/lsp)                         |
+| **MCP Server для ШІ**        | ❌ Немає             | ✅ [Готовий MCP-сервер](https://intlayer.org/uk/doc/mcp-server)              |
+| **Навички агентів (Skills)** | ❌ Немає             | ✅ [Автономні навички](https://intlayer.org/uk/doc/agent_skills)             |
+| **Візуальна CMS**            | ❌ Немає             | ✅ [Безкоштовна Open Source CMS](https://intlayer.org/uk/doc/concept/editor) |
+
+## Процеси перекладу
+
+`vue-i18n` не містить вбудованих інструментів перекладу. Зазвичай команди передають файли зовнішнім сервісам на кшталт Crowdin або Phrase.
+
+Intlayer пропонує вбудовані засоби:
+
+**Локальний автопереклад за допомогою ШІ (`intlayer fill`):**
+
+Заповнює відсутні ключі з використанням ваших особистих ключів OpenAI, Anthropic, Mistral чи Gemini.
+
+**Автономна візуальна CMS:**
+
+Розгортайте [Intlayer CMS](https://intlayer.org/uk/doc/concept/cms), щоб редактори могли змінювати тексти візуально зі збереженням безпосередньо в Git.
+
+**Відкрита ліцензія:**
+
+Усі інструменти ліцензовано під Apache 2.0.
+
+## Коли vue-i18n все ще актуальний?
+
+<AccordionGroup>
+<Accordion header="Існуючі великі проєкти на Nuxt 2/3">
+
+Якщо маршрутизація сильно інтегрована з `@nuxtjs/i18n`, кардинальні зміни можуть бути невиправданими.
+
+</Accordion>
+<Accordion header="Специфічні вимоги до ICU">
+
+При широкому застосуванні зв'язаних повідомлень або особливих правил форматування дат і чисел.
+
+</Accordion>
+<Accordion header="Невеликі навчальні або особисті сайти">
+
+Якщо розмір підсумкового бандла не є визначальним фактором.
+
+</Accordion>
+</AccordionGroup>
+
+## Як поліпшити поточну конфігурацію vue-i18n?
+
+Intlayer пропонує готові пакети сумісності, які точно відтворюють сигнатури функцій `vue-i18n` та `@nuxtjs/i18n` (`useI18n`, `$t`, `<i18n-t>`). Вам не потрібно переписувати шаблони чи composables, щоб скористатися перевагами легкої архітектури на базі компілятора.
+
+Налаштування виконується однією командою:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+Цей інтерактивний CLI:
+
+1. Встановлює пакет сумісності `@intlayer/vue-i18n` або `@intlayer/nuxt-i18n`.
+2. Налаштовує аліаси бандлера (Vite чи Nuxt), щоб наявні імпорти та директиви шаблонів автоматично перенаправлялися на Intlayer, дозволяючи прибрати `vue-i18n` з `package.json`.
+3. Миттєво підключає діагностику мовного сервера (LSP), видаляє 24-кілобайтний AST-парсер із клієнтського бандла та відкриває локальні робочі процеси ШІ-перекладу без суттєвого рефакторингу.
+
+Детальні інструкції дивіться у наших посібниках:
+
+- **Швидка сумісність:** Залишайте наявні шаблони за допомогою [адаптера для `vue-i18n`](https://intlayer.org/uk/doc/compatibility/vue-i18n) чи [`@nuxtjs/i18n`](https://intlayer.org/uk/doc/compatibility/nuxtjs-i18n).
+- **Покрокові інструкції:** Перетворіть JSON-файли на типізовані словники за нашими посібниками: [з vue-i18n](https://intlayer.org/uk/doc/migration/vue-i18n) або [з @nuxtjs/i18n](https://intlayer.org/uk/doc/migration/nuxtjs-i18n).
+- **Гібридний підхід:** Залиште `vue-i18n` у runtime, підключивши [Intlayer до vue-i18n](https://intlayer.org/uk/blog/intlayer-with-vue-i18n) для суворої типізації та локального ШІ-перекладу.
+
+Перевірте ваш сайт за допомогою безкоштовного [SEO-сканера i18n](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Корисні матеріали
+
+- [Бенчмарк Vue & Vite i18n: повний аналіз продуктивності](https://intlayer.org/uk/doc/benchmark/vue)
+- [vue-i18n проти Intlayer: детальне порівняння](https://intlayer.org/uk/blog/vue-i18n-vs-intlayer)
+- [Чи застарів next-intl у 2026 році?](https://intlayer.org/uk/blog/is-next-intl-outdated)
+- [Інтернаціоналізація на базі компілятора проти декларативної](https://intlayer.org/uk/blog/compiler-vs-declarative-i18n)

package/blog/uk/list_i18n_technologies/build-tools/vite.md

@@ -0,0 +1,177 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: glob-імпорти, чанки та повідомлення під час збірки"
+description: Що насправді стосується суто Vite в інтернаціоналізації. Ліниві каталоги з import.meta.glob, чому поділ за маршрутами рідко працює, прогалини HMR і плагіни компіляції.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite поділ коду
+  - ліниве завантаження перекладів
+  - vite плагін i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: аспекти, що стосуються саме Vite, а не вашого фреймворку
+
+Більшість посібників із назвою "Vite i18n" — це насправді матеріали про React або Vue, які випадково використовують Vite як збирач. Ця стаття присвячена глибшому рівню: як саме імпортуються каталоги, що з ними робить Rollup і чому написане вами ліниве завантаження (lazy loading), швидше за все, насправді зовсім не ліниве.
+
+## Зміст
+
+<TOC/>
+
+## Статичний імпорт є типовим, і він завантажується миттєво
+
+Найпростіша конфігурація імпортує кожен каталог угорі модуля:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Це призводить до того, що всі три каталоги опиняються в початковому вхідному чанку (entry chunk), на кожній сторінці, для кожного відвідувача. Це прийнятно для двох мов і кількох сотень рядків. Але коли мов стає десять, це перетворюється на найбільшу зайву статтю витрат у вашому бандлі.
+
+## `import.meta.glob` і прапорець, у якому помиляються майже всі
+
+Glob-імпорт у Vite є стандартним рішенням:
+
+```ts
+const catalogs = import.meta.glob("./locales/*.json");
+
+export const loadCatalog = async (locale: string) => {
+  const load = catalogs[`./locales/${locale}.json`];
+  return (await load()) as Record<string, string>;
+};
+```
+
+Ліниве завантаження увімкнене за замовчуванням: кожен запис — це функція, яка повертає динамічний імпорт, а Rollup генерує окремий чанк для кожного файлу. Додавання `{ eager: true }` навпаки вбудовує всі файли безпосередньо в модуль-імпортер, повністю перекреслюючи оптимізацію:
+
+```ts
+// Усі мови потрапляють у вхідний чанк (майже ніколи не є тим, що вам потрібно):
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+Пастка полягає в тому, що обидва варіанти чудово працюють у режимі розробки, оскільки Vite віддає окремі модулі без бандлінгу. Різниця виявляється лише в директорії `dist`. Перевірте це за допомогою `npx vite build && npx vite preview` і подивіться, що насправді містить ваш вхідний чанк.
+
+## Поділ за маршрутами рідко розділяє каталоги на практиці
+
+Ця поведінка часто дивує розробників. Ви структуруєте каталоги за сторінками:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Потім два різних маршрути імпортують `checkout.json`, і Rollup виносить цей файл у спільний чанк (shared chunk), який завантажується на обох сторінках. Механізм чанкінгу Rollup керується графом залежностей модулів, а не назвами ваших папок: будь-який модуль, доступний із більш ніж однієї точки входу, стає спільним. Додавання третього маршруту нічого не змінить, а четвертий може взагалі несподівано перекроїти структуру чанків.
+
+Тому поділ каталогів за маршрутами працює лише тоді, коли граф імпортів є суворо ізольованим. Якщо розмір бандла критичний, перевіряйте його за допомогою інструментів візуалізації:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Якщо вам конче необхідно зафіксувати межі чанків, опція `build.rollupOptions.output.manualChunks` є єдиним виходом, але ціною постійного ручного супроводу.
+
+## Каталоги не підтримують гаряче перезавантаження (HMR) автоматично
+
+Змініть компонент — і Vite миттєво оновить його на екрані. Змініть `locales/fr.json` — і залежно від способу імпорту нічого не станеться. Динамічно імпортований JSON не має власної межі HMR, тому граф модулів не знає, як саме слід інвалідувати залежні компоненти.
+
+Розробники зазвичай обходять це перезапуском dev-сервера щоразу, коли змінюють текст. Правильне вирішення проблеми лежить на боці плагіна i18n: він повинен перехоплювати HMR-оновлення та передавати нові повідомлення в працюючу програму. Обираючи бібліотеку, перевірте, чи вміє її плагін для Vite обробляти HMR для словників.
+
+## `define` намертво фіксує мову в зібраному коді
+
+Виникає спокуса зафіксувати типову локаль під час компіляції:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+Опція `define` виконує пряму текстову заміну на етапі збірки. Значення, зашите під час компіляції, стає остаточним, що змушує збирати окремий білд для кожної мови. Це робоча стратегія (саме так реалізована офіційна i18n в Angular), але це зовсім не те, що вам потрібно, якщо одне розгортання має обслуговувати всі мови одночасно.
+
+Значення, які повинні змінюватися залежно від запиту користувача, не слід зашивати в `define` — їх треба розв'язувати під час виконання (runtime).
+
+## Перенесення парсингу повідомлень на етап збірки
+
+Усі зрілі рішення в екосистемі зрештою приходять до одного висновку: припинити парсити повідомлення в браузері клієнта.
+
+| Плагін                       | Що переноситься на етап збірки                                      |
+| :--------------------------- | :------------------------------------------------------------------ |
+| `@intlify/unplugin-vue-i18n` | Компілює повідомлення vue-i18n у функції рендерингу (рантайм-бандл) |
+| Lingui (макрос + плагін)     | Витягує та компілює каталоги, замінює макроси на ідентифікатори     |
+| Paraglide (inlang)           | Компілює кожне повідомлення в окрему tree-shakable функцію          |
+| `vite-intlayer`              | Будує словники компонентів, очищає (purge) та мініфікує невідоме    |
+
+Вигода подвійна: важкий компілятор повідомлень більше не потрапляє в клієнтський бандл, а невикористані фрази видаляються статично. Плата за це: і dev-сервер, і CI повинні запускати плагін, а для запуску простого `tsc` або тестів поза Vite знадобиться додаткова конфігурація.
+
+## SSR: ніколи не зберігайте локаль у стані модуля
+
+Якщо ви використовуєте SSR (через фреймворк або `vite-plugin-ssr`), залізне правило звучить так: змінна на рівні модуля, що зберігає поточну локаль, є спільною для всіх паралельних запитів на цьому серверному процесі.
+
+```ts
+// Безпечно в браузері. Але критичний витік даних між запитами на сервері:
+export let currentLocale = "en";
+```
+
+Двоє користувачів, які одночасно звертаються до сервера, потраплять у стан перегонів (race condition), і один із них побачить сторінку мовою іншого. Під час локальної розробки це непомітно, оскільки ви єдиний тестувальник. Завжди визначайте локаль для кожного запиту окремо і передавайте її явно через контекст або request-local сховище фреймворку.
+
+## Плагін Vite для Intlayer
+
+Intlayer надає єдиний плагін, який бере на себе збірку словників, спостереження за файлами в режимі розробки та конвеєр оптимізації:
+
+```ts fileName="vite.config.ts"
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+Перезапис імпортів, очищення (purge) і мініфікація увімкнені за замовчуванням. Головні параметри налаштовуються у файлі `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // видаляє поля вмісту, які не зчитує жоден компонент
+    minify: true, // перейменовує ключі контенту на короткі аліаси
+  },
+};
+
+export default config;
+```
+
+Оскільки контент оголошується поряд із компонентами, а не в гігантських глобальних файлах мов, процес очищення опирається на реальний граф модулів, що робить видалення мертвого коду безпечним. Детальніше в [документації з оптимізації бандлів](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/bundle_optimization.md).
+
+## Поширені помилки
+
+- **`{ eager: true }` для glob, який мав завантажуватися ліниво.** Працює локально, але тягне всі мови в продакшен.
+- **Очікування, що структура папок автоматично сформує чанки.** Rollup орієнтується на імпорти, а не на папки.
+- **Перезапуск dev-сервера для перегляду змін у тексті.** Свідчення відсутності обробника HMR у плагіні.
+- **Вшивання локалі в `define`.** Прив'язує проєкт до окремої збірки на кожну мову.
+- **Збереження стану локалі на рівні модуля в SSR.** Призводить до змішування мов між паралельними запитами.
+- **Вимірювання продуктивності бандла на dev-сервері.** Незібрані окремі модулі не відображають структуру продакшен-бандла.
+
+## Корисні матеріали
+
+- [Оптимізація бандла: purge, мініфікація та підсумковий вміст для браузера](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/bundle_optimization.md)
+- [Звіти про продуктивність фреймворків](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/benchmark/index.md)
+- [Довідник конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md)
+- [Налаштування Intlayer з Vite та React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+react.md)
+- [Адаптер сумісності з i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compat/i18next.md)
+- [React i18n: як працює модель провайдерів](https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: як це працює та де криються підводні камені](https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/list_i18n_technologies/frameworks/vue.md)
+- [Компонентна i18n проти централізованої](https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/per-component_vs_centralized_i18n.md)

package/blog/uk/list_i18n_technologies/frameworks/angular.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![ілюстрація i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Що таке інтернаціоналізація (i18n)?
 
 Інтернаціоналізація, часто позначувана як i18n,, це процес проєктування та підготовки вашого застосунку для підтримки кількох мов і культурних контекстів. В Angular це передбачає налаштування застосунку таким чином, щоб текст, дати, числа і навіть макети інтерфейсу безшовно адаптувалися до різних локалей. Ретельна підготовка гарантує, що подальша інтеграція перекладів залишатиметься організованою й ефективною.

package/blog/uk/list_i18n_technologies/frameworks/react-native.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![ілюстрація i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Що таке інтернаціоналізація (i18n)?
 
 Інтернаціоналізація, або i18n, полягає в організації застосунку таким чином, щоб він легко адаптувався до різних мов, регіональних форматів і культурних норм. У React Native i18n охоплює роботу з рядками для кнопок і підписів, а також форматування дат, часу, валют та інших даних відповідно до локалі користувача. Правильно підготовлені застосунки на React Native дозволяють безшовно додавати додаткові мови та поведінку, специфічну для локалі, пізніше без масштабних рефакторингів.

package/blog/uk/list_i18n_technologies/frameworks/react.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![ілюстрація i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Що таке інтернаціоналізація (i18n)?
 
 Інтернаціоналізація, скорочено i18n,, це процес проєктування та підготовки вашого вебсайту для підтримки кількох мов та культурних контекстів. У React це означає налаштування вашого додатка так, щоб рядки, формати дат, формати чисел і навіть макет могли легко адаптуватися для користувачів з різних регіонів. Підготовка вашого React-додатка до i18n створює основу для чистої інтеграції перекладів та інших функцій локалізації.

package/blog/uk/list_i18n_technologies/frameworks/svelte.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![ілюстрація i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Що таке інтернаціоналізація (i18n)?
 
 Інтернаціоналізація, зазвичай скорочено i18n,, це процес проєктування та побудови вашого додатка таким чином, щоб він міг легко адаптуватися до різних мов, регіонів і культурних особливостей. У Svelte це зазвичай означає налаштування рядків перекладу, локалізацію дат, часу й чисел, а також забезпечення того, щоб інтерфейс користувача міг динамічно перемикатися між різними локалями без суттєвих змін у коді.

package/blog/uk/list_i18n_technologies/frameworks/vue.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![ілюстрація i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Що таке інтернаціоналізація (i18n)?
 
 Internationalization (i18n), це практика підготовки програмного забезпечення (або вебсайту) для підтримки кількох мов і культурних конвенцій. В екосистемі Vue.js це включає визначення того, як текст, дати, числа, валюта та інші локалізовані елементи можуть бути адаптовані до різних локалей. Налаштувавши i18n з самого початку, ви забезпечуєте організовану, масштабовану структуру для додавання нових мов та задоволення майбутніх потреб у локалізації.

package/blog/uk/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # Що таке інтернаціоналізація (i18n)? Визначення та виклики
 
-![ілюстрація i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Розуміння інтернаціоналізації (i18n)
 
 **Інтернаціоналізація**, часто скорочено як **i18n**,, це процес проєктування та підготовки застосунку для підтримки кількох мов, культур і регіональних конвенцій **без** значних змін у кодовій базі. Назва i18n походить від того, що між буквами **i** та **n** у слові "internationalization" є 18 літер.