@intlayer/docs 9.5.6 → 9.5.7

package/blog/uk/vue-i18n_vs_intlayer_benchmark.md

@@ -0,0 +1,361 @@
+---
+createdAt: 2026-09-13
+updatedAt: 2026-09-13
+title: "vue-i18n vs Intlayer: бенчмарк 2026"
+description: vue-i18n та Intlayer, виміряні на одному й тому самому застосунку Vite + Vue 3. Розмір бібліотеки, JavaScript на сторінку, витік контенту, розмір компонентів і реактивність перемикання локалі, з поясненням цифр.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internationalization
+  - i18n
+  - Benchmark
+  - Bundle size
+  - Blog
+  - Vue
+  - Nuxt
+  - Vite
+  - JavaScript
+slugs:
+  - blog
+  - vue-i18n-vs-intlayer-benchmark
+author: aymericzip
+---
+
+# vue-i18n VS Intlayer | Бенчмарк інтернаціоналізації (i18n) для Vue
+
+`vue-i18n` — еталонна i18n-бібліотека для Vue. Intlayer — альтернатива на основі компілятора з контентом, обмеженим областю компонента, та інтеграцією з Vue (`vue-intlayer`). Ми вже порівнювали їхні [можливості та досвід розробника](https://intlayer.org/blog/vue-i18n-vs-intlayer). Ця стаття розглядає, скільки коштує кожна з них після збірки застосунку.
+
+Дані взято з [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), open-source набору, який збирає один і той самий застосунок із кожною бібліотекою та записує, що браузер насправді завантажує й виконує.
+
+<TOC/>
+
+> **tl;dr**: На одному й тому самому застосунку Vite + Vue 3 `vue-i18n` віддає **134,9 КБ** gzip-стисненого JavaScript на сторінку проти **41,3 КБ** для застосунку без i18n. Intlayer віддає **57,1 КБ**. Сам лише рантайм `vue-i18n` важить **24,3 КБ gzip** (у 6 разів більше за 3,9 КБ Intlayer), кожна сторінка несе **90 % рядків чужих сторінок**, а компонент, скомпільований ізольовано, тягне за собою **196 КБ**, бо прив'язаний до глобального дерева повідомлень. Адаптер `@intlayer/vue-i18n` зберігає API `vue-i18n` і показав **47,0 КБ** на сторінку.
+
+## Коротко
+
+- **vue-i18n** — де-факто i18n-бібліотека для Vue 2 / Vue 3 та ядро `@nuxtjs/i18n`. Повідомлення в стилі ICU, блоки `<i18n>` у SFC, директива `v-t`, форматери `d()` / `n()`, велика екосистема. Повідомлення реєструються на глобальному екземплярі під час `createI18n()`; ліниве завантаження за локаллю — це ручний патерн із `setLocaleMessage()`, а розбиття за маршрутами вам потрібно будувати самостійно.
+- **Intlayer** — модель контенту, орієнтована на компоненти. Словники `.content.ts` лежать поруч із компонентом, який вони обслуговують, компілятор на етапі збірки (`vite-intlayer`) виконує tree-shaking і ліниве завантаження за компонентами та локалями, суворі типи TypeScript генеруються з вашого контенту, а відсутні переклади спричиняють помилку на етапі збірки. Містить хелпери для роутера / SEO, Visual Editor / CMS та переклад за допомогою ШІ.
+
+| Бібліотека            | Зірки GitHub                                                                                                                                                                   | Усього комітів                                                                                                                                                                     | Останній коміт                                                                                                                                      | Перша версія | Версія NPM                                                                                                  | Завантаження NPM                                                                                                       |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `aymericzip/intlayer` | [![GitHub Repo stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/aymericzip/intlayer/stargazers) | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![Last Commit](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) | Квітень 2024 | [![npm](https://img.shields.io/npm/v/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer) | [![npm downloads](https://img.shields.io/npm/dm/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer) |
+| `intlify/vue-i18n`    | [![GitHub Repo stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![Last Commit](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       | Груд 2016    | [![npm](https://img.shields.io/npm/v/vue-i18n?style=for-the-badge)](https://www.npmjs.com/package/vue-i18n) | [![npm downloads](https://img.shields.io/npm/dm/vue-i18n?style=for-the-badge)](https://www.npmjs.com/package/vue-i18n) |
+
+> Бейджі оновлюються автоматично. Знімки змінюватимуться з часом.
+
+## Порівняння можливостей пліч-о-пліч
+
+| Можливість                                             | `vue-intlayer` (Intlayer)                                     | `vue-i18n`                                                                        |
+| ------------------------------------------------------ | ------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| **Переклади поруч із компонентами**                    | ✅ Так, `.content.ts` розташовано поруч із кожним компонентом | ✅ Через блоки SFC `<i18n>` (опційно); зазвичай використовують глобальні каталоги |
+| **Інтеграція з TypeScript**                            | ✅ Суворі типи автоматично генеруються з контенту             | ✅ Гарні типи; сувора безпека ключів потребує типізації схеми та дисципліни       |
+| **Виявлення відсутніх перекладів**                     | ✅ Помилка TypeScript + помилка/попередження під час збірки   | ⚠️ Fallback під час виконання + попередження в консолі                            |
+| **Багатий контент (компоненти / Markdown)**            | ✅ Пряма підтримка                                            | ⚠️ Інтерполяція компонентів `<i18n-t>`; Markdown через зовнішні плагіни           |
+| **Підтримка ICU**                                      | ⚠️ У роботі                                                   | ✅ Так                                                                            |
+| **Форматування (дати, числа, валюти)**                 | ✅ Форматери на основі Intl                                   | ✅ `d()` / `n()` із `datetimeFormats` / `numberFormats`                           |
+| **Локалізована маршрутизація**                         | ✅ Хелпери для Vue Router / Nuxt, `getMultilingualUrls`       | ⚠️ Не в ядрі (`@nuxtjs/i18n` або власне налаштування роутера)                     |
+| **SEO-хелпери (hreflang, sitemap, robots)**            | ✅ Вбудовані хелпери                                          | ❌ Не в ядрі                                                                      |
+| **Tree-shaking (віддавати лише використаний контент)** | ✅ За компонентами, за локалями, автоматично компілятором     | ⚠️ Вручну: розбивати каталоги, `setLocaleMessage()` на кожен маршрут              |
+| **Ліниве завантаження**                                | ✅ `importMode: 'dynamic'` (один рядок конфігурації)          | ✅ Ручний `import()` + `setLocaleMessage()`                                       |
+| **Очищення невикористаного контенту**                  | ✅ Мертві словники видаляються на етапі збірки                | ❌ Не вбудовано                                                                   |
+| **Перевірка відсутніх перекладів (CLI / CI)**          | ✅ `npx intlayer content test`                                | ⚠️ Сторонні інструменти (`vue-i18n-extract`)                                      |
+| **Переклад за допомогою ШІ**                           | ✅ Вбудований, використовує ваші власні ключі провайдера      | ❌ Ні                                                                             |
+| **Visual Editor / CMS**                                | ✅ Безкоштовний Visual Editor + опційна CMS                   | ❌ Ні (зовнішні платформи локалізації)                                            |
+| **MCP-сервер і Agent Skills**                          | ✅ Так                                                        | ❌ Ні                                                                             |
+| **Екосистема / спільнота**                             | ⚠️ Менша, але швидко зростає                                  | ✅ Велика та зріла в екосистемі Vue                                               |
+
+## Бенчмарк
+
+### Що вимірювалося
+
+Набір [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) збирає **один і той самий застосунок Vite + Vue 3** з кожною бібліотекою: **10 сторінок** (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), **10 локалей** (`en`, `fr`, `es`, `de`, `it`, `pt`, `zh`, `ja`, `ko`, `ru`), однакові компоненти та однаковий контент. Сторінки вимірюються в `en` та `fr`.
+
+Обидві бібліотеки тестувалися в конфігурації **static** — тій, з якою виходить більшість Vue-проєктів: для `vue-i18n` JSON кожної локалі імпортується та передається в `createI18n({ messages })`; для Intlayer — `importMode: 'static'` за замовчуванням. У цьому режимі Intlayer також пакує всі локалі, але компілятор і далі обмежує контент **за компонентами**, тож сторінка несе лише словники тих компонентів, які вона рендерить.
+
+Для кожної збірки набір записує:
+
+- **Lib size**: gzip-розмір порожнього компонента, який лише імпортує i18n-бібліотеку. Фіксована вартість рантайму.
+- **Page JS**: gzip JavaScript, що завантажується на сторінку, усереднений за всіма сторінками та локалями.
+- **Locale leak %**: частка перекладених рядків у завантаженому JS, які належать до локалі, яку користувач **не** переглядає (відбитки за `en` та `fr`, тож 50 % означає «інша вимірювана локаль присутня повністю»; за 10 запакованих локалей реальні втрати вищі).
+- **Page leak %**: частка перекладених рядків у завантаженому JS, які належать до сторінки, на якій користувач **не** перебуває.
+- **Component avg**: середній gzip-розмір кожного компонента, скомпільованого ізольовано. Показує, скільки i18n-рантайму та каталогу тягне за собою один компонент.
+- **E2E reactivity**: реальний час між вибором нової локалі та оновленням `html[lang]` у DOM (Playwright, 5 ітерацій).
+- **Page load**: `PerformanceNavigationTiming.duration`.
+
+> Цифри нижче взято з прогону від **2026-09-12** із `vue-i18n` 11.4.0 та `intlayer` 9.5.0 / 9.5.1. Тестовий застосунок навмисно невеликий (кілька десятків рядків на локаль), тому відсотки витоку описують **закономірність**: вони зростають разом із вашим контентом, тоді як вартість рантайму залишається фіксованою.
+
+### Результати на Vite + Vue 3
+
+| Бібліотека                    | Стратегія | Lib size (gz) | Lib size (min) | Page JS сер. (gz) | Locale leak | Page leak | Component сер. (gz) | Реактивність E2E | Page load |
+| ----------------------------- | --------- | ------------: | -------------: | ----------------: | ----------: | --------: | ------------------: | ---------------: | --------: |
+| **base** (без i18n)           | -         |        0,0 КБ |         0,0 КБ |           41,3 КБ |       0,0 % |         - |              1,1 КБ |           1,8 мс |   10,8 мс |
+| `vue-i18n`                    | static    |       24,3 КБ |        83,2 КБ |          134,9 КБ |      50,0 % |    90,0 % |            196,0 КБ |           2,8 мс |   13,6 мс |
+| **`vue-intlayer`**            | static    |    **3,9 КБ** |    **11,1 КБ** |       **57,1 КБ** |      56,8 % | **0,0 %** |          **7,7 КБ** |       **4,5 мс** |   13,8 мс |
+| `@intlayer/vue-i18n` (compat) | static    |        7,9 КБ |        23,2 КБ |           47,0 КБ |      15,0 % |     0,0 % |              8,4 КБ |           1,5 мс |    9,3 мс |
+
+> Стовпець page-leak для базового застосунку залишено порожнім: без i18n-бібліотеки зняття відбитків підхоплює жорстко закодовані рядки в спільних чанках, і число не має сенсу.
+
+**Як це читати**
+
+- **Вартість рантайму.** `vue-i18n` — один із найважчих рантаймів у всьому бенчмарку: **24,3 КБ gzip / 83,2 КБ у мініфікованому вигляді** для порожнього компонента, який лише його імпортує. `vue-intlayer` коштує 3,9 КБ gzip. Цей розрив оплачується на кожній сторінці незалежно від того, скільки у вас рядків.
+- **JavaScript на сторінку.** Застосунок без i18n важить 41,3 КБ. `vue-i18n` збільшує його більш ніж утричі — до **134,9 КБ**; Intlayer виходить на **57,1 КБ**, +15,8 КБ, більша частина з яких — десять запакованих локалей (див. наступний пункт).
+- **Витік.** Із `createI18n({ messages: { en, fr, ... } })` кожна сторінка віддає всі локалі та рядки всіх сторінок: **50 % витоку локалей** (за двома вимірюваними локалями) та **90 % витоку сторінок**. Режим `static` в Intlayer також пакує всі локалі (звідси порівнянний показник витоку локалей), але дає **0 % витоку сторінок**: сторінка підтягує лише словники тих компонентів, які рендерить. Перехід на `importMode: 'dynamic'` прибирає й витік локалей; ця конфігурація не входила до цього прогону для Vue.
+- **Розмір компонентів — те місце, де проявляється архітектура.** Компонент, що викликає `useI18n()`, компілюється в середньому у **196 КБ**, бо `t()` прив'язаний до глобального екземпляра, який тримає всі повідомлення всіх локалей. Той самий компонент із `useIntlayer()` компілюється у **7,7 КБ**: він звертається лише до свого словника.
+- **Реактивність** не є проблемою для жодної з них (2–5 мс). Система реактивності Vue робить перемикання локалі дешевим, щойно повідомлення опиняються в пам'яті.
+- **`@intlayer/vue-i18n`**, drop-in адаптер, зберігає API `vue-i18n` і показав **47,0 КБ на сторінку** та **8,4 КБ на компонент**, при цьому код застосунку не змінювався.
+
+> Для довідки: той самий прогін виміряв `fluent-vue` на рівні 171,8 КБ на сторінку, 29,7 КБ рантайму та 217 КБ на компонент.
+
+## Звідки розрив? Глобальний екземпляр проти скомпільованих словників
+
+`vue-i18n` — це рантайм. `createI18n()` створює глобальний екземпляр, що зберігає дерево повідомлень для кожної локалі; `useI18n()` прив'язує до нього кожен компонент; `t("footer.github")` шукає ключ під час рендеру. Саме це уможливлює блоки SFC `<i18n>`, `v-t` та завантаження повідомлень під час виконання, і саме тому граф залежностей кожного компонента містить усе дерево:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── ...                        # один файл на локаль, усі сторінки всередині
+└── src
+    ├── i18n.ts                    # createI18n({ messages: { en, fr, ... } })
+    ├── main.ts
+    └── components
+        └── Footer.vue             # const { t } = useI18n(); t("footer.github")
+```
+
+Оптимізація означає, що **ви** розбиваєте `en.json` на файли за маршрутами, **ви** викликаєте `setLocaleMessage()` у guard роутера і **ви** підтримуєте коректність відповідності маршрутів файлам у міру переміщення компонентів. Рантайм не може зробити це за вас, бо не знає, які ключі запитає компонент.
+
+Intlayer переносить це знання на етап збірки. Контент оголошується поруч із компонентом, а `vite-intlayer` визначає, який компонент імпортує який словник:
+
+```bash
+.
+├── intlayer.config.ts
+└── src
+    ├── main.ts                    # createApp(App).use(intlayer)
+    └── components
+        └── Footer
+            ├── Footer.vue         # useIntlayer("footer")
+            └── Footer.content.ts
+```
+
+Компілятор генерує для кожного словника та кожної локалі рівно той JSON, який потрібен цьому компоненту, і відкидає словники, які ніхто не імпортує. Обмеження за маршрутами — наслідок обмеження за компонентами, а не окреме завдання.
+
+> Щоб також відкинути невикористані локалі, встановіть `dictionary.importMode: 'dynamic'` в `intlayer.config.ts`. Див. [документацію з оптимізації бандла](https://intlayer.org/doc/concept/bundle-optimization).
+
+## Досвід розробника
+
+### Налаштування
+
+**vue-i18n**
+
+```ts fileName="src/i18n.ts"
+import { createI18n } from "vue-i18n";
+import en from "../locales/en.json";
+import fr from "../locales/fr.json";
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+  messages: { en, fr },
+});
+```
+
+```ts fileName="src/main.ts"
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import { i18n } from "./i18n";
+
+createApp(App).use(router).use(i18n).mount("#app");
+```
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayer(), vue()],
+});
+```
+
+```ts fileName="src/main.ts"
+import { createApp } from "vue";
+import { intlayer } from "vue-intlayer";
+import App from "./App.vue";
+import router from "./router";
+
+createApp(App).use(intlayer).use(router).mount("#app");
+```
+
+### Компонент
+
+**vue-i18n**
+
+```json fileName="locales/en.json"
+{
+  "counter": {
+    "label": "Counter",
+    "increment": "Increment"
+  }
+}
+```
+
+```vue fileName="src/components/Counter.vue"
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t, n } = useI18n();
+const count = ref(0);
+</script>
+
+<template>
+  <div>
+    <p>{{ n(count) }}</p>
+    <button :aria-label="t('counter.label')" @click="count++">
+      {{ t("counter.increment") }}
+    </button>
+  </div>
+</template>
+```
+
+`t('counter.label')` залишається рядком, доки ви самі не типізуєте схему повідомлень; одруківка відрендерить ключ.
+
+**Intlayer**
+
+```ts fileName="src/components/Counter/Counter.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const counterContent = {
+  key: "counter",
+  content: {
+    label: t({ en: "Counter", fr: "Compteur" }),
+    increment: t({ en: "Increment", fr: "Incrémenter" }),
+  },
+} satisfies Dictionary;
+
+export default counterContent;
+```
+
+```vue fileName="src/components/Counter/Counter.vue"
+<script setup lang="ts">
+import { ref } from "vue";
+import { useIntlayer } from "vue-intlayer";
+import { useNumber } from "vue-intlayer/format";
+
+const { label, increment } = useIntlayer("counter");
+const number = useNumber();
+const count = ref(0);
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(count) }}</p>
+    <button :aria-label="label" @click="count++">
+      {{ increment }}
+    </button>
+  </div>
+</template>
+```
+
+`label` та `increment` типізовані; одруківка — це помилка TypeScript, відсутнє французьке значення — помилка збірки.
+
+### Ліниве завантаження за локаллю
+
+**vue-i18n**
+
+```ts fileName="src/i18n.ts"
+import { nextTick } from "vue";
+import { createI18n } from "vue-i18n";
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+});
+
+export const loadLocaleMessages = async (locale: string) => {
+  const messages = await import(`../locales/${locale}.json`);
+  i18n.global.setLocaleMessage(locale, messages.default);
+  await nextTick();
+  i18n.global.locale.value = locale;
+};
+```
+
+Потім викличте `loadLocaleMessages()` із guard роутера та самостійно розбийте `locales/{locale}.json` за маршрутами, якщо хочете обмеження за сторінками.
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+const config: IntlayerConfig = {
+  // ...
+  dictionary: {
+    importMode: "dynamic",
+  },
+};
+```
+
+## Збережіть API vue-i18n, отримайте результат Intlayer
+
+`@intlayer/vue-i18n` — це drop-in адаптер: `useI18n()`, `t()`, `d()`, `n()`, інтерполяція `{name}` та `{0}`, множина через pipe (`"car | cars"`), `v-t` та `i18n.global.locale` продовжують працювати, але обслуговуються зі словників Intlayer, скомпільованих `vite-intlayer`.
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+У бенчмарку compat-збірка того самого застосунку зменшилася зі **134,9 КБ до 47,0 КБ** на сторінку та зі **196 КБ до 8,4 КБ** на компонент, при цьому компоненти не змінювалися. Ваші наявні `locales/{locale}.json` можуть залишатися джерелом істини через плагін синхронізації JSON.
+
+Див. [посібник із міграції з vue-i18n](https://intlayer.org/doc/migration/vue-i18n) та [документацію із сумісності](https://intlayer.org/doc/compatibility/vue-i18n). Користувачі Nuxt мають той самий шлях через [сумісність із `@nuxtjs/i18n`](https://intlayer.org/doc/compatibility/nuxtjs-i18n).
+
+## Коли що обирати?
+
+- **Обирайте vue-i18n**, якщо вам потрібен стандартний підхід Vue, ви покладаєтеся на ICU-повідомлення або блоки SFC `<i18n>`, уже використовуєте `@nuxtjs/i18n` або платформа перекладу очікує централізований JSON. Закладіть час на розбиття каталогів і ліниве завантаження за маршрутами, якщо розмір бандла має значення.
+- **Обирайте Intlayer**, якщо вам потрібні **контент, обмежений компонентом**, **суворий TypeScript**, **помилки відсутніх ключів на етапі збірки**, **tree-shaking і ліниве завантаження без зусиль** та вбудовані редакторські інструменти (Visual Editor, CMS, ШІ-переклад, MCP-сервер). Особливо актуально для великих модульних кодових баз Vue / Nuxt та дизайн-систем.
+- **Обирайте `@intlayer/vue-i18n`**, якщо ви вже на `vue-i18n` і хочете виграш у розмірі бандла без переписування.
+
+## Пов'язані порівняння
+
+- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (той самий бенчмарк)
+- [i18next vs Intlayer](https://intlayer.org/blog/i18next-vs-intlayer) (той самий бенчмарк)
+- [Lingui vs Intlayer](https://intlayer.org/blog/lingui-vs-intlayer) (той самий бенчмарк)
+- [vue-i18n vs Intlayer (можливості та DX)](https://intlayer.org/blog/vue-i18n-vs-intlayer)
+- [Чи застарів vue-i18n?](https://intlayer.org/blog/is-vue-i18n-outdated)
+
+## Зірки GitHub
+
+Зірки GitHub — сильний індикатор популярності проєкту, довіри спільноти та довгострокової актуальності. Хоча вони не є прямою мірою технічної якості, вони відображають, скільки розробників вважають проєкт корисним, стежать за його розвитком і, ймовірно, використовуватимуть його.
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+## Висновок
+
+`vue-i18n` — зріла, гнучка та глибоко інтегрована з Vue бібліотека. Бенчмарк показує, скільки коштує її runtime-first дизайн у збірці Vite: **рантайм 24 КБ gzip**, **134,9 КБ на сторінку** для застосунку, який важить 41 КБ без i18n, **90 % контенту чужих сторінок** на кожній сторінці та компоненти, кожен із яких сягає **196 КБ**, бо висить на глобальному дереві повідомлень.
+
+Intlayer переносить роботу в компілятор. Словники за компонентами та очищення мертвого контенту — це результати збірки, а не домовленості. На тому самому застосунку: **рантайм 3,9 КБ**, **57,1 КБ на сторінку**, **0 % витоку сторінок**, компоненти **у 25 разів менші**. А якщо переписування не розглядається, `@intlayer/vue-i18n` проходить більшу частину шляху, не торкаючись компонентів.
+
+Усі сирі дані, тестові застосунки та скрипти знаходяться в [репозиторії Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Запустіть його самі.
+
+Докладніше див. у документі [«Чому Intlayer?»](https://intlayer.org/doc/why).

package/blog/vi/i18next_vs_intlayer-i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next vs @intlayer/i18next: Cùng API, Khác biệt Bundle"
 description: "Những thay đổi khi ứng dụng React hoặc Next.js giữ nguyên các lệnh gọi i18next, react-i18next và next-i18next nhưng phục vụ chúng thông qua các adapter @intlayer/i18next. JavaScript mỗi trang, kích thước component, rò rỉ chuỗi và quá trình hydrate được đo trên cùng một mã nguồn, cùng với những gì adapter giữ lại, bỏ qua và không thể thay thế."
 keywords:
@@ -28,6 +28,8 @@ author: aymericzip
 
 # i18next VS @intlayer/i18next | Cùng API, Khác biệt Bundle
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/i18next`, `@intlayer/react-i18next` và `@intlayer/next-i18next` là các adapter tương thích. Chúng cung cấp API `i18next` mà mã nguồn của bạn đang sử dụng (`useTranslation`, `t()`, `<Trans>`, `i18n.changeLanguage()`, `getFixedT`, `serverSideTranslations`...) và phân phối bản dịch từ các từ điển được biên dịch bởi Intlayer. Các component không hề thay đổi. Runtime bên dưới chúng mới là phần thay đổi.
 
 Bài viết này đo lường sự thay thế đó trên cùng một ứng dụng Next.js, được xây dựng một lần với `next-i18next` và một lần với `@intlayer/next-i18next`. Các số liệu đến từ [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Để so sánh `i18next` và Intlayer dưới dạng thư viện, hãy đọc [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer). Bài viết này tập trung vào những gì adapter mang lại khi bạn giữ nguyên mã nguồn của mình.
@@ -109,6 +111,10 @@ Bộ kiểm thử [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bl
 
 ### Kết quả trên Next.js
 
+Chọn số liệu và thư viện mà bạn quan tâm:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Cấu hình                     | Chiến lược     | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |   Hydration |
 | ---------------------------- | -------------- | ------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ----------: |
 | **base** (không dùng i18n)   | -              |        0.0 KB |         141.0 KB |        0.0% |      0.0% |             0.9 KB |        13.4 ms |     11.8 ms |
@@ -129,10 +135,21 @@ Bộ kiểm thử [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bl
 - **Hydration và chuyển đổi ngôn ngữ nhanh hơn.** Thời gian hydrate giảm từ 15.6 ms xuống **11.3 ms** (và từ 27.7 ms ở thiết lập `dynamic`, nơi việc nạp backend nằm trên luồng xử lý quan trọng). Chuyển đổi ngôn ngữ rút ngắn từ 15-16 ms xuống **11-12 ms**.
 - **Adapter không phải là runtime gốc.** `next-intlayer` chỉ nặng **141.3 KB**, thêm vỏn vẹn +0.3 KB so với ứng dụng gốc không có i18n. Adapter mang theo toàn bộ giao diện API của `i18next` (cú pháp nội suy, giải quyết hậu tố số nhiều và ngữ cảnh, phân tích thẻ `<Trans>`) trên nền tảng lõi Intlayer: 9.4 KB và +9.4 KB mỗi trang so với bản gốc. Đây là giải pháp cầu nối, không phải đích đến cuối cùng.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Bảng đầy đủ, từng thư viện và từng chiến lược, trong [báo cáo benchmark Next.js](https://intlayer.org/vi/doc/benchmark/nextjs).
+
 > Adapter `react-i18next` trên Vite / TanStack Start không nằm trong đợt thử nghiệm này. Số liệu cơ sở của `react-i18next` trên TanStack Start có tại [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer): 127-184 KB mỗi trang và mất 123-185 ms khi đổi ngôn ngữ với backend tải lười.
 
 ## Lý do các con số có sự thay đổi
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Không có gì trong thư mục `components/` thay đổi, sự cải thiện đến từ nơi mà `useTranslation` được liên kết.
 
 **Với `i18next`**, liên kết hướng tới instance toàn cục. Bất cứ thứ gì được tải vào đó (tất cả các ngôn ngữ trong `static`, toàn bộ namespace của ngôn ngữ đang hoạt động trong `dynamic`) đều có thể được truy cập từ mọi component gọi `useTranslation()`. Trình đóng gói không thể chia nhỏ hơn những gì instance đang nắm giữ, và runtime không thể biết trước component sẽ yêu cầu những khóa nào.
@@ -149,6 +166,10 @@ Không có gì trong thư mục `components/` thay đổi, sự cải thiện đ
     └── About.tsx                     # useTranslation(); t("about.title")
 ```
 
+Bất cứ thứ gì instance chứa đều được gửi đến mọi trang, và sự lãng phí gia tăng trên hai trục, trang và ngôn ngữ:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **Với `@intlayer/next-i18next`**, liên kết hướng tới từ điển. `syncJSON` chuyển đổi từng tệp namespace thành một từ điển; bước tối ưu hóa sẽ cung cấp cho component đúng từ điển mà nó cần, dưới dạng một import mà trình đóng gói có thể theo dõi và chia nhỏ theo từng trang và từng ngôn ngữ.
 
 ```bash
@@ -297,26 +318,112 @@ export default defineConfig({
 
 ## Những hạn chế cần lưu ý trước khi bắt đầu
 
-- **Backend và detector không hoạt động.** Lệnh gọi `i18n.use(HttpBackend)` chỉ chạy hàm `init` của plugin và không làm gì thêm. Nếu ứng dụng của bạn dựa vào việc tải bản dịch từ một CMS tại runtime, quy trình đó sẽ không còn khả dụng; hãy dùng CMS của Intlayer hoặc các lệnh `intlayer pull` / `push` thay thế.
-- **`resources` bị bỏ qua chứ không được gộp vào.** Khác với một số adapter khác, `@intlayer/i18next` không dùng `resources` dạng inline làm phương án dự phòng (fallback). Mọi khóa đều phải tồn tại trong các từ điển được đồng bộ, điều mà `intlayer test` sẽ kiểm tra.
-- **App Router yêu cầu chỉnh sửa provider.** Chỉ một tệp duy nhất như hướng dẫn ở trên. Với Pages Router sử dụng `appWithTranslation`, bạn không cần thay đổi gì.
-- **`next-i18next.config.js` không được đọc.** Các tùy chọn như `localePath`, `fallbackLng`, `reloadOnPrerender` không có tác dụng; cấu hình ngôn ngữ và fallback đều nằm ở `intlayer.config.ts`.
-- **Adapter vẫn tốn một phần dung lượng.** Nó bổ sung 9.4 KB runtime và +9.4 KB mỗi trang so với `next-intlayer`. Khi tất cả các component đã chuyển sang `useIntlayer`, bạn có thể gỡ bỏ adapter này.
+<AccordionGroup>
+<Accordion header="Các backend và trình phát hiện không hoạt động">
+
+`i18n.use(HttpBackend)` chỉ gọi init của plugin và không làm gì khác. Nếu ứng dụng của bạn dựa vào việc tìm nạp bản dịch từ CMS tại runtime, luồng đó sẽ không còn nữa; hãy sử dụng [Intlayer CMS](https://intlayer.org/vi/doc/concept/cms) hoặc các lệnh `intlayer pull` / `push` để thay thế. Việc phát hiện ngôn ngữ sẽ trở thành cấu hình định tuyến của Intlayer (tiền tố URL, cookie, tiêu đề).
+
+</Accordion>
+<Accordion header="resources bị bỏ qua, không được hợp nhất">
+
+Không giống như một số adapter khác, `@intlayer/i18next` không sử dụng `resources` nội tuyến làm phương án dự phòng. Mỗi khóa phải tồn tại trong các từ điển được đồng bộ hóa, điều mà `intlayer test` sẽ xác minh.
+
+</Accordion>
+<Accordion header="App Router cần chỉnh sửa provider">
+
+Chỉ một tệp, được hiển thị ở trên. Pages Router với `appWithTranslation` không cần làm gì cả.
+
+</Accordion>
+<Accordion header="next-i18next.config.js không được đọc">
+
+`localePath`, `fallbackLng`, `reloadOnPrerender` và các cấu hình tương tự không có tương đương; ngôn ngữ và dự phòng lấy từ `intlayer.config.ts`.
+
+</Accordion>
+<Accordion header="Adapter không miễn phí">
+
+9.4 KB runtime và +9.4 KB mỗi trang so với `next-intlayer`. Khi mọi component đã chuyển sang `useIntlayer`, hãy gỡ bỏ nó.
+
+</Accordion>
+</AccordionGroup>
 
 ## Khi nào nên sử dụng giải pháp nào?
 
-- **Tiếp tục dùng `i18next`** nếu ứng dụng của bạn phụ thuộc hoàn toàn vào các backend runtime (bản dịch do CMS cấp phát ngay lúc có request), vào hệ sinh thái plugin rộng lớn, hoặc trên các nền tảng không phải React mà adapter chưa hỗ trợ.
-- **Sử dụng `@intlayer/*`** nếu bạn đang dùng `react-i18next` / `next-i18next` và muốn giảm 68 KB dung lượng, component nhỏ hơn 8 lần, 0% rò rỉ chuỗi, khóa có kiểu dữ liệu an toàn và kiểm tra CI mà không cần viết lại toàn bộ mã nguồn. Đây là bước đệm tối ưu cho một codebase `i18next` hiện hữu.
-- **Dùng trực tiếp bản gốc (`next-intlayer` / `react-intlayer`)** cho các dự án mới, hoặc sau khi adapter đã hoàn thành vai trò chuyển tiếp của nó. Đây là lựa chọn nhẹ nhất (5.5 KB, +0.3 KB mỗi trang), hỗ trợ Server Components đồng bộ và các tệp `.content.ts` đặt cùng component.
+<AccordionGroup>
+<Accordion header="Ở lại với i18next">
+
+Ứng dụng của bạn phụ thuộc vào các backend tại runtime (bản dịch được phục vụ bởi CMS tại thời điểm yêu cầu), vào hệ sinh thái plugin hoặc vào môi trường không phải React mà các adapter không hỗ trợ.
+
+</Accordion>
+<Accordion header="Sử dụng @intlayer/*">
+
+Bạn đang dùng `react-i18next` / `next-i18next` và muốn tiết kiệm 68 KB, component nhỏ hơn 8 lần, 0% rò rỉ, khóa có định kiểu và kiểm tra CI mà không cần viết lại mã nguồn. Đây là điểm khởi đầu cho codebase `i18next` hiện có.
+
+</Accordion>
+<Accordion header="Chuyển sang native (next-intlayer / react-intlayer)">
+
+Dành cho các dự án mới hoặc khi adapter đã hoàn thành nhiệm vụ. Nó có runtime nhẹ nhất (5.5 KB, +0.3 KB mỗi trang) và mở khóa các Server Components đồng bộ cùng các tệp `.content.ts` theo từng component. Bắt đầu với [Intlayer với Next.js](https://intlayer.org/vi/doc/environment/nextjs) hoặc [với Vite và React](https://intlayer.org/vi/doc/environment/vite-and-react).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Khoản tiết kiệm 68 KB đến từ đâu?">
+
+Từ `resources: { en, fr, ... }`. Thiết lập cơ bản của `next-i18next` import JSON của mọi ngôn ngữ vào `init()`, do đó mỗi trang mang theo mọi namespace ở mọi ngôn ngữ: **218.5 KB** mỗi trang. Adapter không bao giờ đóng gói khối đó; nó chỉ cung cấp cho mỗi component từ điển được yêu cầu, trong ngôn ngữ hoạt động.
+
+</Question>
+
+<Question title="Các component <Trans> của tôi có tiếp tục hoạt động không?">
+
+Có, với `components`, thẻ được đánh số `<1>...</1>` và `values`. Tương tự với `{{interpolation}}`, lồng `$t(key)`, số nhiều `key_one` / `key_other` (được đánh giá bằng `Intl.PluralRules`), hậu tố ngữ cảnh và `returnObjects`.
+
+</Question>
+
+<Question title="Điều gì xảy ra nếu tôi sử dụng một tệp translation.json duy nhất cho mỗi ngôn ngữ?">
+
+Đặt `splitKeys: false` trong plugin `syncJSON`. Toàn bộ tệp vẫn là một từ điển duy nhất và một lệnh gọi `useTranslation()` đơn giản sẽ tiếp tục phân giải theo nó.
+
+</Question>
+
+<Question title="Điều này có giống với việc di chuyển hoàn toàn sang Intlayer không?">
+
+Không, đây là cầu nối. Adapter giữ nguyên API `i18next` và tốn 9.4 KB runtime; `next-intlayer` native chỉ tốn 5.5 KB và bổ sung các Server Components đồng bộ cùng các tệp `.content.ts` đặt cùng vị trí. Bạn có thể di chuyển từng component một vì các từ điển JSON và `.content.ts` cùng tồn tại.
+
+</Question>
+
+<Question title="Các dịch giả có thể tiếp tục làm việc như hiện nay không?">
+
+Có. `locales/{lng}/{ns}.json` vẫn là nguồn chân lý duy nhất: `syncJSON` đọc nó với cú pháp của i18next và ghi các bản dịch trở lại khi CLI hoặc CMS cập nhật.
+
+</Question>
+
+</FAQ>
 
 ## Các bài so sánh liên quan
 
-- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer) (so sánh hai thư viện, cùng bài benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl) (cùng chuỗi bài adapter)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/vi/blog/lingui-vs-intlayer-lingui) (cùng chuỗi bài adapter)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-vue-i18n) (cùng chuỗi bài adapter)
-- Hướng dẫn chuyển đổi: [i18next](https://intlayer.org/vi/doc/migration/i18next), [react-i18next](https://intlayer.org/vi/doc/migration/react-i18next), [next-i18next](https://intlayer.org/vi/doc/migration/next-i18next)
-- Tài liệu kỹ thuật adapter tương thích: [i18next](https://intlayer.org/vi/doc/compatibility/i18next), [react-i18next](https://intlayer.org/vi/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/vi/doc/compatibility/next-i18next)
+Cùng loạt adapter:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/vi/blog/next-intl-vs-intlayer-next-intl)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/vi/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+Các thư viện được so sánh trực tiếp:
+
+- [i18next vs Intlayer](https://intlayer.org/vi/blog/i18next-vs-intlayer), same benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/vi/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/vi/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Is i18next outdated?](https://intlayer.org/vi/blog/is-i18next-outdated)
+
+Tài liệu tham khảo:
+
+- Compat adapters: [i18next](https://intlayer.org/vi/doc/compatibility/i18next), [react-i18next](https://intlayer.org/vi/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/vi/doc/compatibility/next-i18next)
+- Migration guides: [i18next](https://intlayer.org/vi/doc/migration/i18next), [react-i18next](https://intlayer.org/vi/doc/migration/react-i18next), [next-i18next](https://intlayer.org/vi/doc/migration/next-i18next)
+- [Next.js benchmark report](https://intlayer.org/vi/doc/benchmark/nextjs) and [TanStack Start benchmark report](https://intlayer.org/vi/doc/benchmark/tanstack)
+- [Bundle optimization](https://intlayer.org/vi/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/vi/doc/compiler)
+- [Visual Editor](https://intlayer.org/vi/doc/concept/editor), [CMS](https://intlayer.org/vi/doc/concept/cms) and [AI translation](https://intlayer.org/vi/doc/concept/auto-fill)
 
 ## Kết luận