@intlayer/docs 9.5.1 → 9.5.3

package/blog/hi/lingui_vs_intlayer-lingui.md

@@ -0,0 +1,304 @@
+---
+createdAt: 2026-09-13
+updatedAt: 2026-09-13
+title: "Lingui बनाम @intlayer/lingui: समान मैक्रोज़, अलग रनटाइम"
+description: "क्या बदलता है जब एक React ऐप अपने Lingui मैक्रोज़ को बनाए रखता है लेकिन उन्हें @intlayer/lingui कम्पैट एडॉप्टर के माध्यम से प्रस्तुत करता है। घटक आकार, हाइड्रेशन, लीकेज और प्रति-पेज जावास्क्रिप्ट उसी TanStack Start कोड पर मापा गया, जिसमें यह भी शामिल है कि एडॉप्टर कहाँ पिछड़ता है।"
+keywords:
+  - Lingui
+  - "@intlayer/lingui"
+  - Intlayer
+  - कम्पैट एडॉप्टर
+  - माइग्रेशन
+  - अंतर्राष्ट्रीयकरण
+  - i18n
+  - बेंचमार्क
+  - बंडल आकार
+  - ब्लॉग
+  - React
+  - TanStack Start
+  - Vite
+slugs:
+  - blog
+  - lingui-vs-intlayer-lingui
+author: aymericzip
+---
+
+# Lingui बनाम @intlayer/lingui | समान मैक्रोज़, अलग रनटाइम
+
+`@intlayer/lingui`, `@lingui/core` और `@lingui/react` के लिए एक कम्पैट एडॉप्टर (संगतता एडॉप्टर) है। आपके `` t`...` ``, `<Trans>`, `useLingui()` और `i18n._()` कॉल्स बिल्कुल वैसे ही बने रहते हैं; मैक्रोज़ पहले की तरह कंपाइल होते रहते हैं; जो बदलता है वह यह है कि रनटाइम पर संदेश कहाँ से आते हैं। प्रति भाषा एक संकलित कैटलॉग के बजाय, प्रत्येक कॉल साइट इसके लिए विशेष रूप से संकलित Intlayer डिक्शनरी से बंधी होती है।
+
+यह लेख उसी TanStack Start एप्लिकेशन पर इस बदलाव को मापता है, जिसे एक बार शुद्ध Lingui के साथ और एक बार एडॉप्टर के साथ बनाया गया है। ये आंकड़े [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) से लिए गए हैं। दोनों लाइब्रेरीज़ की तुलना देखने के लिए [Lingui बनाम Intlayer](https://intlayer.org/hi/blog/lingui-vs-intlayer) पढ़ें। यह लेख इस बात पर केंद्रित है कि एडॉप्टर क्या बदलता है, और कहाँ यह अतिरिक्त लाभ नहीं देता।
+
+<TOC/>
+
+> **संक्षेप में (tl;dr)**: उसी TanStack Start ऐप पर, `@intlayer/lingui` ने मैक्रोज़ को छुए बिना औसत घटक आकार को **85.5 KB से घटाकर 12.8 KB** gzip कर दिया, हाइड्रेशन को **28 ms से 19.7 ms** और भाषा स्विचिंग को **5.9 ms से घटाकर 2.9 ms** कर दिया। बुनियादी सेटअप में (जहाँ हर कैटलॉग पहले से लोड होता है) इसने **90% पेज लीकेज** को भी हटा दिया और प्रति पेज 12 KB की बचत की। लेकिन लेज़ी-लोडेड सेटअप में यह साधारण Lingui के 115 KB के मुकाबले **137 KB प्रति पेज** भेजता है: इसका कारण यह है कि एडॉप्टर रनटाइम पर ICU को हल करता है जबकि Lingui प्रीकंपाइल्ड टोकन एरे प्रदान करता है। स्रोत-भाषा लीकेज (~9-10%) दोनों पक्षों में समान है, क्योंकि यह घटकों में एम्बेडेड `message` फ़ॉलबैक से आता है, रनटाइम से नहीं। यह एडॉप्टर एक Vite प्लगइन है; इसे TanStack Start पर मापा गया था।
+
+## `@intlayer/lingui` क्या है
+
+Lingui एक कंपाइलर और रनटाइम का संयोजन है। आपके सोर्स कोड के मैक्रोज़ को प्रत्येक भाषा के लिए `.po` (या JSON) कैटलॉग में निकाला जाता है, प्रति भाषा एक JS मॉड्यूल में कंपाइल किया जाता है, और `i18n.load()` + `i18n.activate()` के माध्यम से एक वैश्विक `I18n` इंस्टेंस में लोड किया जाता है। प्रत्येक `useLingui()` उस इंस्टेंस को सब्सक्राइब करता है; प्रत्येक `_()` कॉल सक्रिय कैटलॉग में अपनी आईडी खोजता है।
+
+`@intlayer/lingui` मैक्रोज़ और API को बनाए रखता है और कैटलॉग लुकअप को बदल देता है:
+
+1. **इम्पोर्ट एलियासिंग (Import aliasing)।** `@intlayer/lingui/plugin` से `lingui()` प्लगइन `vite-intlayer` को रैप करता है और `resolve.alias` प्रविष्टियाँ जोड़ता है ताकि `@lingui/core` और `@lingui/react` सीधे `@intlayer/lingui` पर निर्देशित हों। आपके कोड इम्पोर्ट में कोई बदलाव नहीं होता।
+2. **सच्चाई के स्रोत के रूप में कैटलॉग।** `syncJSON` प्लगइन (`.po` फ़ाइलों के लिए `syncPO`) आपके मौजूदा कैटलॉग को पढ़ता है और उन्हें Intlayer डिक्शनरी में बदल देता है, जब भी CLI या CMS अपडेट करता है तो अनुवाद वापस लिख देता है। `splitKeys: "key-prefix"` के साथ, डॉटेड आईडी (`footer.github`, `hero.title`) का एक फ्लैट कैटलॉग 244 KB की एक भारी फ़ाइल के बजाय प्रति प्रीफ़िक्स छोटी डिक्शनरी में विभाजित हो जाता है।
+3. **कॉल-साइट बाइंडिंग।** Intlayer ऑप्टिमाइज़ पास प्रत्येक फ़ाइल में `_`, `t` और `<Trans>` को पास की गई आईडी को एकत्र करता है, और केवल मेल खाने वाली डिक्शनरी ही घटक को सौंपता है। `<Trans id="hero.title">` स्वतंत्र रूप से बाइंड होता है; `useLingui()` फ़ाइल में उपयोग किए गए प्रत्येक प्रीफ़िक्स से बाइंड होता है। बिना डॉट वाली आईडी (हैश की गई आईडी, `mockBanner`) Lingui की एकल `messages` फ़ॉलबैक डिक्शनरी पर वापस आ जाती हैं।
+
+```tsx fileName="src/components/Hero.tsx"
+// आपका कोड, बिना किसी बदलाव के
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+
+const Hero = () => {
+  const { _ } = useLingui();
+  return (
+    <section>
+      <h1>{_({ id: "hero.title", message: "Measure what you ship" })}</h1>
+      <Trans id="hero.subtitle">Every byte counts</Trans>
+    </section>
+  );
+};
+```
+
+```tsx fileName="कंपाइलर क्या आउटपुट करता है (सरलीकृत)"
+import _dicHash_hero from "../.intlayer/dictionaries/hero.mjs";
+import {
+  useDictionary as useLingui,
+  TransDictionary as Trans,
+} from "@intlayer/lingui";
+
+const Hero = () => {
+  const { _ } = useLingui(_dicHash_hero);
+  return (
+    <section>
+      <h1>{_({ id: "hero.title", message: "Measure what you ship" })}</h1>
+      <Trans id="hero.subtitle" dictionary={_dicHash_hero}>
+        Every byte counts
+      </Trans>
+    </section>
+  );
+};
+```
+
+घटक अब वैश्विक इंस्टेंस और उसके पीछे मौजूद विशाल कैटलॉग तक नहीं पहुँचता। यह केवल `hero` तक पहुँचता है। यही मुख्य कारण है कि नीचे दी गई तालिका में घटक आकार का कॉलम 7 गुना कम हो जाता है।
+
+## एडॉप्टर क्या रखता है, क्या अनदेखा करता है, और क्या नहीं बदलता
+
+| Lingui API                                                  | `@intlayer/lingui` के साथ                                                                                        |
+| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `` t`...` ``, `msg`, `plural`, `select`, `<Trans>` मैक्रोज़ | ✅ बनाए रखा गया। Intlayer पास से पहले बिल्ड में `@lingui/babel-plugin-lingui-macro` या `@lingui/swc-plugin` रखें |
+| `useLingui()` → `{ i18n, _, t }`                            | ✅ बनाए रखा गया। प्रोवाइडर के बाहर भी काम करता है (`react-intlayer` से भाषा प्राप्त होती है)                     |
+| `i18n._(id, values)`, `i18n.t()`                            | ✅ बनाए रखा गया। स्पष्ट और हैश की गई आईडी दोनों का समाधान करता है                                                |
+| ICU बहुवचन रूप, `select`, `selectordinal`, `#`              | ✅ बनाए रखा गया, Intlayer के ICU रिज़ॉल्वर के माध्यम से                                                          |
+| `i18n.date()`, `i18n.number()`, `formats`                   | ✅ बनाए रखा गया, नेटिव `Intl` द्वारा समर्थित                                                                     |
+| `I18nProvider`                                              | ✅ बनाए रखा गया। `IntlayerProvider` को लपेटता है; `i18n.on("change")` सुनता है ताकि `activate()` पर री-रेंडर हो  |
+| `i18n.activate(locale)`                                     | ✅ बनाए रखा गया                                                                                                  |
+| `i18n.load(locale, messages)` / `loadAndActivate()`         | ⚠️ **रनटाइम फ़ॉलबैक** के रूप में स्वीकृत। संकलित डिक्शनरी को प्राथमिकता; कोड हटाने का सुझाव देने वाली चेतावनी    |
+| `setupI18n({ messages, missing })`                          | ⚠️ `messages` फ़ॉलबैक के रूप में मर्ज होते हैं; `missing` को अनदेखा किया जाता है                                 |
+| `lingui extract` / `lingui compile`                         | ✅ आपका सामान्य वर्कफ़्लो बना रहता है। निकाले गए कैटलॉग की ओर `syncPO` / `syncJSON` को इंगित करें                |
+| `I18nProvider` पर `defaultComponent`                        | ⚠️ संदर्भ में संग्रहीत, लेकिन रेंडरिंग के समय लागू नहीं होता                                                     |
+| Next.js                                                     | ❌ यह प्लगइन `vite-intlayer` को रैप करता है। केवल Vite, TanStack Start और React Router समर्थित                   |
+
+## बेंचमार्क तुलना
+
+### क्या मापा गया था
+
+[Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) सुइट प्रत्येक सेटअप के साथ **समान एप्लिकेशन** बनाता है: **10 पेज** (home, about, blog, careers, contact, FAQ, pricing, products, settings, team), **10 भाषाएं** (`en`, `fr`, `es`, `de`, `it`, `pt`, `zh`, `ja`, `ko`, `ru`), समान घटक और समान सामग्री। पेजों को `en` और `fr` में मापा गया।
+
+Lingui को चार लोडिंग रणनीतियों में बनाया गया था: पहले से सभी संकलित कैटलॉग इम्पोर्ट करने (`static`) से लेकर रूट-वाइज़ लेज़ी-लोडेड कैटलॉग (`scoped-dynamic`) तक। एडॉप्टर को **समान घटकों** पर केवल `vite.config.ts` और `intlayer.config.ts` में बदलाव करके बनाया गया था। इसकी `static` पंक्ति सभी भाषाओं को बंडल करती है; इसकी `dynamic` पंक्ति (`importMode: 'dynamic'`) आवश्यकता पड़ने पर सक्रिय भाषा लोड करती है। कोई "scoped" संस्करण नहीं है: क्योंकि ऑप्टिमाइज़ पास स्वचालित रूप से प्रति कॉल-साइट स्कोप करता है।
+
+प्रत्येक बिल्ड के लिए निम्नलिखित मेट्रिक्स दर्ज किए जाते हैं:
+
+- **Lib size**: केवल i18n लाइब्रेरी इम्पोर्ट करने वाले खाली घटक का gzip आकार।
+- **Page JS**: प्रति पेज डाउनलोड किया गया gzip जावास्क्रिप्ट, सभी पेजों और भाषाओं का औसत।
+- **Locale leak %**: डाउनलोड किए गए JS में अनूदित स्ट्रिंग्स का अनुपात जो उस भाषा से संबंधित हैं जिसे उपयोगकर्ता **नहीं** देख रहा है।
+- **Page leak %**: डाउनलोड किए गए JS में उन स्ट्रिंग्स का अनुपात जो उस पेज से संबंधित हैं जिस पर उपयोगकर्ता **नहीं** है।
+- **Component avg**: अलग से कंपाइल किए गए प्रत्येक घटक का औसत gzip आकार।
+- **E2E reactivity**: नई भाषा चुनने और DOM में `html[lang]` अपडेट होने के बीच का वास्तविक समय (Playwright, 5 बार दोहराव)।
+- **Hydration**: React हाइड्रेशन चरण की अवधि।
+
+> नीचे दिए गए आंकड़े `@lingui/react` 6.6.0 और `@intlayer/lingui` 9.5.1 के साथ **2026-09-12** के परीक्षण से हैं। परीक्षण ऐप जानबूझकर छोटा रखा गया है (प्रति भाषा कुछ दर्जन स्ट्रिंग्स), इसलिए लीकेज प्रतिशत एक **संरचनात्मक पैटर्न** दर्शाते हैं: सामग्री बढ़ने पर वे बढ़ते हैं जबकि रनटाइम लागत स्थिर रहती है।
+
+### TanStack Start पर परिणाम
+
+| सेटअप                  | रणनीति         | Lib size (gz) | Page JS औसत (gz) | भाषा लीकेज | पेज लीकेज | घटक औसत (gz) | E2E प्रतिक्रिया |   हाइड्रेशन |
+| ---------------------- | -------------- | ------------: | ---------------: | ---------: | --------: | -----------: | --------------: | ----------: |
+| **base** (बिना i18n)   | -              |        0.0 KB |         111.0 KB |       0.0% |      0.0% |       0.7 KB |          8.1 ms |     21.6 ms |
+| Lingui                 | static         |       11.2 KB |         152.2 KB |      50.0% |     90.0% |      58.0 KB |          3.9 ms |     19.9 ms |
+| Lingui                 | dynamic        |       11.2 KB |     **115.2 KB** |       9.3% |      0.0% |      85.5 KB |          5.9 ms |     28.0 ms |
+| Lingui                 | scoped-static  |       11.2 KB |         120.8 KB |       4.0% |      0.0% |     147.9 KB |          7.1 ms |     33.9 ms |
+| Lingui                 | scoped-dynamic |       11.2 KB |         120.2 KB |       8.6% |      0.0% |      83.7 KB |         42.1 ms |     32.9 ms |
+| **`@intlayer/lingui`** | static         |   **10.3 KB** |         140.5 KB |      50.0% |  **0.0%** |  **14.9 KB** |      **3.3 ms** | **11.3 ms** |
+| **`@intlayer/lingui`** | dynamic        |   **10.3 KB** |         137.0 KB |       9.9% |  **0.0%** |  **12.8 KB** |      **2.9 ms** | **19.7 ms** |
+| `intlayer` (नेटिव)     | static         |        5.0 KB |         125.8 KB |      50.0% |      0.0% |       8.1 KB |          3.2 ms |     11.5 ms |
+| `intlayer` (नेटिव)     | dynamic        |        5.0 KB |         118.6 KB |       0.0% |      0.0% |       6.3 KB |          3.6 ms |     14.1 ms |
+
+**परिणामों का विश्लेषण**
+
+- **घटक: 7 गुना छोटे।** यह एडॉप्टर का मुख्य लाभ है। अलग से संकलित एक Lingui घटक रणनीति के आधार पर औसतन **58-148 KB** का होता है, क्योंकि `useLingui()` वैश्विक इंस्टेंस और उसमें लोड किए गए प्रत्येक कैटलॉग तक पहुँचता है। एडॉप्टर वाला वही घटक औसतन केवल **12.8-14.9 KB** का होता है: यह केवल अपनी डिक्शनरी और ICU रिज़ॉल्वर तक पहुँचता है।
+- **हाइड्रेशन: 8-14 ms तेज़।** `i18n.load()` + `i18n.activate()` React हाइड्रेशन से पहले क्लाइंट पर निष्पादित होते हैं; Lingui सेटअप जितना अधिक लेज़ी-लोडेड होगा, उतना अधिक समय लगेगा (28-34 ms)। एडॉप्टर के साथ, डिक्शनरी नियमित इम्पोर्ट के रूप में आती हैं जिन्हें बंडलर पहले ही पेज चंक में रख चुका होता है: `static` में **11.3 ms**, `dynamic` में **19.7 ms**।
+- **भाषा बदलना: 2 गुना तेज़, और कोई अटकाव नहीं।** Lingui के अनुकूलित `scoped-dynamic` सेटअप को `html[lang]` अपडेट करने में **42 ms** लगते हैं, क्योंकि बदलाव दिखने से पहले रूट कैटलॉग को फ़ेच, लोड और सक्रिय किया जाना होता है। एडॉप्टर दोनों मोड में स्थिर रूप से **2.9-3.3 ms** पर रहता है।
+- **बुनियादी सेटअप स्वतः अनुकूलित हो जाता है।** स्टेटिक Lingui हर पेज पर हर कैटलॉग भेजता है: 152.2 KB और 90% पेज लीकेज। स्टेटिक एडॉप्टर: 140.5 KB, 0% पेज लीकेज, उन्हीं घटकों के साथ।
+- **प्रति पेज बाइट्स: `dynamic` में Lingui 22 KB से आगे है।** इसे निष्पक्ष रूप से समझना आवश्यक है। Lingui निर्माण के समय संदेशों को टोकन एरे में कंपाइल करता है और केवल 11 KB का रनटाइम शिप करता है। एडॉप्टर Intlayer का ICU रिज़ॉल्वर (नेटिव बिल्ड की तुलना में लगभग 15 KB अधिक `@intlayer/core`), एडॉप्टर लेयर (~10 KB) और `react-intlayer` (~6 KB) शिप करता है। इस ऐप पर, यह **137.0 KB बनाम 115.2 KB** है। यदि प्रति पेज न्यूनतम बाइट्स ही आपकी एकमात्र प्राथमिकता है और आप पहले से ही लेज़ी-लोडेड Lingui का उपयोग कर रहे हैं, तो एडॉप्टर वहाँ मदद नहीं करेगा।
+- **भाषा लीकेज दोनों पक्षों में समान है।** `dynamic` में Lingui के लिए 9.3%, एडॉप्टर के लिए 9.9%। यह घटकों से आता है: `i18n._({ id: "careers-benefits.pay", message: "Top-of-market compensation" })` फ़ॉलबैक के रूप में अंग्रेजी स्रोत रखता है, और मैक्रो आउटपुट भी ऐसा ही करता है जब तक कि message फ़ील्ड को हटा न दिया जाए। अनुवाद चाहे किसी भी रनटाइम से दिया जाए, यह अंग्रेजी टेक्स्ट `fr` चंक में पहुँचता है। नेटिव `intlayer` (`.content.ts`, बिना इनलाइन टेक्स्ट के) पर यह 0% है।
+
+## संख्याएँ क्यों बदलती हैं, और एक क्यों स्थिर रहती है
+
+दो कारक इन परिणामों को निर्धारित करते हैं: **एक घटक किससे बंधा है**, और **संदेश किस प्रारूप में भेजे जाते हैं**।
+
+**बाइंडिंग (Binding)।** Lingui में मूल इकाई पूरी भाषा है। `fr` के लिए `messages.mjs` एक एकल मॉड्यूल है; जो भी घटक इसे लोड करने वाले इंस्टेंस को इम्पोर्ट करता है, वह इसकी संपूर्ण सामग्री तक पहुँच सकता है, जिससे बंडलर भाषा से नीचे विभाजित नहीं कर सकता। एडॉप्टर के साथ, इकाई कॉल साइट बन जाती है: `hero` और `footer` अलग-अलग इम्पोर्ट हैं, जिन्हें प्रति घटक विभाजित और मांग पर लोड किया जाता है। यही घटक आकार, हाइड्रेशन और पेज लीकेज में सुधार की वजह है।
+
+```bash
+.
+├── lingui.config.ts
+└── src
+    ├── i18n.ts                          # setupI18n(), load(), activate()
+    ├── locales
+    │   ├── en/messages.mjs              # lingui compile आउटपुट, प्रति भाषा एक
+    │   └── fr/messages.mjs
+    └── components
+        └── Hero.tsx                     # useLingui(); _("hero.title")
+```
+
+```bash
+.
+├── intlayer.config.ts                   # syncJSON({ splitKeys: "key-prefix" })
+├── .intlayer/                           # जनरेटेड: प्रति आईडी प्रीफ़िक्स, प्रति भाषा एक डिक्शनरी
+└── src
+    ├── locales
+    │   ├── en/messages.json             # अपरिवर्तित, सच्चाई का स्रोत बना हुआ है
+    │   └── fr/messages.json
+    └── components
+        └── Hero.tsx                     # useLingui(); _("hero.title")  ← अपरिवर्तित
+```
+
+**प्रारूप (Format)।** Lingui का कंपाइल चरण `{count, plural, one {# item} other {# items}}` को टोकन एरे में बदल देता है; रनटाइम को कभी भी ICU सिंटैक्स पार्स करने की आवश्यकता नहीं होती। एडॉप्टर संदेश को टेक्स्ट के रूप में रखता है और Intlayer के ICU रिज़ॉल्वर से पार्स करता है। यह प्रति पेज लगभग 15 KB का एक निश्चित ओवरहेड है, और यही कारण है कि `dynamic` पंक्ति बाइट्स में पीछे रह जाती है जबकि अन्य सभी क्षेत्रों में जीतती है। नेटिव Intlayer इससे बचता है क्योंकि `.content.ts` डिक्शनरी कंपाइलर द्वारा पूर्व-सुलझाए गए `enu()` / `insert()` नोड्स का उपयोग करती हैं।
+
+## तीन चरणों में माइग्रेशन
+
+<Steps>
+<Step number={1} title="इंस्टॉलेशन">
+
+```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
+```
+
+यह कमांड Lingui का पता लगाता है, `lingui.config.ts` पढ़कर `syncPO` (`.po` कैटलॉग) या `syncJSON` (JSON कैटलॉग) चुनता है, `intlayer`, `react-intlayer`, `@intlayer/lingui` और उपयुक्त सिंक प्लगइन इंस्टॉल करता है, और `vite.config.ts` में `@lingui/vite-plugin` को एडॉप्टर प्लगइन से बदल देता है। `@lingui/core`, `@lingui/react` और अपने मैक्रो प्लगइन को इंस्टॉल रखें: मैक्रोज़ कंपाइल होते रहेंगे और एडॉप्टर Lingui के प्रकारों का उपयोग करता है।
+
+</Step>
+<Step number={2} title="Intlayer को अपने कैटलॉग से जोड़ें">
+
+JSON कैटलॉग के लिए (`lingui.config.ts` में `format: "minimal"`):
+
+```ts fileName="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: {
+    importMode: "dynamic",
+    format: "icu",
+  },
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale, key }) => `./src/locales/${locale}/${key}.json`,
+      // डॉटेड आईडी को पहले सेगमेंट द्वारा समूहीकृत करें: `footer.github` → डिक्शनरी `footer`
+      splitKeys: "key-prefix",
+    }),
+  ],
+};
+
+export default config;
+```
+
+`.po` कैटलॉग के लिए, `syncJSON` को `@intlayer/sync-po-plugin` के `syncPO` से बदलें और `.po` एक्सटेंशन के साथ समान `source` पैटर्न का उपयोग करें। [Sync PO प्लगइन दस्तावेज़](https://intlayer.org/hi/doc/plugin/sync-po) देखें।
+
+`splitKeys: "key-prefix"` घटक आकार को अत्यधिक कम करने का प्रमुख कारक है। कैटलॉग फ़ाइल अपना फ्लैट आकार बनाए रखती है; विभाजन केवल उत्पन्न डिक्शनरी में मौजूद होता है, और रिवर्स सिंक स्वचालित रूप से कुंजियों को फिर से जोड़ देता है।
+
+</Step>
+<Step number={3} title="प्लगइन जोड़ें">
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import { lingui } from "@intlayer/lingui/plugin";
+
+export default defineConfig({
+  plugins: [
+    tanstackStart(),
+    viteReact({
+      // मैक्रो प्लगइन बनाए रखें; इसे Intlayer पास से पहले चलना चाहिए
+      babel: { plugins: ["@lingui/babel-plugin-lingui-macro"] },
+    }),
+    lingui(),
+  ],
+});
+```
+
+`lingui()` प्लगइन `vite-intlayer` (कंटेंट वॉचिंग, डिक्शनरी कंपाइलेशन, ऑप्टिमाइज़ पास) को समाहित करता है और `@lingui/core` और `@lingui/react` को एडॉप्टर पर एलियास करता है। बिल्ड करें, और उपरोक्त लाभ तुरंत लागू हो जाएंगे।
+
+</Step>
+</Steps>
+
+### इसके बाद आप क्या हटा सकते हैं
+
+| फ़ाइल / पैटर्न                                       | कारण                                                                                                              |
+| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `await import(\`./locales/${locale}/messages.mjs\`)` | डिक्शनरी उन घटकों द्वारा सीधे इम्पोर्ट की जाती हैं जो उनका उपयोग करते हैं। `i18n.load()` फ़ॉलबैक बन जाता है       |
+| `i18n.load()` / `i18n.loadAndActivate()`             | `i18n.activate(locale)` रखें; कैटलॉग की मैन्युअल लोडिंग हटा दें                                                   |
+| बिल्ड स्क्रिप्ट में `lingui compile`                 | केवल तभी जब आप JSON या `.po` को प्राथमिक स्रोत के रूप में उपयोग कर रहे हैं और संकलित मॉड्यूल इम्पोर्ट नहीं कर रहे |
+
+### बाइट्स की बचत के अलावा लाभ
+
+- **अनुपस्थित अनुवादों का स्वतः पता लगाना।** `npx intlayer test` किसी भी भाषा में कुंजी गायब होने पर CI को विफल कर देता है; जबकि `lingui extract` केवल सांख्यिकी रिपोर्ट करता है।
+- **`npx intlayer fill`** अपनी पसंद के AI प्रदाता (OpenAI, Anthropic, Mistral, Gemini...) के साथ छूटे हुए अनुवाद भरता है और उन्हें सीधे आपके कैटलॉग में वापस सहेजता है।
+- **विजुअल एडिटर और CMS** उन्हीं डिक्शनरी पर काम करते हैं, जिससे गैर-तकनीकी टीम के सदस्य ग्राफिकल इंटरफ़ेस के माध्यम से `.po` और JSON फ़ाइलों को संपादित कर सकते हैं।
+- **`.content.ts` में क्रमिक बदलाव।** किसी भी घटक को किसी भी समय `useLingui()` से स्थानीय कंटेंट फ़ाइल के साथ `useIntlayer("hero")` में बदला जा सकता है। दोनों प्रकार की डिक्शनरी सुचारू रूप से सह-अस्तित्व में रहती हैं।
+
+## शुरू करने से पहले जानने योग्य सीमाएँ
+
+- **`dynamic` मोड में प्रति पेज लागत।** जैसा कि ऊपर बताया गया है: छोटे ऐप पर लेज़ी-लोडेड Lingui सेटअप के मुकाबले प्रति पेज लगभग +20 KB की उम्मीद करें। सामग्री बढ़ने पर यह अंतर बढ़ता नहीं है (क्योंकि यह रिज़ॉल्वर से जुड़ा है, कैटलॉग से नहीं), लेकिन यह कम भी नहीं होता।
+- **स्रोत-भाषा लीकेज बना रहता है।** संदेश विवरण और कंपाइल किए गए मैक्रोज़ फ़ॉलबैक के रूप में मूल अंग्रेजी टेक्स्ट एम्बेड करते हैं। यदि इसे पूरी तरह हटाना है, तो `message` फ़ील्ड को साफ़ करना होगा या घटक को `.content.ts` में ले जाना होगा।
+- **`i18n.load()` केवल फ़ॉलबैक है।** यदि आप संकलित कैटलॉग इम्पोर्ट करना और `load()` कॉल करना जारी रखते हैं, तो पुराना बंडल और नया बंडल दोनों लोड होंगे। उन इम्पोर्ट्स को हटा दें।
+- **केवल Vite समर्थित।** `@intlayer/lingui` के लिए कोई Next.js प्लगइन उपलब्ध नहीं है। Lingui पर आधारित Next.js परियोजनाओं को सीधे [`next-intlayer`](https://intlayer.org/hi/doc/environment/nextjs) पर विचार करना चाहिए।
+- **`defaultComponent` लागू नहीं होता।** यदि आप प्रत्येक `<Trans>` को स्वचालित रूप से लपेटने के लिए इस पर निर्भर हैं, तो घटकों में स्पष्ट रूप से रैपर जोड़ें।
+
+## कब किसका उपयोग करें?
+
+- **Lingui पर बने रहें** यदि आप पहले से ही `scoped-dynamic` चला रहे हैं, आपका एकमात्र मानदंड प्रति पेज न्यूनतम बाइट्स है, और 42 ms का भाषा स्विच और 30 ms का हाइड्रेशन आपके ऐप के लिए पूरी तरह स्वीकार्य है।
+- **`@intlayer/lingui` का उपयोग करें** यदि आप Lingui का उपयोग कर रहे हैं और मैक्रोज़ को छुए बिना हल्के घटक, तेज़ हाइड्रेशन और भाषा स्विचिंग, सरल सेटअप में 0% पेज लीकेज, टाइप की गई आईडी, CI जांच और AI अनुवाद चाहते हैं। यह मौजूदा Lingui कोडबेस के लिए आदर्श अपग्रेड पथ है।
+- **नेटिव Intlayer (`react-intlayer`) पर स्विच करें** जब आप घटकों का व्यापक रीफैक्टरिंग शुरू करें। यह तुलना तालिका में **0% भाषा लीकेज**, 5 KB रनटाइम और बेस ऐप की तुलना में केवल +7.6 KB प्रति पेज जोड़ने वाला एकमात्र समाधान है।
+
+## संबंधित तुलनात्मक लेख
+
+- [Lingui बनाम Intlayer](https://intlayer.org/hi/blog/lingui-vs-intlayer) (समान बेंचमार्क पर दोनों लाइब्रेरीज़ की सीधी तुलना)
+- [next-intl बनाम @intlayer/next-intl](https://intlayer.org/hi/blog/next-intl-vs-intlayer-next-intl) (कम्पैट एडॉप्टर तुलना श्रृंखला)
+- [i18next बनाम @intlayer/i18next](https://intlayer.org/hi/blog/i18next-vs-intlayer-i18next) (कम्पैट एडॉप्टर तुलना श्रृंखला)
+- [vue-i18n बनाम @intlayer/vue-i18n](https://intlayer.org/hi/blog/vue-i18n-vs-intlayer-vue-i18n) (कम्पैट एडॉप्टर तुलना श्रृंखला)
+- [कम्पैट एडॉप्टर संदर्भ: Lingui](https://intlayer.org/hi/doc/compatibility/lingui)
+- [कंपाइलर बनाम घोषणात्मक i18n](https://intlayer.org/hi/blog/compiler-vs-declarative-i18n)
+
+## निष्कर्ष
+
+`@intlayer/lingui` Lingui कॉल साइट्स के बाइंडिंग लक्ष्य को बदल देता है: वैश्विक इंस्टेंस और उसके विशाल भाषा कैटलॉग के बजाय, यह उस विशेष घटक के लिए संकलित डिक्शनरी से जुड़ता है। उसी TanStack Start ऐप पर, यह बिना किसी मैक्रो संपादन के **घटकों को 7 गुना छोटा**, **हाइड्रेशन को 8-14 ms तेज़**, **भाषा स्विचिंग को 2 गुना तेज़** बनाता है और 42 ms के प्रदर्शन अंतराल को समाप्त करता है। यह घटकों में एम्बेडेड फ़ॉलबैक को नहीं बदलता (इसलिए स्रोत-भाषा लीकेज बनी रहती है) और रनटाइम पर ICU को पार्स करता है (जिससे डायनामिक मोड में शुद्ध Lingui की तुलना में प्रति पेज लगभग 20 KB अधिक लोड होता है)। अपने प्रोजेक्ट के प्रदर्शन बजट के अनुसार उपयुक्त विकल्प चुनें।
+
+सभी मूल डेटा, परीक्षण ऐप्स और बेंचमार्क स्क्रिप्ट्स [Benchmark Bloom रिपॉजिटरी](https://github.com/intlayer-org/benchmark-bloom) में उपलब्ध हैं। आप इसे स्वयं चलाकर देख सकते हैं।
+
+अधिक जानकारी के लिए ['Intlayer क्यों चुनें?' दस्तावेज़](https://intlayer.org/hi/doc/why) देखें।