vue-i18n बनाम @intlayer/vue-i18n | समान API, विभिन्न Bundle

@intlayer/vue-i18n एक compat adapter है: यह vue-i18n API (createI18n, useI18n, t(), d(), n(), $t, v-t, i18n.global.locale...) को expose करता है और इसे Intlayer द्वारा compiled dictionaries से serve करता है। आपकी .vue files नहीं बदलती हैं। जो t("footer.github") से bound है, वह बदलता है।

यह लेख एक ही Vite + Vue 3 एप्लिकेशन पर इस स्वैप को मापता है, एक बार vue-i18n के साथ और एक बार एडेप्टर के साथ निर्मित। संख्याएँ Benchmark Bloom से आती हैं। vue-i18n और Intlayer की तुलना लाइब्रेरी के रूप में करने के लिए, vue-i18n vs Intlayer और vue-i18n vs Intlayer benchmark पढ़ें। यह इस बारे में है कि जब आप अपने components को वैसे ही रखते हैं तो एडेप्टर क्या बदलता है।

tl;dr: एक ही Vite + Vue 3 ऐप्लिकेशन पर, vue-i18n को @intlayer/vue-i18n से बदलने से प्रति-पृष्ठ JavaScript 134.9 KB से 47.0 KB gzip तक कम हो गया (i18n के बिना ऐप 41.3 KB वजन का है), runtime 24.3 KB से 7.9 KB, औसत component 196 KB से 8.4 KB, और foreign-page string leakage 90% से 0%, बिना किसी .vue फ़ाइल को संपादित किए। createI18n({ messages }) fallback के रूप में काम करता रहता है; ऊपर दिए गए नंबर प्राप्त करने के लिए JSON imports हटाएं। SFC <i18n> blocks और runtime setLocaleMessage() वे दो features हैं जो carry over नहीं होते हैं।

@intlayer/vue-i18n क्या है

vue-i18n एक runtime है। createI18n({ messages: { en, fr, ... } }) हर locale के हर message को hold करने वाला एक global instance बनाता है; useI18n() हर component को इससे bind करता है; t("footer.github") render time पर tree को traverse करता है। यह design SFC <i18n> blocks और setLocaleMessage() को संभव बनाता है, और यह भी है कि क्यों हर component का dependency graph पूरे tree को शामिल करता है।

@intlayer/vue-i18n API को keep करता है और tree को replace करता है:

1. Import aliasing. @intlayer/vue-i18n/plugin से vueI18nVitePlugin() vite-intlayer को wrap करता है और एक resolve.alias add करता है ताकि vue-i18n @intlayer/vue-i18n को resolve करे। कोई import rename नहीं है।
2. JSON as source of truth. The syncJSON plugin reads your existing locales/{locale}.json with format: "vue-i18n" (so {name}, {0} list interpolation and "car | cars" pipe plurals are parsed correctly) and writes translations back when the CLI or the CMS updates them.
3. Call-site binding. The Intlayer optimize pass rewrites useI18n() call sites so the component receives the dictionaries its keys name, in the active locale, as imports the bundler can trace and split.

<!-- आपका कोड, अपरिवर्तित -->
<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <a href="https://github.com/intlayer-org/benchmark-bloom">{{
    t("footer.github")
  }}</a>
</template>

import _dicHash_footer from "../.intlayer/dictionaries/footer.mjs";
import { useDictionary as useI18n } from "@intlayer/vue-i18n";

const { t } = useI18n(_dicHash_footer);

घटक अब वैश्विक संदेश ट्री तक नहीं पहुंचता है। यह footer तक पहुंचता है। यही कारण है कि नीचे दिए गए घटक-आकार स्तंभ 196 KB से 8 KB तक गिरता है।

एडेप्टर क्या रखता है, अनदेखा करता है, और प्रतिस्थापित नहीं करता है

बेंचमार्क

क्या मापा गया था

Benchmark Bloom suite एक ही Vite + Vue 3 एप्लिकेशन को प्रत्येक setup के साथ बनाता है: 10 pages (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), 10 locales (en, fr, es, de, it, pt, zh, ja, ko, ru), identical components और identical content। Pages को en और fr में मापा जाता है।

