@intlayer/docs 9.5.6 → 9.5.7

package/blog/pl/vue-i18n_vs_intlayer_benchmark.md

@@ -0,0 +1,361 @@
+---
+createdAt: 2026-09-13
+updatedAt: 2026-09-13
+title: "vue-i18n vs Intlayer: Benchmark 2026"
+description: vue-i18n i Intlayer zmierzone na tej samej aplikacji Vite + Vue 3. Rozmiar biblioteki, JavaScript na stronę, wyciek treści, rozmiar komponentów i reaktywność przełączania locale, z objaśnieniem liczb.
+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 | Benchmark internacjonalizacji (i18n) dla Vue
+
+`vue-i18n` to referencyjna biblioteka i18n dla Vue. Intlayer to alternatywa oparta na kompilatorze, z treścią ograniczoną do komponentu, z integracją z Vue (`vue-intlayer`). Porównaliśmy już ich [funkcje i doświadczenie programisty](https://intlayer.org/blog/vue-i18n-vs-intlayer). Ten artykuł przygląda się temu, ile każda z nich kosztuje po zbudowaniu aplikacji.
+
+Dane pochodzą z [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), open-source'owego zestawu, który buduje tę samą aplikację z każdą biblioteką i rejestruje, co przeglądarka faktycznie pobiera i wykonuje.
+
+<TOC/>
+
+> **tl;dr**: Na tej samej aplikacji Vite + Vue 3 `vue-i18n` dostarcza **134,9 KB** gzipowanego JavaScriptu na stronę wobec **41,3 KB** dla aplikacji bez i18n. Intlayer dostarcza **57,1 KB**. Sam runtime `vue-i18n` waży **24,3 KB gzip** (6x więcej niż 3,9 KB Intlayera), każda strona niesie **90% ciągów z innych stron**, a komponent skompilowany w izolacji wciąga **196 KB**, ponieważ jest związany z globalnym drzewem komunikatów. Adapter `@intlayer/vue-i18n` zachowuje API `vue-i18n` i zmierzył **47,0 KB** na stronę.
+
+## W skrócie
+
+- **vue-i18n** - Faktyczny standard i18n dla Vue 2 / Vue 3 i rdzeń `@nuxtjs/i18n`. Komunikaty w stylu ICU, bloki `<i18n>` w SFC, dyrektywa `v-t`, formatery `d()` / `n()`, duży ekosystem. Komunikaty są rejestrowane na globalnej instancji w `createI18n()`; leniwe ładowanie per locale to ręczny wzorzec `setLocaleMessage()`, a podział per trasa jest do zbudowania samodzielnie.
+- **Intlayer** - Model treści skoncentrowany na komponentach. Słowniki `.content.ts` leżą obok komponentu, któremu służą, kompilator w czasie budowania (`vite-intlayer`) wykonuje tree-shaking i leniwe ładowanie per komponent i per locale, ścisłe typy TypeScript są generowane z treści, a brakujące tłumaczenia powodują błąd w czasie budowania. Zawiera helpery routera / SEO, Visual Editor / CMS oraz tłumaczenie wspomagane AI.
+
+| Biblioteka            | Gwiazdki GitHub                                                                                                                                                                | Łączna liczba commitów                                                                                                                                                             | Ostatni commit                                                                                                                                      | Pierwsza wersja | Wersja NPM                                                                                                  | Pobrania 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) | Kwiecień 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)       | Grudzień 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) |
+
+> Odznaki aktualizują się automatycznie. Zrzuty będą się zmieniać w czasie.
+
+## Porównanie funkcji obok siebie
+
+| Funkcja                                               | `vue-intlayer` (Intlayer)                                      | `vue-i18n`                                                                              |
+| ----------------------------------------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| **Tłumaczenia blisko komponentów**                    | ✅ Tak, `.content.ts` obok każdego komponentu                  | ✅ Przez bloki SFC `<i18n>` (opcjonalne); globalne katalogi to typowa konfiguracja      |
+| **Integracja z TypeScript**                           | ✅ Ścisłe typy generowane automatycznie z treści               | ✅ Dobre typowania; ścisłe bezpieczeństwo kluczy wymaga typowania schematu i dyscypliny |
+| **Wykrywanie brakujących tłumaczeń**                  | ✅ Błąd TypeScript + błąd/ostrzeżenie w czasie budowania       | ⚠️ Fallback w runtime + ostrzeżenie w konsoli                                           |
+| **Bogata treść (komponenty / Markdown)**              | ✅ Bezpośrednie wsparcie                                       | ⚠️ Interpolacja komponentów `<i18n-t>`; Markdown przez zewnętrzne wtyczki               |
+| **Wsparcie ICU**                                      | ⚠️ W trakcie prac                                              | ✅ Tak                                                                                  |
+| **Formatowanie (daty, liczby, waluty)**               | ✅ Formatery oparte na Intl                                    | ✅ `d()` / `n()` z `datetimeFormats` / `numberFormats`                                  |
+| **Zlokalizowany routing**                             | ✅ Helpery dla Vue Router / Nuxt, `getMultilingualUrls`        | ⚠️ Nie w rdzeniu (`@nuxtjs/i18n` lub własna konfiguracja routera)                       |
+| **Helpery SEO (hreflang, sitemap, robots)**           | ✅ Wbudowane helpery                                           | ❌ Nie w rdzeniu                                                                        |
+| **Tree-shaking (dostarczanie tylko używanej treści)** | ✅ Per komponent, per locale, zautomatyzowane przez kompilator | ⚠️ Ręcznie: podział katalogów, `setLocaleMessage()` per trasa                           |
+| **Leniwe ładowanie**                                  | ✅ `importMode: 'dynamic'` (jedna linia konfiguracji)          | ✅ Ręczny `import()` + `setLocaleMessage()`                                             |
+| **Usuwanie nieużywanej treści**                       | ✅ Martwe słowniki są odrzucane w czasie budowania             | ❌ Nie wbudowane                                                                        |
+| **Testowanie brakujących tłumaczeń (CLI / CI)**       | ✅ `npx intlayer content test`                                 | ⚠️ Zewnętrzne (`vue-i18n-extract`)                                                      |
+| **Tłumaczenie wspomagane AI**                         | ✅ Wbudowane, używa własnych kluczy dostawcy                   | ❌ Nie                                                                                  |
+| **Visual Editor / CMS**                               | ✅ Darmowy Visual Editor + opcjonalny CMS                      | ❌ Nie (zewnętrzne platformy lokalizacyjne)                                             |
+| **Serwer MCP i Agent Skills**                         | ✅ Tak                                                         | ❌ Nie                                                                                  |
+| **Ekosystem / społeczność**                           | ⚠️ Mniejszy, ale szybko rosnący                                | ✅ Duży i dojrzały w ekosystemie Vue                                                    |
+
+## Benchmark
+
+### Co zmierzono
+
+Zestaw [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) buduje **tę samą aplikację Vite + Vue 3** z każdą biblioteką: **10 stron** (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), **10 locale** (`en`, `fr`, `es`, `de`, `it`, `pt`, `zh`, `ja`, `ko`, `ru`), identyczne komponenty i identyczna treść. Strony są mierzone w `en` i `fr`.
+
+Obie biblioteki testowano w konfiguracji **static**, tej, którą dostarcza większość projektów Vue: dla `vue-i18n` JSON każdego locale importowany i przekazany do `createI18n({ messages })`; dla Intlayera domyślny `importMode: 'static'`. W tym trybie Intlayer również pakuje wszystkie locale, ale kompilator nadal ogranicza treść **per komponent**, więc strona niesie tylko słowniki komponentów, które renderuje.
+
+Dla każdego builda zestaw rejestruje:
+
+- **Lib size**: rozmiar gzip pustego komponentu, który tylko importuje bibliotekę i18n. Stały koszt runtime'u.
+- **Page JS**: gzipowany JavaScript pobierany na stronę, uśredniony po wszystkich stronach i locale.
+- **Locale leak %**: udział przetłumaczonych ciągów znalezionych w pobranym JS, które należą do locale, którego użytkownik **nie** przegląda (fingerprint na `en` i `fr`, więc 50% oznacza „drugie mierzone locale jest w pełni obecne"; przy 10 spakowanych locale rzeczywista strata jest większa).
+- **Page leak %**: udział przetłumaczonych ciągów znalezionych w pobranym JS, które należą do strony, na której użytkownik **nie** jest.
+- **Component avg**: średni rozmiar gzip każdego komponentu skompilowanego w izolacji. Pokazuje, ile runtime'u i18n i katalogu wciąga pojedynczy komponent.
+- **E2E reactivity**: rzeczywisty czas między wybraniem nowego locale a aktualizacją `html[lang]` w DOM (Playwright, 5 iteracji).
+- **Page load**: `PerformanceNavigationTiming.duration`.
+
+> Poniższe liczby pochodzą z uruchomienia z dnia **2026-09-12** z `vue-i18n` 11.4.0 i `intlayer` 9.5.0 / 9.5.1. Aplikacja testowa jest celowo mała (kilkadziesiąt ciągów na locale), więc procenty wycieku opisują **wzorzec**: rosną wraz z treścią, podczas gdy koszt runtime'u pozostaje stały.
+
+### Wyniki na Vite + Vue 3
+
+| Biblioteka                    | Strategia | Lib size (gz) | Lib size (min) | Page JS śr. (gz) | Locale leak | Page leak | Component śr. (gz) | Reaktywność E2E | Page load |
+| ----------------------------- | --------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | --------------: | --------: |
+| **base** (bez i18n)           | -         |        0,0 KB |         0,0 KB |          41,3 KB |        0,0% |         - |             1,1 KB |          1,8 ms |   10,8 ms |
+| `vue-i18n`                    | static    |       24,3 KB |        83,2 KB |         134,9 KB |       50,0% |     90,0% |           196,0 KB |          2,8 ms |   13,6 ms |
+| **`vue-intlayer`**            | static    |    **3,9 KB** |    **11,1 KB** |      **57,1 KB** |       56,8% |  **0,0%** |         **7,7 KB** |      **4,5 ms** |   13,8 ms |
+| `@intlayer/vue-i18n` (compat) | static    |        7,9 KB |        23,2 KB |          47,0 KB |       15,0% |      0,0% |             8,4 KB |          1,5 ms |    9,3 ms |
+
+> Kolumna page-leak aplikacji bazowej jest pusta: bez biblioteki i18n fingerprinting wyłapuje zakodowane na sztywno ciągi w współdzielonych chunkach i liczba nie ma znaczenia.
+
+**Jak to czytać**
+
+- **Koszt runtime'u.** `vue-i18n` to jeden z najcięższych runtime'ów w całym benchmarku: **24,3 KB gzip / 83,2 KB po minifikacji** dla pustego komponentu, który tylko go importuje. `vue-intlayer` kosztuje 3,9 KB gzip. Tę różnicę płaci się na każdej stronie niezależnie od tego, ile masz ciągów.
+- **JavaScript na stronę.** Aplikacja bez i18n waży 41,3 KB. `vue-i18n` ponad trzykrotnie ją zwiększa do **134,9 KB**; Intlayer ląduje na **57,1 KB**, +15,8 KB, z czego większość to dziesięć spakowanych locale (zobacz następny punkt).
+- **Wyciek.** Z `createI18n({ messages: { en, fr, ... } })` każda strona dostarcza wszystkie locale i ciągi wszystkich stron: **50% wycieku locale** (na dwóch fingerprintowanych locale) i **90% wycieku stron**. Tryb `static` Intlayera również pakuje wszystkie locale (stąd porównywalna wartość wycieku locale), ale ma **0% wycieku stron**: strona pobiera tylko słowniki komponentów, które renderuje. Przełączenie na `importMode: 'dynamic'` usuwa również wyciek locale; ta konfiguracja nie była częścią tego uruchomienia Vue.
+- **Rozmiar komponentu to miejsce, gdzie widać architekturę.** Komponent wywołujący `useI18n()` kompiluje się średnio do **196 KB**, ponieważ `t()` jest związane z globalną instancją, która przechowuje każdy komunikat każdego locale. Ten sam komponent z `useIntlayer()` kompiluje się do **7,7 KB**: sięga tylko po własny słownik.
+- **Reaktywność** nie jest problemem dla żadnej z nich (2-5 ms). System reaktywności Vue sprawia, że przełączanie locale jest tanie, gdy komunikaty są już w pamięci.
+- **`@intlayer/vue-i18n`**, adapter drop-in, zachowuje API `vue-i18n` i zmierzył **47,0 KB na stronę** oraz **8,4 KB na komponent**, bez zmian w kodzie aplikacji.
+
+> Dla porównania, to samo uruchomienie zmierzyło `fluent-vue` na 171,8 KB na stronę, 29,7 KB runtime'u i 217 KB na komponent.
+
+## Skąd ta różnica? Globalna instancja vs skompilowane słowniki
+
+`vue-i18n` to runtime. `createI18n()` buduje globalną instancję przechowującą drzewo komunikatów per locale; `useI18n()` wiąże z nią każdy komponent; `t("footer.github")` wyszukuje klucz w czasie renderowania. To właśnie umożliwia bloki SFC `<i18n>`, `v-t` i ładowanie komunikatów w runtime, i to również dlatego graf zależności każdego komponentu zawiera całe drzewo:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── ...                        # jeden plik per locale, wszystkie strony w środku
+└── src
+    ├── i18n.ts                    # createI18n({ messages: { en, fr, ... } })
+    ├── main.ts
+    └── components
+        └── Footer.vue             # const { t } = useI18n(); t("footer.github")
+```
+
+Optymalizacja oznacza, że **ty** dzielisz `en.json` na pliki per trasa, **ty** wywołujesz `setLocaleMessage()` w strażniku routera i **ty** utrzymujesz poprawne mapowanie trasa-plik, gdy komponenty się przemieszczają. Runtime nie może tego zrobić za ciebie, ponieważ nie ma pojęcia, o jakie klucze komponent poprosi.
+
+Intlayer przenosi tę wiedzę do builda. Treść jest deklarowana obok komponentu, a `vite-intlayer` ustala, który komponent importuje który słownik:
+
+```bash
+.
+├── intlayer.config.ts
+└── src
+    ├── main.ts                    # createApp(App).use(intlayer)
+    └── components
+        └── Footer
+            ├── Footer.vue         # useIntlayer("footer")
+            └── Footer.content.ts
+```
+
+Kompilator emituje, per słownik i per locale, dokładnie ten JSON, którego potrzebuje dany komponent, i odrzuca słowniki, których nic nie importuje. Ograniczenie per trasa jest konsekwencją ograniczenia per komponent, a nie zadaniem.
+
+> Aby odrzucić również nieużywane locale, ustaw `dictionary.importMode: 'dynamic'` w `intlayer.config.ts`. Zobacz [dokumentację optymalizacji bundle'a](https://intlayer.org/doc/concept/bundle-optimization).
+
+## Doświadczenie programisty
+
+### Konfiguracja
+
+**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");
+```
+
+### Komponent
+
+**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')` jest stringiem, dopóki sam nie otypujesz schematu komunikatów; literówka renderuje klucz.
+
+**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` i `increment` są otypowane; literówka to błąd TypeScript, brakująca wartość francuska to błąd builda.
+
+### Leniwe ładowanie per locale
+
+**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;
+};
+```
+
+Następnie wywołaj `loadLocaleMessages()` ze strażnika routera i samodzielnie podziel `locales/{locale}.json` per trasa, jeśli chcesz ograniczenia per strona.
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+const config: IntlayerConfig = {
+  // ...
+  dictionary: {
+    importMode: "dynamic",
+  },
+};
+```
+
+## Zachowaj API vue-i18n, uzyskaj wynik Intlayera
+
+`@intlayer/vue-i18n` to adapter drop-in: `useI18n()`, `t()`, `d()`, `n()`, interpolacja `{name}` i `{0}`, liczba mnoga z pipe (`"car | cars"`), `v-t` i `i18n.global.locale` nadal działają, serwowane ze słowników Intlayera skompilowanych przez `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()],
+});
+```
+
+W benchmarku build compat tej samej aplikacji zszedł ze **134,9 KB do 47,0 KB** na stronę i ze **196 KB do 8,4 KB** na komponent, bez zmian w komponentach. Twoje istniejące `locales/{locale}.json` mogą pozostać źródłem prawdy dzięki wtyczce synchronizacji JSON.
+
+Zobacz [przewodnik migracji z vue-i18n](https://intlayer.org/doc/migration/vue-i18n) i [dokumentację kompatybilności](https://intlayer.org/doc/compatibility/vue-i18n). Użytkownicy Nuxt mają tę samą ścieżkę przez [kompatybilność `@nuxtjs/i18n`](https://intlayer.org/doc/compatibility/nuxtjs-i18n).
+
+## Kiedy wybrać które?
+
+- **Wybierz vue-i18n**, jeśli chcesz standardowego podejścia Vue, polegasz na komunikatach ICU lub blokach SFC `<i18n>`, używasz już `@nuxtjs/i18n` lub platforma tłumaczeniowa oczekuje scentralizowanego JSON-a. Zarezerwuj czas na podział katalogów i leniwe ładowanie per trasa, jeśli rozmiar bundle'a ma znaczenie.
+- **Wybierz Intlayer**, jeśli chcesz **treści ograniczonej do komponentu**, **ścisłego TypeScriptu**, **błędów brakujących kluczy w czasie budowania**, **bezwysiłkowego tree-shakingu i leniwego ładowania** oraz wbudowanych narzędzi redakcyjnych (Visual Editor, CMS, tłumaczenie AI, serwer MCP). Szczególnie istotne dla dużych, modularnych baz kodu Vue / Nuxt i design systemów.
+- **Wybierz `@intlayer/vue-i18n`**, jeśli jesteś już na `vue-i18n` i chcesz zysków w rozmiarze bundle'a bez przepisywania.
+
+## Powiązane porównania
+
+- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (ten sam benchmark)
+- [i18next vs Intlayer](https://intlayer.org/blog/i18next-vs-intlayer) (ten sam benchmark)
+- [Lingui vs Intlayer](https://intlayer.org/blog/lingui-vs-intlayer) (ten sam benchmark)
+- [vue-i18n vs Intlayer (funkcje i DX)](https://intlayer.org/blog/vue-i18n-vs-intlayer)
+- [Czy vue-i18n jest przestarzały?](https://intlayer.org/blog/is-vue-i18n-outdated)
+
+## Gwiazdki GitHub
+
+Gwiazdki GitHub są silnym wskaźnikiem popularności projektu, zaufania społeczności i długoterminowej istotności. Choć nie są bezpośrednią miarą jakości technicznej, odzwierciedlają, ilu programistów uważa projekt za użyteczny, śledzi jego postępy i prawdopodobnie go zaadoptuje.
+
+[![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)
+
+## Podsumowanie
+
+`vue-i18n` jest dojrzały, elastyczny i głęboko zintegrowany z Vue. Benchmark pokazuje, ile kosztuje jego projekt runtime-first w buildzie Vite: **runtime 24 KB gzip**, **134,9 KB na stronę** dla aplikacji, która bez i18n waży 41 KB, **90% treści z innych stron** na każdej stronie oraz komponenty, z których każdy sięga **196 KB**, ponieważ wiszą na globalnym drzewie komunikatów.
+
+Intlayer przenosi pracę do kompilatora. Słowniki per komponent i usuwanie martwej treści to wyniki builda, a nie konwencje. Na tej samej aplikacji: **runtime 3,9 KB**, **57,1 KB na stronę**, **0% wycieku stron**, komponenty **25x mniejsze**. A jeśli przepisanie nie wchodzi w grę, `@intlayer/vue-i18n` pokonuje większość tej drogi bez zmian w komponentach.
+
+Wszystkie surowe dane, aplikacje testowe i skrypty są w [repozytorium Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Uruchom je sam.
+
+Więcej szczegółów znajdziesz w [dokumencie „Dlaczego Intlayer?"](https://intlayer.org/doc/why).

package/blog/pt/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: Mesma API, Outro Bundle"
 description: O que muda quando uma aplicação React ou Next.js mantém suas chamadas de i18next, react-i18next e next-i18next mas as executa através dos adaptadores @intlayer/i18next. JavaScript por página, tamanho de componentes, vazamento de conteúdo e hidratação medidos no mesmo código, além do que os adaptadores mantêm, ignoram e não substituem.
 keywords:
@@ -28,6 +28,8 @@ author: aymericzip
 
 # i18next VS @intlayer/i18next | Mesma API, Outro 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` e `@intlayer/next-i18next` são adaptadores de compatibilidade. Eles expõem a API do `i18next` que seu código já utiliza (`useTranslation`, `t()`, `<Trans>`, `i18n.changeLanguage()`, `getFixedT`, `serverSideTranslations`...) e a fornecem a partir de dicionários compilados pelo Intlayer. Os componentes não mudam. O runtime abaixo deles sim.
 
 Este artigo analisa essa substituição na mesma aplicação Next.js, construída uma vez com `next-i18next` e outra com `@intlayer/next-i18next`. Os dados são do [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Para comparar `i18next` e Intlayer como bibliotecas completas, leia [i18next vs Intlayer](https://intlayer.org/pt/blog/i18next-vs-intlayer). Este artigo se concentra no que o adaptador transforma quando você preserva seu código como está.
@@ -109,6 +111,10 @@ Para cada compilação, registram-se:
 
 ### Resultados no Next.js
 
+Escolha as métricas e as bibliotecas que importam para você:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Setup                        | Estratégia     | Tamanho lib (gz) | Média JS pág (gz) | Vazamento locale | Vazamento pág | Média comp (gz) | Reatividade E2E |  Hidratação |
 | ---------------------------- | -------------- | ---------------: | ----------------: | ---------------: | ------------: | --------------: | --------------: | ----------: |
 | **base** (sem i18n)          | -              |           0.0 KB |          141.0 KB |             0.0% |          0.0% |          0.9 KB |         13.4 ms |     11.8 ms |
@@ -129,10 +135,21 @@ Para cada compilação, registram-se:
 - **Hidratação e alternância de idioma aceleradas.** A hidratação cai de 15.6 ms para **11.3 ms** (e de 27.7 ms no modo `dynamic`, no qual o carregamento do backend reside no caminho crítico). A troca de idioma cai de 15-16 ms para **11-12 ms**.
 - **O adaptador é diferente do runtime nativo.** O `next-intlayer` crava **141.3 KB**, meros +0.3 KB acima do app sem i18n. O adaptador suporta as particularidades da API do `i18next` (expressões de interpolação, sufixos de plural e contexto, tags `<Trans>`) sobre o núcleo do Intlayer: 9.4 KB e +9.4 KB por página em relação ao nativo. Atua como transição, não como destino final.
 
+<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;"
+/>
+
+> Tabela completa, cada biblioteca e cada estratégia, no [relatório de benchmark do Next.js](https://intlayer.org/pt/doc/benchmark/nextjs).
+
 > O adaptador `react-i18next` no Vite / TanStack Start não constou desta rodada de testes. A medição para `react-i18next` no TanStack Start pode ser verificada em [i18next vs Intlayer](https://intlayer.org/pt/blog/i18next-vs-intlayer): 127-184 KB por página e 123-185 ms na troca de idioma com backend sob demanda.
 
 ## O motivo da mudança nos indicadores
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Nenhum arquivo em `components/` foi alterado, logo o ganho advém da entidade à qual `useTranslation` se acopla.
 
 **Com o `i18next`**, a ligação é feita na instância global. Qualquer recurso alocado nela (todos os idiomas em `static`, o namespace completo do idioma ativo em `dynamic`) torna-se acessível para qualquer componente chamador de `useTranslation()`. O bundler não consegue fragmentar abaixo do volume contido na instância, e o runtime não é capaz de prever quais chaves serão demandadas em renderização.
@@ -149,6 +166,10 @@ Nenhum arquivo em `components/` foi alterado, logo o ganho advém da entidade à
     └── About.tsx                     # useTranslation(); t("about.title")
 ```
 
+Tudo o que a instância contém é enviado para todas as páginas, e o desperdício cresce em dois eixos, páginas e idiomas:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **Com o `@intlayer/next-i18next`**, a ligação é feita diretamente com o dicionário. O plugin `syncJSON` transforma cada arquivo de namespace em um dicionário; o ciclo de otimização repassa ao componente apenas o dicionário declarado, na forma de import que o empacotador rastreia e separa por página e locale.
 
 ```bash
@@ -297,26 +318,112 @@ O `reactI18nextVitePlugin()` encapsula o `vite-intlayer` e define os aliases par
 
 ## Limitações importantes antes de iniciar
 
-- **Backends e detectores ficam desativados.** `i18n.use(HttpBackend)` executa o método `init` do plugin e encerra. Se seu projeto dependia de buscar traduções em um CMS em tempo de execução, esse fluxo é descontinuado; use o CMS do Intlayer ou os comandos `intlayer pull` / `push`.
-- **`resources` é descartado, não combinado.** Ao contrário de certos adaptadores, o `@intlayer/i18next` não usa `resources` inline como recurso de segurança. Toda chave precisa existir nos dicionários sincronizados, o que é validado por `intlayer test`.
-- **App Router necessita do ajuste de provider.** Apenas um arquivo, apresentado acima. O Pages Router com `appWithTranslation` opera sem ajustes adicionais.
-- **`next-i18next.config.js` não é aproveitado.** Parâmetros como `localePath`, `fallbackLng` e `reloadOnPrerender` não são lidos; configurações de idioma e fallback residem em `intlayer.config.ts`.
-- **O adaptador possui um custo.** 9.4 KB de runtime e +9.4 KB por página em relação ao `next-intlayer`. Assim que todos os componentes forem convertidos para `useIntlayer`, ele pode ser desinstalado.
+<AccordionGroup>
+<Accordion header="Backends e detectores são inertes">
+
+`i18n.use(HttpBackend)` chama o init do plugin e nada mais. Se o seu aplicativo dependia de buscar traduções de um CMS em tempo de execução, esse fluxo desaparece; use o [CMS do Intlayer](https://intlayer.org/pt/doc/concept/cms) ou os comandos `intlayer pull` / `push`. A detecção de idioma passa a ser a configuração de roteamento do Intlayer (prefixo de URL, cookie, cabeçalho).
+
+</Accordion>
+<Accordion header="resources é ignorado, não mesclado">
+
+Ao contrário de outros adaptadores, o `@intlayer/i18next` não usa `resources` em linha como fallback. Cada chave deve existir nos dicionários sincronizados, o que o `intlayer test` verifica.
+
+</Accordion>
+<Accordion header="O App Router requer edição do provider">
+
+Apenas um arquivo, mostrado acima. O Pages Router com `appWithTranslation` não requer nada.
+
+</Accordion>
+<Accordion header="next-i18next.config.js não é lido">
+
+`localePath`, `fallbackLng`, `reloadOnPrerender` e semelhantes não têm equivalente; idiomas e fallback vêm de `intlayer.config.ts`.
+
+</Accordion>
+<Accordion header="O adaptador não é gratuito">
+
+9.4 KB de runtime e +9.4 KB por página em relação ao `next-intlayer`. Assim que cada componente migrar para o `useIntlayer`, remova-o.
+
+</Accordion>
+</AccordionGroup>
 
 ## Quando utilizar cada alternativa?
 
-- **Mantenha-se no `i18next`** se sua infraestrutura depender de backends dinâmicos em tempo de execução (traduções servidas sob demanda por CMS), de plugins exclusivos ou de um ambiente fora do ecossistema React não atendido pelos adaptadores.
-- **Adote `@intlayer/*`** se você já opera com `react-i18next` / `next-i18next` e deseja resgatar 68 KB, atingir componentes 8x menores, eliminar vazamento (0%), obter chaves tipadas e validação na CI sem reescrever seus componentes. É a transição recomendada para bases existentes de `i18next`.
-- **Prefira o modelo nativo (`next-intlayer` / `react-intlayer`)** em projetos novos ou logo após o adaptador consolidar a migração. Trata-se da opção mais rápida (5.5 KB, +0.3 KB por página), liberando Server Components síncronos e arquivos `.content.ts` por componente.
+<AccordionGroup>
+<Accordion header="Permanecer no i18next">
+
+Seu aplicativo depende de backends em tempo de execução (traduções servidas por um CMS no momento da requisição), do ecossistema de plugins ou de um destino não-React não coberto pelos adaptadores.
+
+</Accordion>
+<Accordion header="Usar @intlayer/*">
+
+Você está no `react-i18next` / `next-i18next` e quer os 68 KB economizados, componentes 8 vezes menores, 0% de vazamento, chaves tipadas e verificações no CI sem reescrever o código. Este é o ponto de entrada para uma base de código `i18next` existente.
+
+</Accordion>
+<Accordion header="Tornar-se nativo (next-intlayer / react-intlayer)">
+
+Para novos projetos, ou assim que o adaptador cumprir seu papel. Possui o runtime mais leve (5.5 KB, +0.3 KB por página) e desbloqueia Server Components síncronos e arquivos `.content.ts` por componente. Comece com [Intlayer com Next.js](https://intlayer.org/pt/doc/environment/nextjs) ou [com Vite e React](https://intlayer.org/pt/doc/environment/vite-and-react).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="De onde vêm os 68 KB?">
+
+De `resources: { en, fr, ... }`. A configuração padrão do `next-i18next` importa o JSON de cada idioma no `init()`, portanto, cada página carrega cada namespace em cada idioma: **218.5 KB** por página. O adaptador nunca empacota esse bloco; ele entrega a cada componente apenas o dicionário nomeado, no idioma ativo.
+
+</Question>
+
+<Question title="Meus componentes <Trans> continuam funcionando?">
+
+Sim, com `components`, tags numeradas `<1>...</1>` e `values`. O mesmo vale para `{{interpolation}}`, aninhamento `$t(key)`, plurais `key_one` / `key_other` (avaliados com `Intl.PluralRules`), sufixos de contexto e `returnObjects`.
+
+</Question>
+
+<Question title="E se eu usar um único translation.json por idioma?">
+
+Defina `splitKeys: false` no plugin `syncJSON`. Todo o arquivo permanece como um único dicionário e um `useTranslation()` simples continuará resolvendo contra ele.
+
+</Question>
+
+<Question title="Isso é o mesmo que migrar para o Intlayer?">
+
+Não, é a ponte. O adaptador mantém a API do `i18next` e custa 9.4 KB de runtime; o `next-intlayer` nativo custa 5.5 KB e adiciona Server Components síncronos e arquivos `.content.ts` co-localizados. Você pode migrar componente por componente, já que os dicionários JSON e `.content.ts` coexistem.
+
+</Question>
+
+<Question title="Os tradutores podem continuar trabalhando como fazem hoje?">
+
+Sim. `locales/{lng}/{ns}.json` permanece a fonte da verdade: o `syncJSON` o lê com o dialeto do i18next e grava as traduções de volta quando a CLI ou o CMS os atualiza.
+
+</Question>
+
+</FAQ>
 
 ## Comparações relacionadas
 
-- [i18next vs Intlayer](https://intlayer.org/pt/blog/i18next-vs-intlayer) (comparação das bibliotecas, mesmo benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/pt/blog/next-intl-vs-intlayer-next-intl) (mesma série de adaptadores)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/pt/blog/lingui-vs-intlayer-lingui) (mesma série de adaptadores)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer-vue-i18n) (mesma série de adaptadores)
-- Guias de migração: [i18next](https://intlayer.org/pt/doc/migration/i18next), [react-i18next](https://intlayer.org/pt/doc/migration/react-i18next), [next-i18next](https://intlayer.org/pt/doc/migration/next-i18next)
-- Referência dos adaptadores: [i18next](https://intlayer.org/pt/doc/compatibility/i18next), [react-i18next](https://intlayer.org/pt/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/pt/doc/compatibility/next-i18next)
+Mesma série de adaptadores:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/pt/blog/next-intl-vs-intlayer-next-intl)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/pt/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+Bibliotecas comparadas diretamente:
+
+- [i18next vs Intlayer](https://intlayer.org/pt/blog/i18next-vs-intlayer), same benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/pt/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/pt/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Is i18next outdated?](https://intlayer.org/pt/blog/is-i18next-outdated)
+
+Documentação de referência:
+
+- Compat adapters: [i18next](https://intlayer.org/pt/doc/compatibility/i18next), [react-i18next](https://intlayer.org/pt/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/pt/doc/compatibility/next-i18next)
+- Migration guides: [i18next](https://intlayer.org/pt/doc/migration/i18next), [react-i18next](https://intlayer.org/pt/doc/migration/react-i18next), [next-i18next](https://intlayer.org/pt/doc/migration/next-i18next)
+- [Next.js benchmark report](https://intlayer.org/pt/doc/benchmark/nextjs) and [TanStack Start benchmark report](https://intlayer.org/pt/doc/benchmark/tanstack)
+- [Bundle optimization](https://intlayer.org/pt/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/pt/doc/compiler)
+- [Visual Editor](https://intlayer.org/pt/doc/concept/editor), [CMS](https://intlayer.org/pt/doc/concept/cms) and [AI translation](https://intlayer.org/pt/doc/concept/auto-fill)
 
 ## Conclusão