Author:
    Creation:2026-09-13Last update:2026-09-13

    Lingui बनाम @intlayer/lingui | समान मैक्रोज़, अलग रनटाइम

    @intlayer/lingui, @lingui/core और @lingui/react के लिए एक कम्पैट एडॉप्टर (संगतता एडॉप्टर) है। आपके t`...` , <Trans>, useLingui() और i18n._() कॉल्स बिल्कुल वैसे ही बने रहते हैं; मैक्रोज़ पहले की तरह कंपाइल होते रहते हैं; जो बदलता है वह यह है कि रनटाइम पर संदेश कहाँ से आते हैं। प्रति भाषा एक संकलित कैटलॉग के बजाय, प्रत्येक कॉल साइट इसके लिए विशेष रूप से संकलित Intlayer डिक्शनरी से बंधी होती है।

    यह लेख उसी TanStack Start एप्लिकेशन पर इस बदलाव को मापता है, जिसे एक बार शुद्ध Lingui के साथ और एक बार एडॉप्टर के साथ बनाया गया है। ये आंकड़े Benchmark Bloom से लिए गए हैं। दोनों लाइब्रेरीज़ की तुलना देखने के लिए Lingui बनाम Intlayer पढ़ें। यह लेख इस बात पर केंद्रित है कि एडॉप्टर क्या बदलता है, और कहाँ यह अतिरिक्त लाभ नहीं देता।

    संक्षेप में (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 फ़ॉलबैक डिक्शनरी पर वापस आ जाती हैं।
    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>
      );
    };
    
    कंपाइलर क्या आउटपुट करता है (सरलीकृत)
    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 सुइट प्रत्येक सेटअप के साथ समान एप्लिकेशन बनाता है: 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 KB111.0 KB0.0%0.0%0.7 KB8.1 ms21.6 ms
    Linguistatic11.2 KB152.2 KB50.0%90.0%58.0 KB3.9 ms19.9 ms
    Linguidynamic11.2 KB115.2 KB9.3%0.0%85.5 KB5.9 ms28.0 ms
    Linguiscoped-static11.2 KB120.8 KB4.0%0.0%147.9 KB7.1 ms33.9 ms
    Linguiscoped-dynamic11.2 KB120.2 KB8.6%0.0%83.7 KB42.1 ms32.9 ms
    @intlayer/linguistatic10.3 KB140.5 KB50.0%0.0%14.9 KB3.3 ms11.3 ms
    @intlayer/linguidynamic10.3 KB137.0 KB9.9%0.0%12.8 KB2.9 ms19.7 ms
    intlayer (नेटिव)static5.0 KB125.8 KB50.0%0.0%8.1 KB3.2 ms11.5 ms
    intlayer (नेटिव)dynamic5.0 KB118.6 KB0.0%0.0%6.3 KB3.6 ms14.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() नोड्स का उपयोग करती हैं।

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

    1. इंस्टॉलेशन

      bash
      npx 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 के प्रकारों का उपयोग करता है।

    2. Intlayer को अपने कैटलॉग से जोड़ें

      JSON कैटलॉग के लिए (lingui.config.ts में format: "minimal"):

      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 प्लगइन दस्तावेज़ देखें।

      splitKeys: "key-prefix" घटक आकार को अत्यधिक कम करने का प्रमुख कारक है। कैटलॉग फ़ाइल अपना फ्लैट आकार बनाए रखती है; विभाजन केवल उत्पन्न डिक्शनरी में मौजूद होता है, और रिवर्स सिंक स्वचालित रूप से कुंजियों को फिर से जोड़ देता है।

    3. प्लगइन जोड़ें

      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 को एडॉप्टर पर एलियास करता है। बिल्ड करें, और उपरोक्त लाभ तुरंत लागू हो जाएंगे।

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

    फ़ाइल / पैटर्नकारण
    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 पर विचार करना चाहिए।
    • 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 प्रति पेज जोड़ने वाला एकमात्र समाधान है।

    संबंधित तुलनात्मक लेख

    निष्कर्ष

    @intlayer/lingui Lingui कॉल साइट्स के बाइंडिंग लक्ष्य को बदल देता है: वैश्विक इंस्टेंस और उसके विशाल भाषा कैटलॉग के बजाय, यह उस विशेष घटक के लिए संकलित डिक्शनरी से जुड़ता है। उसी TanStack Start ऐप पर, यह बिना किसी मैक्रो संपादन के घटकों को 7 गुना छोटा, हाइड्रेशन को 8-14 ms तेज़, भाषा स्विचिंग को 2 गुना तेज़ बनाता है और 42 ms के प्रदर्शन अंतराल को समाप्त करता है। यह घटकों में एम्बेडेड फ़ॉलबैक को नहीं बदलता (इसलिए स्रोत-भाषा लीकेज बनी रहती है) और रनटाइम पर ICU को पार्स करता है (जिससे डायनामिक मोड में शुद्ध Lingui की तुलना में प्रति पेज लगभग 20 KB अधिक लोड होता है)। अपने प्रोजेक्ट के प्रदर्शन बजट के अनुसार उपयुक्त विकल्प चुनें।

    सभी मूल डेटा, परीक्षण ऐप्स और बेंचमार्क स्क्रिप्ट्स Benchmark Bloom रिपॉजिटरी में उपलब्ध हैं। आप इसे स्वयं चलाकर देख सकते हैं।

    अधिक जानकारी के लिए 'Intlayer क्यों चुनें?' दस्तावेज़ देखें।

    टिप्पणियाँ

    अभी तक कोई टिप्पणी नहीं। अपने विचार साझा करने वाले पहले व्यक्ति बनें।

    संबंधित पोस्ट

    नवीनतम पोस्ट