दोनों को static configuration में बनाया गया था, वह configuration जो अधिकांश Vue projects ship करते हैं: vue-i18n के लिए, हर locale का JSON imported और createI18n({ messages }) को pass किया जाता है; adapter के लिए, vite.config.ts और intlayer.config.ts को बदले जाने के साथ same components और messages import को हटाया जाता है। Native vue-intlayer को reference के लिए शामिल किया गया है।

प्रत्येक build के लिए, suite निम्नलिखित को record करता है:

• Lib size: एक खाली component का gzip (और minified) size जो केवल i18n library को import करता है।
• Page JS: प्रति page download किया गया gzip JavaScript, सभी pages और locales पर averaged।
• Locale leak %: downloaded JS में translated strings का share जो एक locale के हैं जिसे user नहीं देख रहा है।
• Page leak %: downloaded JS में translated strings का share जो एक page के हैं जिस page पर user नहीं है।
• Component avg: प्रत्येक component का average gzip size जो isolation में compiled है।
• E2E reactivity: एक नया locale select करने और DOM में html[lang] update होने के बीच wall-clock time (Playwright, 5 iterations)।
• Page load: PerformanceNavigationTiming.duration।

नीचे दी गई संख्याएं 2026-09-12 को vue-i18n 11.4.0 और @intlayer/vue-i18n 9.5.1 के साथ चलाने से आई हैं। test application जानबूझकर छोटा है (प्रति locale कुछ दर्जन strings), इसलिए leakage percentages एक pattern का वर्णन करते हैं: ये आपकी content के साथ बढ़ते हैं जबकि runtime cost fixed रहता है।

Vite + Vue 3 पर परिणाम

base app का page-leak column खाली छोड़ा गया है: बिना i18n library के, fingerprinting shared chunks में hard-coded strings को pick करता है और संख्या meaningful नहीं होती है।

इसे कैसे पढ़ें

• 88 KB प्रति page कम, same components। vue-i18n app को 41.3 KB से 134.9 KB तक ले जाता है। उसी components का adapter build 47.0 KB पर landing करता है, base app से 5.7 KB ऊपर। ज्यादातर अंतर 74.9 KB का src/locales है जो createI18n({ messages }) हर page में pull करता है और adapter कभी एक block के रूप में bundle नहीं करता है।
• Runtime 3x सिकुड़ता है। एक खाली component जो केवल vue-i18n import करता है उसकी कीमत 24.3 KB gzip / 83.2 KB minified है: @intlify/core-base, message compiler और runtime। Adapter की कीमत 7.9 KB / 23.2 KB है, इसमें अधिकांश Intlayer का core और vue-i18n API surface है।
• Components: 23x छोटे। एक useI18n() component जो isolation में compile होता है औसतन 196 KB होता है, क्योंकि t उस instance से bound होता है जो हर locale का हर message रखता है। Adapter के साथ, वही component औसतन 8.4 KB होता है: यह अपने dictionary तक पहुंचता है।
• Leakage. vue-i18n हर पेज पर हर locale और हर पेज की सभी strings को भेजता है: 50% locale leakage (दोनों fingerprinted locales पर; दस locales bundled होने पर वास्तविक waste अधिक है), 90% page leakage। Adapter page leakage को 0% तक कम करता है क्योंकि प्रत्येक component केवल अपने dictionaries को import करता है। Locale leakage इस static run में 15% पर बैठी है; importMode: 'dynamic' वह setting है जो इसे हटाती है, और वह configuration इस Vue run का हिस्सा नहीं था।
• Reactivity और page load. Locale switching दोनों के लिए सस्ता है (1.5-2.8 ms); Vue की reactivity system एक बार जब messages मेमोरी में हों तो ऐसा बनाती है। Page load 13.6 ms से 9.3 ms तक जाता है, जो 88 KB कम JavaScript parse करने के अनुरूप है।
• नेटिव पंक्तियों के बारे में। vue-intlayer इस रन में static मोड में हर लोकेल को बंडल करता है और 3.9 KB रनटाइम के साथ 57.1 KB पर पहुंचता है; एडेप्टर के सिंक्रोनाइज़्ड डिक्शनरीज़ में कम विदेशी-लोकेल स्ट्रिंग्स थीं, इसलिए प्रति-पृष्ठ आंकड़ा कम है। नेटिव रनटाइम तीनों में सबसे हल्का रहता है, और इसका .content.ts मॉडल वह जगह है जहां SFC <i18n> ब्लॉक अपने समकक्ष को खोजते हैं।

