@intlayer/docs 9.4.1 → 9.4.3

package/blog/hi/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: क्या 2026 में vue-i18n पुराना हो चुका है?
+description: vue-i18n एक दशक से Vue और Nuxt का मानक रहा है। लेकिन हमारे बेंचमार्क में यह वेब पर सबसे भारी i18n रनटाइम साबित हुआ। इसके कारणों का विश्लेषण।
+keywords:
+  - vue-i18n
+  - Intlayer
+  - अंतर्राष्ट्रीयकरण
+  - i18n
+  - Vue
+  - Nuxt
+  - बंडल साइज
+  - ब्लॉग
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# क्या 2026 में vue-i18n पुराना हो चुका है?
+
+Vue कम्युनिटी में `vue-i18n` जितनी व्यापक स्वीकृति शायद ही किसी अन्य लाइब्रेरी को मिली हो। Vue 2 के दौर से Kazupon द्वारा संवर्धित, यह `@nuxtjs/i18n` का आधार है और बहुभाषी Vue एप्लिकेशन्स का स्वाभाविक विकल्प रहा है।
+
+इसके बावजूद, 2026 के बेंचमार्क परीक्षणों ने एक अप्रत्याशित तथ्य उजागर किया: **परीक्षण किए गए सभी मुख्य फ्रंटएंड फ्रेमवर्क्स में `vue-i18n` सबसे भारी लोकलाइजेशन रनटाइम साबित हुआ।**
+
+Vite + Vue पर आधारित केवल 31.5 KB के बुनियादी प्रोजेक्ट में `vue-i18n` जोड़ने पर, प्रति पेज औसत जावास्क्रिप्ट का भार बढ़कर **136.4 KB** हो गया, जो मूल आकार से चार गुना अधिक है।
+
+गति और सरलता के लिए जाने जाने वाले फ्रेमवर्क में i18n टूल इतना भारी कैसे हो गया? और क्या इसका पारंपरिक रनटाइम मॉडल आज भी प्रासंगिक है?
+
+<TOC/>
+
+## मुख्य बिंदु
+
+**परीक्षण में सबसे भारी रनटाइम:**
+
+कोई भी ट्रांसलेशन जोड़ने से पहले ही इसका आकार **24.3 KB gzipped (83.2 KB minified)** दर्ज किया गया, जो `intlayer` के 2.7 KB रनटाइम से लगभग **9 गुना अधिक** है।
+
+**पेज के आकार में 330% की वृद्धि:**
+
+`vue-i18n` ने 31.5 KB के बेसिक पेज को 136.4 KB तक बढ़ा दिया। इसके विपरीत Intlayer केवल 59.3 KB पर रहा, जिससे **56% कम डेटा भार** मिला।
+
+**ब्राउज़र में शामिल कंपाइलर:**
+
+यदि बंडलर में विशेष एलियास (alias) न सेट किए जाएं, तो `vue-i18n` टेक्स्ट को रनटाइम पर प्रोसेस करने के लिए पूरा मैसेज कंपाइलर ब्राउज़र को भेज देता है।
+
+**रखरखाव की गति:**
+
+पिछले वर्ष के दौरान `vue-i18n` में लगभग 259 कमिट हुए, जो मुख्य रूप से बग्स और Vue के नए वर्जन्स के अनुकूलन तक सीमित रहे।
+
+**आधुनिक टूल्स की कमी:**
+
+ऑफिशियल लैंग्वेज सर्वर (LSP), एआई के लिए एमसीपी सर्वर या सीएलआई-आधारित ऑटोमेटेड ट्रांसलेशन फ्लो का अभाव है।
+
+## मेंटेनेंस बनाम आधुनिक टूल्स
+
+| रिपॉजिटरी             | स्टार्स                                                                                                                                                | कुल कमिट्स                                                                                                                                                          | कमिट्स / वर्ष                                                                                                                                                      | अंतिम कमिट                                                                                                                                   |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlify/vue-i18n`    | [![stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/intlify/vue-i18n?style=for-the-badge&label=%2Fyear)](https://github.com/intlify/vue-i18n/commits)       | [![last](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+पिछले 12 महीनों के आंकड़े:
+
+- `intlify/vue-i18n`: **259 कमिट्स** (Vue 3 और Nuxt का नियमित रखरखाव)।
+- `aymericzip/intlayer`: **4,343 कमिट्स** (कंपाइलर ऑप्टिमाइजेशन, LSP टूल्स और एआई इंटीग्रेशन पर सक्रिय विकास)।
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+एक पुरानी लाइब्रेरी स्थिरता तो देती है, लेकिन आधुनिक फ्रंटएंड अब बिल्ड-टाइम AST ट्रांसफॉर्मेशन, डेड-कोड रिमूवल और एआई ऑटोमेशन पर आधारित है। केवल रनटाइम पर चलने वाली लाइब्रेरी इन आधुनिक तकनीकों को सहजता से नहीं अपना पाती।
+
+## Vite + Vue परफॉर्मेंस टेस्ट
+
+Vite और Vue 3 के साथ 10 पेजों और 10 भाषाओं वाले एप्लिकेशन पर मापा गया:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> वास्तविक ब्राउज़रों में प्रोडक्शन gzip कंप्रेशन के साथ परीक्षण किया गया। पूर्ण विवरण [Vue बेंचमार्क दस्तावेज़](https://intlayer.org/hi/doc/benchmark/vue) में देखें।
+
+### शुरुआती लाइब्रेरी ओवरहेड
+
+ट्रांसलेशन फाइल्स लोड होने से पहले का भार:
+
+| लाइब्रेरी         | Gzipped    | Minified   |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB    |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB** |
+
+`vue-i18n` का रनटाइम इंजन ही **24.3 KB (gzip)** स्थान घेरता है, जो लगभग Vue के कोर आकार के बराबर है। जबकि Intlayer केवल **2.7 KB** जोड़ता है।
+
+### पेज का आकार और डेटा लीकेज
+
+| कॉन्फ़िगरेशन    | औसत पेज JS (gz) | भाषा लीकेज | अन्य पेज लीकेज | औसत कंपोनेंट (gz) |
+| --------------- | --------------- | ---------- | -------------- | ----------------- |
+| बेस (बिना i18n) | 31.5 KB         | 0.0%       | 90.0%          | 0.9 KB            |
+| `vue-i18n`      | **136.4 KB**    | 50.2%      | 90.0%          | 196.0 KB          |
+| Intlayer        | **59.3 KB**     | 51.1%      | **0.0%**       | **6.5 KB**        |
+
+### प्रमुख निष्कर्ष
+
+**भारी आनुपातिक वृद्धि:**
+
+चूंकि Vue का बेस फ्रेमवर्क बहुत हल्का है (~31 KB), `vue-i18n` जोड़ने से पेज का वजन चार गुना से भी अधिक बढ़ जाता है।
+
+**अन्य पेजों का डेटा लीकेज:**
+
+डिफ़ॉल्ट रूप से किसी रूट पर भेजे जाने वाले **90% ट्रांसलेशंस** अन्य पेजों से संबंधित होते हैं। Intlayer इस अनावश्यक डेटा को पूरी तरह हटाकर **0.0%** कर देता है।
+
+**कंपोनेंट्स का असामान्य आकार:**
+
+डिक्शनरीज़ की बार-बार कॉपी होने से `vue-i18n` में लोकली-स्कोप्ड कंपोनेंट्स औसतन 196 KB तक पहुंच गए, जबकि Intlayer में यह सिर्फ **6.5 KB** रहा।
+
+## vue-i18n भारी क्यों है?
+
+### ब्राउज़र में भेजा जाने वाला AST कंपाइलर
+
+`vue-i18n` में अपना मैसेज फॉर्मेट कंपाइलर शामिल होता है। प्लूरल रूल्स और वैरिएबल इंटरपोलेशन रनटाइम के दौरान सीधे ब्राउज़र में AST में बदले जाते हैं।
+
+इससे बचने के लिए बंडलर में `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` के लिए एलियास सेट करना और `@intlify/unplugin-vue-i18n` से प्री-कंपाइल करना अनिवार्य होता है, जिसे कई प्रोजेक्ट्स छोड़ देते हैं।
+
+### अखंड (Monolithic) फीचर स्ट्रक्चर
+
+`vue-i18n` में डेट और नंबर फॉर्मेटर्स, लिंक्ड मैसेजेस, पुराने Options API सपोर्ट ब्रिज (`$t`, `v-t`) और रिएक्टिव प्रॉक्सी सब कुछ शामिल हैं। यदि आपको `<script setup>` में सिर्फ सामान्य टेक्स्ट दिखाना हो, तो भी पूरा इंजन लोड होता है।
+
+### डायनामिक कीज़ ट्री-शेकिंग को रोकती हैं
+
+चूंकि `"home.hero.title"` का हल रनटाइम पर होता है, कंपाइलर यह नहीं जान सकते कि कौन से टेक्स्ट इस्तेमाल हो रहे हैं। अप्रयुक्त ट्रांसलेशन भी कोड में बने रहते हैं।
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("home.hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+[Intlayer कंपाइलर](https://intlayer.org/hi/doc/compiler) सटीक उपयोग का विश्लेषण करता है और क्लाइंट फाइल्स बनाने से पहले अप्रयुक्त डेटा को हटा देता है। अधिक जानकारी के लिए [बंडल ऑप्टिमाइजेशन](https://intlayer.org/hi/doc/concept/bundle-optimization) देखें।
+
+## डेवलपर अनुभव (DX) की तुलना
+
+### अलग फोल्डर्स बनाम को-लोकेशन
+
+`vue-i18n` में अनुवाद दूर स्थित `locales/` डायरेक्टरी में रखे जाते हैं। Intlayer कंटेंट फाइलों को सीधे कंपोनेंट्स के साथ रखने की सुविधा देता है:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="locales/en.json"
+{
+  "hero": {
+    "title": "Ship in every language"
+  }
+}
+```
+
+```json fileName="locales/hi.json"
+{
+  "hero": {
+    "title": "हर भाषा में उत्पाद लॉन्च करें"
+  }
+}
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      en: "Ship in every language",
+      hi: "हर भाषा में उत्पाद लॉन्च करें",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+`Hero.vue` को हटाने या रीनेम करने पर संबंधित कंटेंट फाइल भी स्वतः सिंक हो जाती है।
+
+### कोड सजेशन्स बनाम सख्त पूर्णता की गारंटी
+
+`DefineLocaleMessage` बेस स्कीमा के आधार पर ऑटो-कंप्लीशन देता है। लेकिन यह सभी भाषाओं की पूर्णता सुनिश्चित नहीं करता। `hi.json` से की गायब होने पर भी टाइपस्क्रिप्ट बिल्ड नहीं रोकेगा।
+
+Intlayer में डिक्शनरीज़ की सख्त जांच होती है। [`strictMode`](https://intlayer.org/hi/doc/concept/configuration) चालू करने पर किसी भी भाषा में अनुवाद छूटने पर तुरंत बिल्ड एरर आ जाता है।
+
+### एडिटर और एआई टूल्स
+
+| फीचर                      | `vue-i18n`            | Intlayer                                                              |
+| ------------------------- | --------------------- | --------------------------------------------------------------------- |
+| **VS Code एक्सटेंशन**     | कम्युनिटी (i18n Ally) | ✅ [ऑफिशियल एक्सटेंशन](https://intlayer.org/hi/doc/vs-code-extension) |
+| **Language Server (LSP)** | ❌ नहीं है            | ✅ [समर्पित LSP](https://intlayer.org/hi/doc/lsp)                     |
+| **AI के लिए MCP सर्वर**   | ❌ नहीं है            | ✅ [इनबिल्ट MCP सर्वर](https://intlayer.org/hi/doc/mcp-server)        |
+| **एजेंट स्किल्स**         | ❌ नहीं है            | ✅ [स्वायत्त स्किल्स](https://intlayer.org/hi/doc/agent_skills)       |
+| **विजुअल सीएमएस**         | ❌ नहीं है            | ✅ [मुफ्त और ओपन सोर्स](https://intlayer.org/hi/doc/concept/editor)   |
+
+## ट्रांसलेशन वर्कफ़्लो
+
+`vue-i18n` में इनबिल्ट ट्रांसलेशन कमांड्स नहीं हैं। आमतौर पर फाइल्स को Crowdin या Phrase जैसे बाहरी प्लेटफॉर्म्स पर एक्सपोर्ट किया जाता है।
+
+Intlayer ये सभी सुविधाएं सीधे प्रदान करता है:
+
+**लोकल एआई ऑटो-फिल (`intlayer fill`):**
+
+अपनी OpenAI, Anthropic, Mistral या Gemini API कीज के साथ छूटे हुए टेक्स्ट्स को स्वतः पूरा करें।
+
+**सेल्फ-होस्टेड विजुअल सीएमएस:**
+
+[Intlayer CMS](https://intlayer.org/hi/doc/concept/cms) के जरिए गैर-तकनीकी सदस्य सीधे वेब यूआई में टेक्स्ट एडिट करके सीधे गिट में कमिट कर सकते हैं।
+
+**ओपन सोर्स लाइसेंस:**
+
+सभी टूल्स Apache 2.0 लाइसेंस के तहत पूरी तरह स्वतंत्र रूप से उपलब्ध हैं।
+
+## vue-i18n किन परिस्थितियों में आज भी सही है?
+
+<AccordionGroup>
+<Accordion header="चल रहे बड़े Nuxt 2/3 प्रोजेक्ट्स">
+
+यदि आपका रूटिंग आर्किटेक्चर `@nuxtjs/i18n` से गहराई से जुड़ा है, तो पूरे सिस्टम को बदलना हमेशा व्यावहारिक नहीं होता।
+
+</Accordion>
+<Accordion header="विशिष्ट ICU आवश्यकताएं">
+
+यदि आप जटिल नेस्टेड मैसेजेस या विशेष डेटा फॉर्मेटिंग का बड़े पैमाने पर इस्तेमाल कर रहे हैं।
+
+</Accordion>
+<Accordion header="छोटे व्यक्तिगत प्रोजेक्ट्स">
+
+यदि बंडल साइज आपके उपयोग में कोई महत्वपूर्ण बाधा नहीं बनता।
+
+</Accordion>
+</AccordionGroup>
+
+## अपने मौजूदा vue-i18n सेटअप को कैसे बेहतर बनाएं?
+
+Intlayer ड्रॉप-इन कम्पैटिबिलिटी पैकेज प्रदान करता है जो `vue-i18n` और `@nuxtjs/i18n` के सटीक फंक्शन सिग्नेचर (`useI18n`, `$t`, `<i18n-t>`) को पूरी तरह बनाए रखता है। कंपाइलर-चालित हल्की संरचना का लाभ उठाने के लिए आपको अपने टेम्पलेट्स या कंपोज़ेबल को फिर से लिखने की आवश्यकता नहीं है।
+
+सेटअप केवल एक कमांड से पूरा हो जाता है:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+यह इंटरैक्टिव सीएलआई स्वतः निम्नलिखित कार्य करता है:
+
+1. `@intlayer/vue-i18n` या `@intlayer/nuxt-i18n` कम्पैटिबिलिटी पैकेज इंस्टॉल करता है।
+2. Vite या Nuxt बंडलर एलियास को कॉन्फ़िगर करता है ताकि आपके मौजूदा इंपोर्ट्स और टेम्पलेट टैग सीधे Intlayer पर मैप हो जाएं, जिससे `vue-i18n` को `package.json` से सुरक्षित रूप से हटाया जा सके।
+3. एडिटर में तुरंत लैंग्वेज सर्वर (LSP) डायग्नोस्टिक्स सक्षम करता है, क्लाइंट बंडल से 24 KB के रनटाइम AST पार्सर को हटाता है, और बिना किसी बड़े रिफैक्टरिंग के लोकल एआई ट्रांसलेशन फ्लो को सक्रिय करता है।
+
+विस्तृत जानकारी के लिए हमारे विशेष गाइड्स देखें:
+
+- **सीधी अनुकूलता:** [`vue-i18n` कम्पैटिबिलिटी लेयर](https://intlayer.org/hi/doc/compatibility/vue-i18n) या [`@nuxtjs/i18n`](https://intlayer.org/hi/doc/compatibility/nuxtjs-i18n) का उपयोग करके अपने मौजूदा टेम्पलेट्स को बनाए रखें।
+- **स्टेप-बाय-स्टेप माइग्रेशन:** JSON फाइल्स को स्ट्रक्चर्ड डिक्शनरीज में बदलने के लिए हमारे गाइड्स देखें: [vue-i18n से](https://intlayer.org/hi/doc/migration/vue-i18n) या [@nuxtjs/i18n से](https://intlayer.org/hi/doc/migration/nuxtjs-i18n)।
+- **हाइब्रिड तरीका:** रनटाइम के रूप में `vue-i18n` को बनाए रखते हुए, [Intlayer को vue-i18n के साथ इस्तेमाल करें](https://intlayer.org/hi/blog/intlayer-with-vue-i18n) ताकि आपको सख्त टाइप सुरक्षा और लोकल एआई ट्रांसलेशन मिल सके।
+
+मुफ्त [i18n SEO स्कैनर](https://intlayer.org/i18n-seo-scanner) से अपनी साइट के बंडल साइज और कंटेंट लीकेज की जांच करें:
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## संबंधित लेख
+
+- [Vue & Vite i18n बेंचमार्क: विस्तृत विश्लेषण](https://intlayer.org/hi/doc/benchmark/vue)
+- [vue-i18n बनाम Intlayer तुलनात्मक समीक्षा](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer)
+- [क्या 2026 में next-intl पुराना हो चुका है?](https://intlayer.org/hi/blog/is-next-intl-outdated)
+- [कंपाइलर-आधारित बनाम डिक्लेरेटिव अंतर्राष्ट्रीयकरण](https://intlayer.org/hi/blog/compiler-vs-declarative-i18n)

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

@@ -0,0 +1,177 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: ग्लोब आयात, चंक्स और बिल्ड-टाइम संदेश"
+description: i18n के बारे में वास्तव में Vite-विशिष्ट क्या है। import.meta.glob के साथ लेज़ी कैटलॉग, प्रति-रूट लोकेल विभाजन शायद ही कभी क्यों काम करता है, HMR अंतराल और कंपाइल-टाइम प्लगइन्स।
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite कोड विभाजन
+  - अनुवाद लेज़ी लोड करें
+  - vite प्लगइन i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: वे हिस्से जो Vite के बारे में हैं, आपके फ्रेमवर्क के नहीं
+
+अधिकांश "Vite i18n" ट्यूटोरियल वास्तव में React या Vue ट्यूटोरियल हैं जो केवल Vite का उपयोग करते हैं। यह लेख नीचे की परत के बारे में है: कैटलॉग कैसे आयात किए जाते हैं, Rollup उनके साथ क्या करता है, और आपने जो लेज़ी लोडिंग लिखी है वह शायद लेज़ी क्यों नहीं है।
+
+## विषय सूची
+
+<TOC/>
+
+## स्टेटिक आयात डिफ़ॉल्ट है, और यह उत्सुक (eager) है
+
+सबसे सरल सेटअप एक मॉड्यूल के शीर्ष पर प्रत्येक कैटलॉग को आयात करता है:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+इसका मतलब है कि एंट्री चंक में तीन कैटलॉग, हर पेज पर, हर उपयोगकर्ता के लिए शामिल हैं। यह दो लोकेल और सौ स्ट्रिंग्स के लिए ठीक है। दस लोकेल पर यह बंडल में सबसे बड़ा परिहार्य खर्च बन जाता है।
+
+## `import.meta.glob` और वह फ्लैग जिसे हर कोई गलत समझता है
+
+Vite का ग्लोब आयात सामान्य समाधान है:
+
+```ts
+const catalogs = import.meta.glob("./locales/*.json");
+
+export const loadCatalog = async (locale: string) => {
+  const load = catalogs[`./locales/${locale}.json`];
+  return (await load()) as Record<string, string>;
+};
+```
+
+लेज़ी डिफ़ॉल्ट है: प्रत्येक प्रविष्टि एक फ़ंक्शन है जो एक गतिशील आयात लौटाती है, और Rollup प्रति फ़ाइल एक चंक उत्सर्जित करता है। `{ eager: true }` जोड़ने से वे सभी आयात करने वाले मॉड्यूल में इनलाइन हो जाते हैं, जिससे बचने की आप कोशिश कर रहे थे:
+
+```ts
+// प्रत्येक लोकेल, एंट्री चंक में। लगभग कभी नहीं जो आप चाहते हैं:
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+जाल यह है कि दोनों संस्करण विकास में काम करते हैं, क्योंकि Vite अनबंडल मॉड्यूल प्रदान करता है। अंतर केवल `dist` में दिखाई देता है। `npx vite build && npx vite preview` के साथ जाँचें, फिर देखें कि एंट्री चंक में वास्तव में क्या शामिल है।
+
+## प्रति-रूट विभाजन शायद ही कभी विभाजित होता है
+
+यह वह हिस्सा है जो लोगों को हैरान करता है। आप पृष्ठ के अनुसार कैटलॉग विभाजित करते हैं:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+फिर दो रूट दोनों `checkout.json` आयात करते हैं, और Rollup इसे एक साझा चंक में ले जाता है जो दोनों पर लोड होता है। Rollup का चंकिंग मॉड्यूल ग्राफ़ द्वारा संचालित होता है, आपके फ़ोल्डर नामों से नहीं: एक से अधिक प्रविष्टियों से पहुँच योग्य मॉड्यूल सामान्य हो जाता है। एक तीसरा रूट जोड़ने से कुछ नहीं बदलता है, और चौथा जोड़ने से यह अलग तरह से विभाजित हो सकता है।
+
+इसलिए प्रति-रूट लोकेल विभाजन केवल तभी लागू होता है जब आयात ग्राफ़ वास्तव में अलग हो। यदि यह मायने रखता है, तो इसे मानने के बजाय सत्यापित करें:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+यदि आपको सीमा को बाध्य करने की आवश्यकता है, तो `build.rollupOptions.output.manualChunks` निकास द्वार है, जिसे हाथ से बनाए रखने की लागत चुकानी पड़ती है।
+
+## कैटलॉग हॉट-रीलोड नहीं होते हैं
+
+एक घटक को संपादित करें, Vite इसे तुरंत बदल देता है। `locales/fr.json` को संपादित करें, और इसे कैसे आयात किया गया था इसके आधार पर, कुछ नहीं होता है। गतिशील रूप से आयातित JSON की कोई HMR सीमा नहीं होती है, इसलिए मॉड्यूल ग्राफ़ को उपभोक्ताओं को अमान्य करना नहीं पता होता है।
+
+लोग हर बार किसी स्ट्रिंग को छूने पर देव सर्वर को पुनरारंभ करके इसका समाधान करते हैं, आमतौर पर यह महसूस किए बिना कि यह टालने योग्य है। सुधार i18n प्लगइन का है: इसे HMR अपडेट को स्वीकार करना होगा और चल रहे ऐप में नए संदेशों को पुश करना होगा। जब आप किसी लाइब्रेरी का मूल्यांकन करते हैं, तो जाँचें कि क्या उसका Vite प्लगइन ऐसा करता है।
+
+## `define` लोकेल को बेक कर देता है
+
+बिल्ड समय पर डिफ़ॉल्ट लोकेल को हल करना आकर्षक है:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` बिल्ड समय पर किया गया एक पाठ्य प्रतिस्थापन है। जब आप निर्माण करते हैं तो जो भी मान मौजूद होता है वह वही मान होता है जो शिप करता है, इसलिए यह प्रति लोकेल एक बिल्ड को बाध्य करता है। यह एक वैध रणनीति है, और Angular का आधिकारिक i18n यही करता है। यदि किसी एकल परिनियोजन को प्रत्येक भाषा की सेवा करनी है तो यह वह नहीं है जो आप चाहते हैं।
+
+उन मानों के लिए जो प्रति अनुरोध भिन्न होने चाहिए, उन्हें `define` से बाहर रखें और उन्हें रनटाइम पर हल करें।
+
+## संदेश पार्सिंग को बिल्ड समय पर ले जाना
+
+इस पारिस्थितिकी तंत्र में प्रत्येक परिपक्व विकल्प अंततः वही काम करता है: ब्राउज़र में संदेशों को पार्स करना बंद करना।
+
+| प्लगइन                       | यह बिल्ड समय पर क्या ले जाता है                                         |
+| :--------------------------- | :---------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | vue-i18n संदेशों को रेंडर फ़ंक्शन में संकलित करता है                    |
+| Lingui (मैक्रो + प्लगइन)     | कैटलॉग निकालता और संकलित करता है, मैक्रोज़ को संदेश आईडी से बदलता है    |
+| Paraglide (inlang)           | प्रत्येक संदेश को अपने स्वयं के ट्री-शेकेबल फ़ंक्शन में संकलित करता है  |
+| `vite-intlayer`              | प्रति-घटक शब्दकोश बनाता है, अप्रयुक्त फ़ील्ड्स को हटाता और छोटा करता है |
+
+साझा लाभ दोहरा है: रनटाइम संदेश कंपाइलर शिप होना बंद हो जाता है, और अप्रयुक्त प्रविष्टियां स्थिर रूप से हटाने योग्य हो जाती हैं। साझा लागत यह है कि आपके देव सर्वर और आपके CI दोनों को प्लगइन की आवश्यकता होती है, और एक खाली `tsc` या गैर-Vite परीक्षण रनर अतिरिक्त कॉन्फ़िगरेशन के बिना उत्पन्न आउटपुट को नहीं देख पाएंगे।
+
+## SSR: कभी भी किसी मॉड्यूल में लोकेल न रखें
+
+यदि आप SSR जोड़ते हैं, चाहे किसी फ्रेमवर्क के माध्यम से या `vite-plugin-ssr` के माध्यम से, जो नियम मायने रखता है वह यह है: वर्तमान लोकेल रखने वाला एक मॉड्यूल-स्तरीय चर उस सर्वर प्रक्रिया पर प्रत्येक समवर्ती अनुरोध में साझा किया जाता है।
+
+```ts
+// ब्राउज़र में ठीक है। सर्वर पर एक क्रॉस-रिक्वेस्ट डेटा लीक:
+export let currentLocale = "en";
+```
+
+एक ही समय में सर्वर से टकराने वाले दो उपयोगकर्ता दौड़ेंगे, और उनमें से एक को दूसरे की भाषा मिल जाएगी। यह विकास में पुनरुत्पादित नहीं होता है क्योंकि आप एकमात्र अनुरोध हैं। प्रति अनुरोध लोकेल को हल करें और इसे संदर्भ के माध्यम से या अपने फ्रेमवर्क के अनुरोध-स्थानीय भंडारण के माध्यम से स्पष्ट रूप से पास करें।
+
+## Intlayer का Vite प्लगइन
+
+Intlayer एक एकल प्लगइन पंजीकृत करता है जो शब्दकोश निर्माण, देव-मोड निगरानी और अनुकूलन पाइपलाइन को संभालता है:
+
+```ts fileName="vite.config.ts"
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+आयात पुनर्लेखन, पर्ज और मिनिफ़ाई डिफ़ॉल्ट रूप से चालू हैं। दो मुख्य फ़्लैग `intlayer.config.ts` में रहते हैं:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // उन सामग्री फ़ील्ड्स को छोड़ें जिन्हें कोई घटक नहीं पढ़ता है
+    minify: true, // सामग्री कुंजियों का नाम बदलकर छोटे उपनाम रखें
+  },
+};
+
+export default config;
+```
+
+चूँकि सामग्री को प्रति लोकेल फ़ाइल के बजाय प्रति घटक घोषित किया जाता है, इसलिए पर्ज पास के पास काम करने के लिए एक मॉड्यूल ग्राफ़ होता है, जो निष्कासन को सुरक्षित बनाता है। विवरण [बंडल अनुकूलन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/bundle_optimization.md) में।
+
+## सामान्य गलतियाँ
+
+- **ग्लोब पर `{ eager: true }` जिसे आप लेज़ी लोड करना चाहते थे।** देव में काम करता है, उत्पादन में सब कुछ भेजता है।
+- **चंक्स का उत्पादन करने के लिए फ़ोल्डर संरचना पर भरोसा करना।** Rollup आयात का अनुसरण करता है, निर्देशिकाओं का नहीं।
+- **अनुवाद परिवर्तन देखने के लिए देव सर्वर को पुनरारंभ करना।** यह एक अनुपस्थित HMR हैंडलर है, सामान्य नहीं।
+- **`define` में लोकेल डालना।** आपने अभी-अभी प्रति भाषा एक बिल्ड के लिए प्रतिबद्ध किया है।
+- **SSR के साथ मॉड्यूल-स्तरीय लोकेल स्थिति।** क्रॉस-रिक्वेस्ट लीक जो कभी भी स्थानीय रूप से प्रकट नहीं होता है।
+- **देव सर्वर की बेंचमार्किंग।** अनबंडल किए गए मॉड्यूल आपको बंडल के बारे में कुछ नहीं बताते हैं।
+
+## आगे पढ़ें
+
+- [बंडल अनुकूलन: पर्ज, छोटा करना और ब्राउज़र तक क्या पहुँचता है](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/bundle_optimization.md)
+- [फ्रेमवर्क में बेंचमार्क रिपोर्ट](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/benchmark/index.md)
+- [कॉन्फ़िगरेशन संदर्भ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/configuration.md)
+- [Vite और React के साथ Intlayer सेट करें](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_with_vite+react.md)
+- [ड्रॉप-इन i18next कम्पैट एडॉप्टर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/compat/i18next.md)
+- [React i18n: प्रदाता मॉडल कैसे काम करता है](https://github.com/aymericzip/intlayer/blob/main/docs/blog/hi/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: यह कैसे काम करता है और कहाँ चोट पहुँचती है](https://github.com/aymericzip/intlayer/blob/main/docs/blog/hi/list_i18n_technologies/frameworks/vue.md)
+- [प्रति-घटक बनाम केंद्रीकृत i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/hi/per-component_vs_centralized_i18n.md)

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

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## अंतरराष्ट्रीयकरण (i18n) क्या है?
 
 अंतरराष्ट्रीयकरण, जिसे अक्सर i18n कहा जाता है, एक प्रक्रिया है जिसमें आपके एप्लिकेशन को कई भाषाओं और सांस्कृतिक संदर्भों का समर्थन करने के लिए डिजाइन और तैयार किया जाता है। Angular में, इसका अर्थ है कि आपके ऐप को इस तरह से कॉन्फ़िगर करना कि पाठ, दिनांक, संख्या, और यहां तक कि UI लेआउट विभिन्न स्थानीयताओं के लिए आसानी से अनुकूलित हो सकें। इस आधारभूत कार्य को सही ढंग से तैयार करना यह सुनिश्चित करता है कि भविष्य के अनुवादों का एकीकृत और प्रभावी ढंग से एकीकृत करना संभव हो।

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

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n चित्रण](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## अंतर्राष्ट्रीयकरण (i18n) क्या है?
 
 अंतर्राष्ट्रीयकरण, या i18n, एक एप्लिकेशन को इस प्रकार से ढालने में शामिल होता है कि यह विभिन्न भाषाओं, क्षेत्रीय प्रारूपों, और सांस्कृतिक मानदंडों के अनुसार आसानी से अनुकूलित हो सके। React Native में, i18n में बटन और लेबल के लिए स्ट्रिंग को संभालना, और उपयोगकर्ता की संस्कृति के अनुसार दिनांक, समय, मुद्रा, और अधिक को प्रारूपित करना शामिल है। सही ढंग से तैयार किए गए React Native ऐप्स आपको अतिरिक्त भाषाओं और सांस्कृतिक विशेषताओं को बाद में बिना बड़े सुधारों के समेकित करने की अनुमति देते हैं।

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

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## अंतर्राष्ट्रीयकरण (i18n) क्या है?
 
 अंतर्राष्ट्रीयकरण, जिसे i18n के रूप में संक्षिप्त किया जाता है, आपकी वेबसाइट को कई भाषाओं और सांस्कृतिक संदर्भों का समर्थन करने के लिए डिजाइन और तैयार करने की प्रक्रिया है। React में, इसका मतलब है कि आपके ऐप को इस तरह से सेट करना कि स्ट्रिंग्स, तारीख प्रारूप, संख्या प्रारूप, और यहां तक कि लेआउट को विभिन्न क्षेत्रों के उपयोगकर्ताओं के लिए आसानी से अनुकूलित किया जा सके। अपने React ऐप को i18n के लिए तैयार करना अनुवादों और अन्य स्थानीयकरण सुविधाओं को स्वच्छ रूप से एकीकृत करने के लिए आधार तैयार करता है।

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

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## अंतरराष्ट्रीयकरण (i18n) क्या है?
 
 अंतरराष्ट्रीयकरण, जिसे सामान्यतः i18n के रूप में संक्षिप्त किया जाता है, आपकी एप्लिकेशन को इस तरह से डिजाइन और बनाना है कि यह विभिन्न भाषाओं, क्षेत्रों और सांस्कृतिक परंपराओं के लिए आसानी से अनुकूलित हो सके। Svelte में, इसका मतलब आमतौर पर अनुवाद स्ट्रिंग सेट करना, अंतिम तिथियों, समयों और संख्याओं को स्थानीय बनाना, और सुनिश्चित करना है कि उपयोगकर्ता इंटरफ़ेस विभिन्न स्थलों के बीच बिना प्रमुख कोड पुनर्लेखन के गतिशील रूप से बदल सके।

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

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## अंतर्राष्ट्रीयकरण (i18n) क्या है?
 
 अंतर्राष्ट्रीयकरण (i18n) एक सॉफ़्टवेयर अनुप्रयोग (या वेबसाइट) को कई भाषाओं और सांस्कृतियों के लिए तैयारी करने का अभ्यास है। Vue.js पारिस्थितिकी तंत्र के भीतर, इसमें यह स्थापित करना शामिल है कि पाठ, दिनांक, संख्या, मुद्रा और अन्य स्थानीयकरण योग्य तत्वों को विभिन्न स्थानीयताओं के लिए कैसे अनुकूलित किया जा सकता है। i18n को शुरू से स्थापित करके, आप नई भाषाओं को जोड़ने और भविष्य की स्थानीयकरण आवश्यकताओं को संभालने के लिए एक संगठित, स्केलेबल संरचना सुनिश्चित करते हैं।

package/blog/hi/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # अंतर्राष्ट्रीयकरण (i18n) क्या है? परिभाषा और चुनौतियाँ
 
-![i18n चित्रण](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## अंतर्राष्ट्रीयकरण (i18n) को समझना
 
 **अंतर्राष्ट्रीयकरण**, जिसे अक्सर **i18n** के रूप में संक्षिप्त किया जाता है, वह प्रक्रिया है जिसके द्वारा एक अनुप्रयोग को कई भाषाओं, संस्कृतियों और क्षेत्रीय प्रथाओं का समर्थन करने के लिए डिज़ाइन और तैयार किया जाता है **बिना** कोडबेस में बड़े बदलाव के। नाम i18n इस तथ्य से लिया गया है कि शब्द "अंतर्राष्ट्रीयकरण" में **i** और **n** के बीच 18 अक्षर हैं।