@intlayer/docs 9.5.6 → 9.5.8

package/blog/fr/vue-i18n_vs_intlayer_benchmark.md

@@ -23,17 +23,339 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Benchmark d'internationalisation Vue (i18n)
 
-`vue-i18n` est la bibliothèque i18n de référence pour Vue. Intlayer est une alternative basée sur un compilateur, délimitée au composant, avec une intégration Vue (`vue-intlayer`). Nous avons déjà comparé leurs [fonctionnalités et expérience développeur](https://intlayer.org/blog/vue-i18n-vs-intlayer). Cet article examine le coût de chacun une fois l'application construite.
+`vue-i18n` est la librairie i18n de référence pour Vue. Intlayer est une alternative basée sur un compilateur, à contenu scopé par composant, avec une intégration Vue (`vue-intlayer`). Nous avons déjà comparé leurs [fonctionnalités et leur expérience développeur](https://intlayer.org/blog/vue-i18n-vs-intlayer). Cet article regarde ce que chacune coûte une fois l'application construite.
 
-Les données proviennent de [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), une suite open-source qui construit la même application avec chaque bibliothèque et enregistre ce que le navigateur télécharge et exécute réellement.
+Les données viennent de [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), une suite open-source qui construit la même application avec chaque librairie et enregistre ce que le navigateur télécharge et exécute réellement.
 
 <TOC/>
 
-> **tl;dr**: Sur la même app Vite + Vue 3, `vue-i18n` embarque **134.9 KB** de JavaScript gzippé par page contre **41.3 KB** pour l'app sans i18n. Intlayer embarque **57.1 KB**. Le runtime `vue-i18n` seul pèse **24.3 KB gzip** (6x les 3.9 KB d'Intlayer), chaque page porte **90% des chaînes de pages étrangères**, et un composant compilé en isolation traîne **196 KB** car il est lié à l'arbre global des messages. L'adaptateur `@intlayer/vue-i18n` conserve l'API `vue-i18n` et a mesuré **47.0 KB** par page.
+> **tl;dr** : Sur la même app Vite + Vue 3, `vue-i18n` livre **134,9 KB** de JavaScript gzippé par page contre **41,3 KB** pour l'app sans i18n. Intlayer livre **57,1 KB**. Le runtime de `vue-i18n` pèse à lui seul **24,3 KB gzip** (6x les 3,9 KB d'Intlayer), chaque page embarque **90 % des chaînes des autres pages**, et un composant compilé isolément entraîne **196 KB** parce qu'il est lié à l'arbre global de messages. L'adaptateur `@intlayer/vue-i18n` conserve l'API de `vue-i18n` et a mesuré **47,0 KB** par page.
 
-## En résumé
+## En bref
 
-- **vue-i18n** - La bibliothèque i18n de facto pour Vue 2 / Vue 3 et le cœur de `@nuxtjs/i18n`. Messages au style ICU, blocs `<i18n>` dans les SFC, directive `v-t`, formatters `d()` / `n()`, grand écosystème. Les messages sont enregistrés sur une instance globale à `createI18n()`; le chargement lazy par locale suit un pattern `setLocaleMessage()` manuel, et la division per-route est à construire vous-même.
-- **Intlayer** - Modèle de contenu centré sur les composants. Les dictionnaires `.content.ts` se situent à côté du composant qu'ils servent, un compilateur build-time (`vite-intlayer`) tree-shake et lazy-load par composant et par locale, les types TypeScript stricts sont générés depuis votre contenu, et les traductions manquantes échouent au moment du build. Inclut des helpers pour router / SEO, un Visual Editor / CMS et une traduction assistée par IA.
+- **vue-i18n** - La librairie i18n de facto pour Vue 2 / Vue 3 et le cœur de `@nuxtjs/i18n`. Messages de style ICU, blocs `<i18n>` dans les SFC, directive `v-t`, formateurs `d()` / `n()`, large écosystème. Les messages sont enregistrés sur une instance globale au `createI18n()` ; le chargement paresseux par locale est un pattern `setLocaleMessage()` manuel, et le découpage par route est à construire vous-même.
+- **Intlayer** - Modèle de contenu centré sur les composants. Les dictionnaires `.content.ts` sont placés à côté du composant qu'ils servent, un compilateur au build (`vite-intlayer`) les tree-shake et les charge paresseusement par composant et par locale, des types TypeScript stricts sont générés depuis votre contenu, et les traductions manquantes échouent au build. Fournit des helpers routeur / SEO, un Visual Editor / CMS et une traduction assistée par IA.
 