संख्याएं क्यों बदलती हैं

src/components/ में कुछ भी नहीं बदला, इसलिए लाभ इसी से आते हैं कि useI18n किससे बंधा है।

vue-i18n के साथ, binding global instance है। createI18n({ messages: { en, fr, ... } }) एक import है जो सब कुछ hold करता है; हर component जो useI18n() को call करता है वह सब कुछ तक पहुँच सकता है, इसलिए bundler instance के नीचे split नहीं कर सकता। Optimizing का मतलब है कि आप en.json को route से split करें, एक router guard में setLocaleMessage() को call करें, और जैसे components move हों वैसे route-to-file map को सही रखें।

.
├── locales
│   ├── en.json                    # हर page की strings
│   └── fr.json
└── src
    ├── i18n.ts                    # createI18n({ messages: { en, fr, ... } })
    ├── main.ts                    # app.use(i18n)
    └── components
        └── Footer.vue             # useI18n(); t("footer.github")

@intlayer/vue-i18n के साथ, binding dictionary है। syncJSON en.json की प्रत्येक top-level key को एक dictionary में बदल देता है; optimize pass component को उन्हें देता है जिनकी keys का नाम है, जैसे imports जिन्हें bundler trace करता है और प्रति पृष्ठ split करता है।

.
├── intlayer.config.ts             # syncJSON({ format: "vue-i18n", source: ... })
├── locales
│   ├── en.json                    # unchanged, still the source of truth
│   └── fr.json
├── .intlayer/                     # generated: one dictionary per top-level key, per locale
└── src
    ├── i18n.ts                    # createI18n({})   ← messages import removed
    ├── main.ts                    # app.use(i18n)    ← unchanged
    └── components
        └── Footer.vue             # useI18n(); t("footer.github")  ← unchanged

i18n.ts में messages import वह एक पंक्ति है जिसे हटाना है। वह 88 KB है।

तीन चरणों में माइग्रेशन

1. 1

   इंस्टॉल करें

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npx intlayer init --interactive
   

   कमांड vue-i18n का पता लगाता है, intlayer, vue-intlayer, @intlayer/vue-i18n और @intlayer/sync-json-plugin इंस्टॉल करता है, और intlayer.config.ts को पहले से भरता है। vue-i18n को इंस्टॉल रखें: यह एक peer dependency है और types प्रदान करता है।

2. 2

   Intlayer को अपनी लोकेल फाइलों की ओर इंगित करें

   intlayer.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     dictionary: {
       // "static" हर locale को bundle करता है; "dynamic" आवश्यकता के अनुसार सक्रिय को लोड करता है
       importMode: "dynamic",
       format: "vue-i18n",
     },
     plugins: [
       syncJSON({
         // vue-i18n dialect: {name}, {0}, "car | cars"
         format: "vue-i18n",
         source: ({ locale }) => `./locales/${locale}.json`,
         location: "locales",
       }),
     ],
   };
   
   export default config;
   

   locales/{locale}.json अपनी जगह पर रहता है। हर top-level key (footer, hero...) एक dictionary बन जाती है।

3. 3

   प्लगइन जोड़ें और संदेशों के आयात को हटाएं

   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()],
   });
   

   src/i18n.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { createI18n } from "vue-i18n";
   
   // पहले: createI18n({ locale: "en", messages: { en, fr, es } })
   export const i18n = createI18n({ locale: "en" });
   

   vueI18nVitePlugin() vite-intlayer को लपेटता है (content watching, dictionary compilation, optimize pass) और vue-i18n को adapter के रूप में alias करता है। messages import को हटाना ही 88 KB को छोड़ता है; इसे रखने से ऐप काम करता रहता है लेकिन दोनों को ship करता है।