-| Bibliothèque | Stars GitHub | Commits totaux | Dernier commit | Première version | Version NPM | Téléchargements NPM |
+| Librairie             | Étoiles GitHub                                                                                                                                                                 | Commits totaux                                                                                                                                                                     | Dernier commit                                                                                                                                      | Première version | Version NPM                                                                                                 | Téléchargements 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) | Avril 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)       | Déc. 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) |
+
+> Les badges se mettent à jour automatiquement. Les instantanés varieront avec le temps.
+
+## Comparaison des fonctionnalités côte à côte
+
+| Fonctionnalité                                      | `vue-intlayer` (Intlayer)                                   | `vue-i18n`                                                                              |
+| --------------------------------------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| **Traductions près des composants**                 | ✅ Oui, `.content.ts` colocalisé avec chaque composant      | ✅ Via les blocs SFC `<i18n>` (optionnel) ; les catalogues globaux sont l'usage courant |
+| **Intégration TypeScript**                          | ✅ Types stricts auto-générés depuis le contenu             | ✅ Bons typages ; la sûreté stricte des clés demande un schéma typé et de la discipline |
+| **Détection des traductions manquantes**            | ✅ Erreur TypeScript + erreur/avertissement au build        | ⚠️ Fallback au runtime + avertissement console                                          |
+| **Contenu riche (composants / Markdown)**           | ✅ Support direct                                           | ⚠️ Interpolation de composants `<i18n-t>` ; Markdown via plugins externes               |
+| **Support ICU**                                     | ⚠️ En cours                                                 | ✅ Oui                                                                                  |
+| **Formatage (dates, nombres, devises)**             | ✅ Formateurs basés sur Intl                                | ✅ `d()` / `n()` avec `datetimeFormats` / `numberFormats`                               |
+| **Routage localisé**                                | ✅ Helpers pour Vue Router / Nuxt, `getMultilingualUrls`    | ⚠️ Pas dans le cœur (`@nuxtjs/i18n` ou configuration routeur personnalisée)             |
+| **Helpers SEO (hreflang, sitemap, robots)**         | ✅ Helpers intégrés                                         | ❌ Pas dans le cœur                                                                     |
+| **Tree-shaking (ne livrer que le contenu utilisé)** | ✅ Par composant, par locale, automatisé par le compilateur | ⚠️ Manuel : découper les catalogues, `setLocaleMessage()` par route                     |
+| **Chargement paresseux**                            | ✅ `importMode: 'dynamic'` (une ligne de config)            | ✅ `import()` manuel + `setLocaleMessage()`                                             |
+| **Purge du contenu inutilisé**                      | ✅ Les dictionnaires morts sont retirés au build            | ❌ Pas intégré                                                                          |
+| **Test des traductions manquantes (CLI / CI)**      | ✅ `npx intlayer content test`                              | ⚠️ Tiers (`vue-i18n-extract`)                                                           |
+| **Traduction par IA**                               | ✅ Intégrée, utilise vos propres clés de fournisseur        | ❌ Non                                                                                  |
+| **Visual Editor / CMS**                             | ✅ Visual Editor gratuit + CMS optionnel                    | ❌ Non (plateformes de localisation externes)                                           |
+| **Serveur MCP & Agent Skills**                      | ✅ Oui                                                      | ❌ Non                                                                                  |
+| **Écosystème / communauté**                         | ⚠️ Plus petit mais en forte croissance                      | ✅ Large et mature dans l'écosystème Vue                                                |
+
+## Le benchmark
+
+### Ce qui a été mesuré
+
+La suite [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) construit **la même application Vite + Vue 3** avec chaque librairie : **10 pages** (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), **10 locales** (`en`, `fr`, `es`, `de`, `it`, `pt`, `zh`, `ja`, `ko`, `ru`), composants identiques et contenu identique. Les pages sont mesurées en `en` et `fr`.
+
+Les deux librairies ont été testées dans la configuration **static**, celle que la plupart des projets Vue livrent : pour `vue-i18n`, le JSON de chaque locale importé et passé à `createI18n({ messages })` ; pour Intlayer, le `importMode: 'static'` par défaut. Dans ce mode Intlayer embarque aussi toutes les locales, mais le compilateur scope toujours le contenu **par composant**, donc une page n'embarque que les dictionnaires des composants qu'elle rend.
+
+Pour chaque build, la suite enregistre :
+
+- **Lib size** : taille gzip d'un composant vide qui importe seulement la librairie i18n. Le coût fixe du runtime.
+- **Page JS** : JavaScript gzip téléchargé par page, moyenné sur toutes les pages et locales.
+- **Locale leak %** : part des chaînes traduites trouvées dans le JS téléchargé qui appartiennent à une locale que l'utilisateur **ne** consulte **pas** (empreintes sur `en` et `fr`, donc 50 % signifie « l'autre locale mesurée est entièrement présente » ; avec 10 locales embarquées, le gaspillage réel est plus élevé).
+- **Page leak %** : part des chaînes traduites trouvées dans le JS téléchargé qui appartiennent à une page sur laquelle l'utilisateur **n'est pas**.
+- **Component avg** : taille gzip moyenne de chaque composant compilé isolément. Montre combien de runtime i18n et de catalogue un seul composant entraîne.
+- **E2E reactivity** : temps réel entre la sélection d'une nouvelle locale et la mise à jour de `html[lang]` dans le DOM (Playwright, 5 itérations).
+- **Page load** : `PerformanceNavigationTiming.duration`.
+
+> Les chiffres ci-dessous viennent du run daté du **2026-09-12** avec `vue-i18n` 11.4.0 et `intlayer` 9.5.0 / 9.5.1. L'application de test est volontairement petite (quelques dizaines de chaînes par locale), donc les pourcentages de fuite décrivent un **pattern** : ils grandissent avec votre contenu alors que le coût du runtime reste fixe.
+
+### Résultats sur Vite + Vue 3
+
+| Librairie                     | Stratégie | Lib size (gz) | Lib size (min) | Page JS moy. (gz) | Locale leak | Page leak | Component moy. (gz) | Réactivité E2E | Page load |
+| ----------------------------- | --------- | ------------: | -------------: | ----------------: | ----------: | --------: | ------------------: | -------------: | --------: |
+| **base** (sans 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 |
+
+> La colonne page-leak de l'app de base est laissée vide : sans librairie i18n, l'empreinte capte des chaînes codées en dur dans les chunks partagés et le chiffre n'a pas de sens.
+
+**Comment le lire**
+
+- **Coût du runtime.** `vue-i18n` est l'un des runtimes les plus lourds de tout le benchmark : **24,3 KB gzip / 83,2 KB minifié** pour un composant vide qui l'importe seulement. `vue-intlayer` coûte 3,9 KB gzip. Cet écart est payé sur chaque page, quel que soit le nombre de chaînes.
+- **JavaScript par page.** L'app sans i18n pèse 41,3 KB. `vue-i18n` fait plus que la tripler à **134,9 KB** ; Intlayer atterrit à **57,1 KB**, +15,8 KB, dont l'essentiel vient des dix locales embarquées (voir le point suivant).
+- **Fuite.** Avec `createI18n({ messages: { en, fr, ... } })`, chaque page livre toutes les locales et les chaînes de toutes les pages : **50 % de fuite de locale** (sur les deux locales mesurées) et **90 % de fuite de page**. Le mode `static` d'Intlayer embarque aussi toutes les locales (d'où un chiffre de fuite de locale comparable) mais a **0 % de fuite de page** : une page ne tire que les dictionnaires des composants qu'elle rend. Passer à `importMode: 'dynamic'` supprime aussi la fuite de locale ; cette configuration ne faisait pas partie de ce run Vue.
+- **La taille des composants est là où l'architecture se voit.** Un composant appelant `useI18n()` compile à **196 KB** en moyenne, parce que `t()` est lié à l'instance globale qui contient tous les messages de toutes les locales. Le même composant avec `useIntlayer()` compile à **7,7 KB** : il n'atteint que son propre dictionnaire.
+- **La réactivité** n'est un problème pour aucun des deux (2-5 ms). Le système de réactivité de Vue rend le changement de locale peu coûteux une fois les messages en mémoire.
+- **`@intlayer/vue-i18n`**, l'adaptateur drop-in, conserve l'API de `vue-i18n` et a mesuré **47,0 KB par page** et **8,4 KB par composant**, sans toucher au code de l'application.
+
+> Pour référence, le même run a mesuré `fluent-vue` à 171,8 KB par page, 29,7 KB de runtime et 217 KB par composant.
+
+## Pourquoi cet écart ? Instance globale vs dictionnaires compilés
+
+`vue-i18n` est un runtime. `createI18n()` construit une instance globale contenant un arbre de messages par locale ; `useI18n()` lie chaque composant à celle-ci ; `t("footer.github")` cherche la clé au moment du rendu. C'est ce qui rend possibles les blocs SFC `<i18n>`, `v-t` et le chargement de messages au runtime, et c'est aussi pourquoi le graphe de dépendances de chaque composant inclut l'arbre entier :
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── ...                        # un fichier par locale, toutes les pages dedans
+└── src
+    ├── i18n.ts                    # createI18n({ messages: { en, fr, ... } })
+    ├── main.ts
+    └── components
+        └── Footer.vue             # const { t } = useI18n(); t("footer.github")
+```
+
+Optimiser signifie que **vous** découpez `en.json` en fichiers par route, que **vous** appelez `setLocaleMessage()` dans un guard du routeur, et que **vous** maintenez la correspondance route → fichier à jour quand les composants bougent. Le runtime ne peut pas le faire pour vous parce qu'il n'a aucune idée des clés qu'un composant va demander.
+
+Intlayer déplace cette connaissance vers le build. Le contenu est déclaré à côté du composant, et `vite-intlayer` résout quel composant importe quel dictionnaire :
+
+```bash
+.
+├── intlayer.config.ts
+└── src
+    ├── main.ts                    # createApp(App).use(intlayer)
+    └── components
+        └── Footer
+            ├── Footer.vue         # useIntlayer("footer")
+            └── Footer.content.ts
+```
+
+Le compilateur émet, par dictionnaire et par locale, exactement le JSON dont ce composant a besoin, et supprime les dictionnaires que rien n'importe. Le scoping par route est une conséquence du scoping par composant, pas une tâche.
+
+> Pour retirer aussi les locales inutilisées, mettez `dictionary.importMode: 'dynamic'` dans `intlayer.config.ts`. Voir la [doc d'optimisation du bundle](https://intlayer.org/doc/concept/bundle-optimization).
+
+## Expérience développeur
+
+### Configuration
+
+**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");
+```
+
+### Composant
+
+**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')` est une chaîne tant que vous ne typez pas vous-même le schéma des messages ; une faute de frappe affiche la clé.
+
+**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` et `increment` sont typés ; une faute de frappe est une erreur TypeScript, une valeur française manquante est une erreur de build.
+
+### Chargement paresseux par 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;
+};
+```
+
+Ensuite appelez `loadLocaleMessages()` depuis un guard du routeur, et découpez vous-même `locales/{locale}.json` par route si vous voulez un scoping par page.
+
+**Intlayer**
+
+```ts fileName="intlayer.config.ts"
+const config: IntlayerConfig = {
+  // ...
+  dictionary: {
+    importMode: "dynamic",
+  },
+};
+```
+
+## Gardez l'API de vue-i18n, obtenez la sortie d'Intlayer
+
+`@intlayer/vue-i18n` est un adaptateur drop-in : `useI18n()`, `t()`, `d()`, `n()`, l'interpolation `{name}` et `{0}`, les pluriels à pipe (`"car | cars"`), `v-t` et `i18n.global.locale` continuent de fonctionner, servis depuis des dictionnaires Intlayer compilés par `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()],
+});
+```
+
+Dans le benchmark, le build compat de la même app est passé de **134,9 KB à 47,0 KB** par page et de **196 KB à 8,4 KB** par composant, sans toucher aux composants. Vos `locales/{locale}.json` existants peuvent rester la source de vérité grâce au plugin de synchronisation JSON.
+
+Voir le [guide de migration vue-i18n](https://intlayer.org/doc/migration/vue-i18n) et la [doc de compatibilité](https://intlayer.org/doc/compatibility/vue-i18n). Les utilisateurs de Nuxt ont le même chemin via la [compatibilité `@nuxtjs/i18n`](https://intlayer.org/doc/compatibility/nuxtjs-i18n).
+
+## Quand choisir lequel ?
+
+- **Choisissez vue-i18n** si vous voulez l'approche Vue standard, si vous dépendez des messages ICU ou des blocs SFC `<i18n>`, si vous utilisez déjà `@nuxtjs/i18n`, ou si une plateforme de traduction attend du JSON centralisé. Prévoyez le temps de découper les catalogues et de charger paresseusement par route si la taille du bundle compte.
+- **Choisissez Intlayer** si vous voulez du **contenu scopé par composant**, du **TypeScript strict**, des **erreurs de clés manquantes au build**, du **tree-shaking et du chargement paresseux sans effort**, et un outillage éditorial intégré (Visual Editor, CMS, traduction IA, serveur MCP). Particulièrement pertinent pour les grandes bases de code Vue / Nuxt modulaires et les design systems.
+- **Choisissez `@intlayer/vue-i18n`** si vous êtes déjà sur `vue-i18n` et voulez les gains de bundle sans réécriture.
+
+## Comparaisons associées
+
+- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (même benchmark)
+- [i18next vs Intlayer](https://intlayer.org/blog/i18next-vs-intlayer) (même benchmark)
+- [Lingui vs Intlayer](https://intlayer.org/blog/lingui-vs-intlayer) (même benchmark)
+- [vue-i18n vs Intlayer (fonctionnalités & DX)](https://intlayer.org/blog/vue-i18n-vs-intlayer)
+- [vue-i18n est-il dépassé ?](https://intlayer.org/blog/is-vue-i18n-outdated)
+
+## Étoiles GitHub
+
+Les étoiles GitHub sont un indicateur fort de la popularité d'un projet, de la confiance de la communauté et de sa pertinence à long terme. Bien qu'elles ne mesurent pas directement la qualité technique, elles reflètent combien de développeurs trouvent le projet utile, suivent ses progrès et sont susceptibles de l'adopter.
+
+[![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)
+
+## Conclusion
+
+`vue-i18n` est mature, flexible et profondément intégré à Vue. Le benchmark montre ce que son design centré sur le runtime coûte sur un build Vite : un **runtime de 24 KB gzip**, **134,9 KB par page** pour une app qui pèse 41 KB sans i18n, **90 % de contenu d'autres pages** sur chaque page, et des composants qui atteignent chacun **196 KB** parce qu'ils dépendent de l'arbre global de messages.
+
+Intlayer déplace le travail dans le compilateur. Les dictionnaires par composant et la purge du contenu mort sont des sorties du build, pas des conventions. Sur la même app : **3,9 KB de runtime**, **57,1 KB par page**, **0 % de fuite de page**, des composants **25x plus petits**. Et si une réécriture n'est pas envisageable, `@intlayer/vue-i18n` fait l'essentiel du chemin sans toucher aux composants.
+
+Toutes les données brutes, les apps de test et les scripts sont dans le [dépôt Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Lancez-le vous-même.
+
+Consultez la [doc « Pourquoi Intlayer ? »](https://intlayer.org/doc/why) pour plus de détails.

package/blog/hi/i18next_vs_intlayer-i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "i18next बनाम @intlayer/i18next: समान API, पूरी तरह भिन्न बंडल"
 description: "क्या बदलता है जब एक React या Next.js ऐप अपने i18next, react-i18next और next-i18next कॉल्स को बरकरार रखता है लेकिन उन्हें @intlayer/i18next एडेप्टर के माध्यम से प्रस्तुत करता है। समान कोड पर मापा गया प्रति-पेज JavaScript आकार, घटक आकार, सामग्री लीकेज और हाइड्रेशन।"
 keywords:
@@ -28,6 +28,8 @@ author: aymericzip
 
 # i18next बनाम @intlayer/i18next | समान API, पूरी तरह भिन्न बंडल
 
+![i18next VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/i18next`, `@intlayer/react-i18next` और `@intlayer/next-i18next` अनुकूलता (compat) एडेप्टर हैं। वे उसी `i18next` API को प्रदर्शित करते हैं जिसका उपयोग आपका कोड पहले से कर रहा है (`useTranslation`, `t()`, `<Trans>`, `i18n.changeLanguage()`, `getFixedT`, `serverSideTranslations`...) और इसे Intlayer द्वारा संकलित शब्दकोशों से प्रस्तुत करते हैं। घटक नहीं बदलते; केवल उनके नीचे का रनटाइम बदलता है।
 
 यह लेख एक ही Next.js एप्लिकेशन पर उस प्रतिस्थापन को मापता है, जिसे एक बार `next-i18next` के साथ और एक बार `@intlayer/next-i18next` के साथ बनाया गया है। आंकड़े [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) से लिए गए हैं। लाइब्रेरी के रूप में `i18next` और Intlayer की तुलना के लिए, [i18next बनाम Intlayer](https://intlayer.org/hi/blog/i18next-vs-intlayer) पढ़ें। यह लेख इस बात पर केंद्रित है कि जब आप अपने कोड को वैसे ही रखते हैं जैसा वह है, तो एडेप्टर क्या बदलता है।
@@ -109,6 +111,10 @@ const About = () => {
 
 ### Next.js पर परिणाम
 
+वे मेट्रिक्स और लाइब्रेरी चुनें जिनकी आपको परवाह है:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | सेटअप                        | रणनीति         | लाइब्रेरी आकार (gz) | पेज JS औसत (gz) | लोकेल लीकेज | पेज लीकेज | घटक औसत (gz) | E2E प्रतिक्रियाशीलता |   हाइड्रेशन |
 | ---------------------------- | -------------- | ------------------: | --------------: | ----------: | --------: | -----------: | -------------------: | ----------: |
 | **base** (बिना i18n)         | -              |              0.0 KB |        141.0 KB |        0.0% |      0.0% |       0.9 KB |              13.4 ms |     11.8 ms |
@@ -129,10 +135,21 @@ const About = () => {
 - **तेज़ हाइड्रेशन और भाषा बदलना।** हाइड्रेशन 15.6 ms से घटकर **11.3 ms** हो जाता है (और `dynamic` सेटअप में 27.7 ms से, जहाँ बैकएंड फ़ेच महत्वपूर्ण पथ पर स्थित होता है)। लोकेल बदलना 15-16 ms से घटकर **11-12 ms** हो जाता है।
 - **एडेप्टर मूल रनटाइम नहीं है।** `next-intlayer` बेस ऐप से केवल +0.3 KB अधिक यानी **141.3 KB** पर पहुंचता है। एडेप्टर Intlayer के कोर के ऊपर `i18next` API सतह (इंटरपोलेशन, बहुवचन और संदर्भ प्रत्यय समाधान, `<Trans>` टैग पार्सिंग) रखता है: 9.4 KB और मूल की तुलना में प्रति पेज +9.4 KB। यह एक पुल है, अंतिम गंतव्य नहीं।
 
+<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;"
+/>
+
+> पूरी तालिका, प्रत्येक लाइब्रेरी और रणनीति, [Next.js बेंचमार्क रिपोर्ट](https://intlayer.org/hi/doc/benchmark/nextjs) में।
+
 > Vite / TanStack Start पर `react-i18next` एडेप्टर इस परीक्षण का हिस्सा नहीं था। TanStack Start पर `react-i18next` बेसलाइन [i18next बनाम Intlayer](https://intlayer.org/hi/blog/i18next-vs-intlayer) में देखी जा सकती है।
 
 ## संख्याएँ क्यों बदलती हैं
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 `components/` में कुछ भी नहीं बदला, इसलिए लाभ इस बात से आता है कि `useTranslation` किससे बंधा है।
 
 **`i18next` के साथ**, बाइंडिंग ग्लोबल इंस्टेंस होती है। इसमें जो कुछ भी लोड किया गया था (`static` में सभी लोकेल, `dynamic` में सक्रिय लोकेल का पूरा नेमस्पेस) वह `useTranslation()` को कॉल करने वाले प्रत्येक घटक से सुलभ होता है। बंडलर इंस्टेंस में रखी गई सीमा से नीचे कोड को विभाजित नहीं कर सकता है, और रनटाइम यह नहीं जान सकता कि कोई घटक किन कुंजियों की मांग करेगा।
@@ -149,6 +166,10 @@ const About = () => {
     └── About.tsx                     # useTranslation(); t("about.title")
 ```
 
+इंस्टेंस में जो कुछ भी होता है वह हर पेज पर भेजा जाता है, और अपव्यय दो अक्षों, पेज और लोकेल पर बढ़ता है:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 **`@intlayer/next-i18next` के साथ**, बाइंडिंग सीधे शब्दकोश होती है। `syncJSON` प्रत्येक नेमस्पेस फ़ाइल को एक शब्दकोश में बदल देता है; अनुकूलन पास घटक को वह शब्दकोश सौंपता है जिसे वह निर्दिष्ट करता है, एक ऐसे आयात के रूप में जिसे बंडलर ट्रैक कर सकता है और प्रति पेज और प्रति लोकेल विभाजित कर सकता है।
 
 ```bash
@@ -297,26 +318,112 @@ export default defineConfig({
 
 ## शुरू करने से पहले जानने योग्य सीमाएँ
 
-- **बैकएंड और डिटेक्टर निष्क्रिय हैं।** `i18n.use(HttpBackend)` केवल प्लगइन के `init` को कॉल करता है और कुछ नहीं। यदि आपका ऐप अनुरोध के समय CMS से अनुवाद प्राप्त करने पर निर्भर करता था, तो वह प्रवाह चला गया है; इसके बजाय Intlayer के CMS या `intlayer pull` / `push` कमांड का उपयोग करें।
-- **`resources` को अनदेखा किया जाता है, मर्ज नहीं किया जाता।** कुछ अन्य एडेप्टर के विपरीत, `@intlayer/i18next` इनलाइन `resources` का उपयोग फ़ॉलबैक के रूप में नहीं करता है। प्रत्येक कुंजी सिंक किए गए शब्दकोशों में मौजूद होनी चाहिए, जिसे `intlayer test` सत्यापित करता है।
-- **App Router को प्रोवाइडर संपादन की आवश्यकता है।** केवल एक फ़ाइल, जैसा कि ऊपर दिखाया गया है। `appWithTranslation` वाले Pages Router को किसी चीज़ की आवश्यकता नहीं है।
-- **`next-i18next.config.js` पढ़ा नहीं जाता है।** `localePath`, `fallbackLng`, `reloadOnPrerender` का कोई प्रभाव नहीं पड़ता; लोकेल और फ़ॉलबैक `intlayer.config.ts` से आते हैं।
-- **एडेप्टर मुफ़्त नहीं है।** `next-intlayer` की तुलना में 9.4 KB रनटाइम और प्रति पेज +9.4 KB अतिरिक्त लगता है। जब प्रत्येक घटक `useIntlayer` पर चला जाए, तो इसे हटा दें।
+<AccordionGroup>
+<Accordion header="बैकएंड और डिटेक्टर निष्क्रिय हैं">
+
+`i18n.use(HttpBackend)` केवल प्लगइन के init को कॉल करता है और कुछ नहीं। यदि आपका ऐप रनटाइम पर CMS से अनुवाद लाने पर निर्भर था, तो वह प्रवाह चला गया है; इसके बजाय [Intlayer CMS](https://intlayer.org/hi/doc/concept/cms) या `intlayer pull` / `push` कमांड का उपयोग करें। भाषा पहचान Intlayer का रूटिंग कॉन्फ़िगरेशन बन जाती है (URL उपसर्ग, कुकी, हेडर)।
+
+</Accordion>
+<Accordion header="resources को नजरअंदाज किया जाता है, मर्ज नहीं">
+
+कुछ अन्य एडाप्टरों के विपरीत, `@intlayer/i18next` इनलाइन `resources` को फ़ॉलबैक के रूप में उपयोग नहीं करता है। प्रत्येक कुंजी सिंक्रनाइज़ किए गए शब्दकोशों में मौजूद होनी चाहिए, जिसे `intlayer test` सत्यापित करता है।
+
+</Accordion>
+<Accordion header="App Router को प्रदाता संपादन की आवश्यकता है">
+
+केवल एक फ़ाइल, ऊपर दिखाई गई है। `appWithTranslation` के साथ Pages Router को किसी भी बदलाव की आवश्यकता नहीं है।
+
+</Accordion>
+<Accordion header="next-i18next.config.js नहीं पढ़ा जाता है">
+
+`localePath`, `fallbackLng`, `reloadOnPrerender` और समकक्षों का कोई विकल्प नहीं है; भाषाएँ और फ़ॉलबैक `intlayer.config.ts` से आते हैं।
+
+</Accordion>
+<Accordion header="एडाप्टर मुफ़्त नहीं है">
+
+`next-intlayer` की तुलना में 9.4 KB का रनटाइम और प्रति पेज +9.4 KB। एक बार जब प्रत्येक घटक `useIntlayer` पर चला जाए, तो इसे हटा दें।
+
+</Accordion>
+</AccordionGroup>
 
 ## कब किसका उपयोग करें?
 
-- **`i18next` पर बने रहें** यदि आपका ऐप रनटाइम बैकएंड (अनुरोध के समय CMS द्वारा दिए जाने वाले अनुवाद), प्लगइन पारिस्थितिकी तंत्र, या गैर-React लक्ष्य पर निर्भर करता है जिसे एडेप्टर कवर नहीं करते हैं।
-- **`@intlayer/*` का उपयोग करें** यदि आप `react-i18next` / `next-i18next` पर हैं और बिना किसी पुनर्लेखन के 68 KB की बचत, 8 गुना छोटे घटक, 0% लीकेज, टाइप की गई कुंजियाँ और CI जाँच चाहते हैं। यह मौजूदा `i18next` कोडबेस के लिए सबसे उत्तम प्रवेश बिंदु है।
-- **मूल रनटाइम (`next-intlayer` / `react-intlayer`) पर जाएँ** नई परियोजनाओं के लिए, या जब एडेप्टर अपना काम पूरा कर ले। यह तीनों में सबसे हल्का है (5.5 KB, प्रति पेज +0.3 KB) और सिंक्रोनस सर्वर घटकों और प्रति-घटक `.content.ts` फ़ाइलों का समर्थन करता है।
+<AccordionGroup>
+<Accordion header="i18next पर बने रहें">
+
+यदि आपका ऐप रनटाइम बैकएंड (अनुरोध के समय CMS द्वारा दिए गए अनुवाद), प्लगइन पारिस्थितिकी तंत्र, या गैर-React लक्ष्य पर निर्भर करता है जिसे एडाप्टर कवर नहीं करते हैं।
+
+</Accordion>
+<Accordion header="@intlayer/* का उपयोग करें">
+
+आप `react-i18next` / `next-i18next` पर हैं और बिना दोबारा लिखे 68 KB की बचत, 8 गुना छोटे घटक, 0% लीकेज, टाइप की गई कुंजियाँ और CI जांच चाहते हैं। यह मौजूदा `i18next` कोडबेस के लिए प्रवेश बिंदु है।
+
+</Accordion>
+<Accordion header="नेटिव बनें (next-intlayer / react-intlayer)">
+
+नई परियोजनाओं के लिए, या एक बार जब एडाप्टर अपना काम कर ले। इसमें सबसे हल्का रनटाइम (5.5 KB, प्रति पेज +0.3 KB) है और यह समकालिक Server Components और प्रति-घटक `.content.ts` फ़ाइलों को अनलॉक करता है। [Next.js के साथ Intlayer](https://intlayer.org/hi/doc/environment/nextjs) या [Vite और React के साथ](https://intlayer.org/hi/doc/environment/vite-and-react) से शुरुआत करें।
+
+</Accordion>
+</AccordionGroup>
+
+## अक्सर पूछे जाने वाले प्रश्न
+
+<FAQ>
+
+<Question title="68 KB की बचत कहाँ से आती है?">
+
+`resources: { en, fr, ... }` से। सामान्य `next-i18next` सेटअप प्रत्येक भाषा के JSON को `init()` में आयात करता है, इसलिए प्रत्येक पृष्ठ हर भाषा में प्रत्येक नेमस्पेस को ले जाता है: प्रति पृष्ठ **218.5 KB**। एडाप्टर उस ब्लॉक को कभी बंडल नहीं करता है; यह प्रत्येक घटक को केवल वही शब्दकोश सौंपता है जिसे वह सक्रिय भाषा में नाम देता है।
+
+</Question>
+
+<Question title="क्या मेरे <Trans> घटक काम करना जारी रखते हैं?">
+
+हाँ, `components`, क्रमांकित `<1>...</1>` टैग और `values` के साथ। इसी तरह `{{interpolation}}`, `$t(key)` नेस्टिंग, `key_one` / `key_other` बहुवचन (`Intl.PluralRules` के साथ मूल्यांकित), संदर्भ प्रत्यय और `returnObjects` भी काम करते हैं।
+
+</Question>
+
+<Question title="यदि मैं प्रति भाषा एकल translation.json का उपयोग करता हूँ तो क्या होगा?">
+
+`syncJSON` प्लगइन में `splitKeys: false` सेट करें। पूरी फ़ाइल एक शब्दकोश बनी रहती है और एक साधारण `useTranslation()` इसके विरुद्ध हल करना जारी रखता है।
+
+</Question>
+
+<Question title="क्या यह पूरी तरह से Intlayer पर माइग्रेट करने जैसा है?">
+
+नहीं, यह एक सेतु है। एडाप्टर `i18next` API को बनाए रखता है और इसमें 9.4 KB का रनटाइम लगता है; नेटिव `next-intlayer` की लागत 5.5 KB है और यह समकालिक Server Components और सह-स्थित `.content.ts` फ़ाइलें जोड़ता है। आप घटक दर घटक स्थानांतरित कर सकते हैं, क्योंकि JSON और `.content.ts` शब्दकोश सह-अस्तित्व में रहते हैं।
+
+</Question>
+
+<Question title="क्या अनुवादक उसी तरह काम करना जारी रख सकते हैं जैसे वे आज करते हैं?">
+
+हाँ। `locales/{lng}/{ns}.json` सत्य का स्रोत बना रहता है: `syncJSON` इसे i18next बोली के साथ पढ़ता है और जब CLI या CMS उन्हें अपडेट करता है तो अनुवाद वापस लिखता है।
+
+</Question>
+
+</FAQ>
 
 ## संबंधित तुलनाएं
 
-- [i18next बनाम Intlayer](https://intlayer.org/hi/blog/i18next-vs-intlayer) (लाइब्रेरी तुलना, समान बेंचमार्क)
-- [next-intl बनाम @intlayer/next-intl](https://intlayer.org/hi/blog/next-intl-vs-intlayer-next-intl) (समान एडेप्टर श्रृंखला)
-- [Lingui बनाम @intlayer/lingui](https://intlayer.org/hi/blog/lingui-vs-intlayer-lingui) (समान एडेप्टर श्रृंखला)
-- [vue-i18n बनाम @intlayer/vue-i18n](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-vue-i18n) (समान एडेप्टर श्रृंखला)
-- माइग्रेशन गाइड: [i18next](https://intlayer.org/hi/doc/migration/i18next), [react-i18next](https://intlayer.org/hi/doc/migration/react-i18next), [next-i18next](https://intlayer.org/hi/doc/migration/next-i18next)
-- अनुकूलता एडेप्टर संदर्भ: [i18next](https://intlayer.org/hi/doc/compatibility/i18next), [react-i18next](https://intlayer.org/hi/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/hi/doc/compatibility/next-i18next)
+समान एडाप्टर श्रृंखला:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/hi/blog/next-intl-vs-intlayer-next-intl)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/hi/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+लाइब्रेरी की आमने-सामने तुलना:
+
+- [i18next vs Intlayer](https://intlayer.org/hi/blog/i18next-vs-intlayer), same benchmark
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/hi/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/hi/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Is i18next outdated?](https://intlayer.org/hi/blog/is-i18next-outdated)
+
+संदर्भ दस्तावेज़:
+
+- Compat adapters: [i18next](https://intlayer.org/hi/doc/compatibility/i18next), [react-i18next](https://intlayer.org/hi/doc/compatibility/react-i18next), [next-i18next](https://intlayer.org/hi/doc/compatibility/next-i18next)
+- Migration guides: [i18next](https://intlayer.org/hi/doc/migration/i18next), [react-i18next](https://intlayer.org/hi/doc/migration/react-i18next), [next-i18next](https://intlayer.org/hi/doc/migration/next-i18next)
+- [Next.js benchmark report](https://intlayer.org/hi/doc/benchmark/nextjs) and [TanStack Start benchmark report](https://intlayer.org/hi/doc/benchmark/tanstack)
+- [Bundle optimization](https://intlayer.org/hi/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/hi/doc/compiler)
+- [Visual Editor](https://intlayer.org/hi/doc/concept/editor), [CMS](https://intlayer.org/hi/doc/concept/cms) and [AI translation](https://intlayer.org/hi/doc/concept/auto-fill)
 
 ## निष्कर्ष