आप बाद में क्या हटा सकते हैं

आप बाइट्स से परे क्या हासिल करते हैं

• Typed keys। t("footer.github") को compiled footer dictionary के विरुद्ध type किया जाता है; एक गलत path TypeScript error है जो key को text के रूप में rendered करने के बजाय।
• npx intlayer test किसी भी locale में एक missing key पर CI को विफल करता है। npx intlayer fill missing ones को आपके own provider key (OpenAI, Anthropic, Mistral, Gemini...) से translate करता है और उन्हें locales/{locale}.json में वापस लिखता है।
• Visual Editor और CMS एक ही JSON पर operate करते हैं, इसलिए non-developers एक UI के माध्यम से edit करते हैं और files update हो जाती हैं।
• .content.ts में incremental move करें। कोई भी component useI18n() से useIntlayer("footer") में switch कर सकता है एक co-located content file के साथ। JSON और .content.ts dictionaries coexist करते हैं और merge होते हैं।

शुरू करने से पहले जानने योग्य सीमाएं

• SFC <i18n> blocks को read नहीं किया जाता है। यदि आपके messages components के अंदर हैं, तो उन्हें locale files में move करने की आवश्यकता है (या .content.ts में, जो types के साथ एक ही विचार है)।
• Runtime message loading gone है। setLocaleMessage() और mergeLocaleMessage() warn करते हैं और return करते हैं। Runtime पर CMS से fetch किए गए translations को Intlayer के CMS की आवश्यकता है, या intlayer pull / push commands की।
• messages एक fallback है, free नहीं है। createI18n() में JSON imports को रखने से bundle में 75 KB रहता है। एक बार intlayer test pass होने के बाद उन्हें delete करें।
• adapter native runtime नहीं है। vue-intlayer के लिए 3.9 KB के मुकाबले 7.9 KB। एक बार जब हर component useIntlayer पर चला गया हो, तो इसे छोड़ दें।

कौन सा कब उपयोग करें?

• vue-i18n पर बने रहें यदि आपका app SFC <i18n> blocks पर निर्भर करता है, runtime setLocaleMessage() flows पर, या यदि 90 KB प्रति page आपके audience के लिए चिंता का विषय नहीं है।
• @intlayer/vue-i18n का उपयोग करें यदि आप vue-i18n पर हैं और 88 KB, 23x छोटे components, 0% page leakage, typed keys और CI checks चाहते हैं बिना किसी .vue file को edit किए। यह एक existing vue-i18n codebase के लिए entry point है।
• Native पर जाएं (vue-intlayer) नई projects के लिए, या एक बार adapter ने अपना काम कर दिया हो। इसके पास सबसे हल्का runtime (3.9 KB) और per-component .content.ts model है जो <i18n> blocks को typed content से replace करता है।

संबंधित तुलनाएं

• vue-i18n vs Intlayer (features और DX)
• vue-i18n vs Intlayer benchmark (libraries, same benchmark)
• next-intl vs @intlayer/next-intl (same adapter series)
• i18next vs @intlayer/i18next (same adapter series)
• Lingui vs @intlayer/lingui (same adapter series)
• Migration guide: vue-i18n to Intlayer
• Compat adapter reference: vue-i18n, Nuxt i18n

निष्कर्ष

@intlayer/vue-i18n useI18n() को जो है उससे बदलता है: एक global instance जो हर locale के हर message को hold करता है से एक dictionary में जो उस component के लिए compile है। Vite + Vue 3 app के 88 KB कम प्रति पृष्ठ, 3x छोटा runtime, 23x छोटे components और 0% पृष्ठ leakage के साथ, एक config file, एक plugin line और एक deleted import के लिए। SFC <i18n> blocks और runtime message loading ये दो चीजें हैं जो यह carry नहीं करता, और native vue-intlayer runtime अपने आकार का आधा रहता है।

Benchmark Bloom repository में सभी raw data, test apps और scripts हैं। इसे अपने आप चलाएं।

अधिक विवरण के लिए 'Why Intlayer?' doc देखें।