i18n बंडल आकार और प्रदर्शन का अनुकूलन

JSON फ़ाइलों पर निर्भर पारंपरिक i18n समाधानों के साथ सबसे आम चुनौतियों में से एक सामग्री के आकार का प्रबंधन है। यदि डेवलपर्स सामग्री को मैन्युअल रूप से namespaces में विभाजित नहीं करते हैं, तो उपयोगकर्ता अक्सर केवल एक पृष्ठ देखने के लिए हर पृष्ठ और संभावित रूप से हर भाषा के अनुवाद डाउनलोड कर लेते हैं।

उदाहरण के लिए, 10 पृष्ठों वाले एक एप्लिकेशन के 10 भाषाओं में अनुवादित होने पर उपयोगकर्ता 100 पृष्ठों की सामग्री डाउनलोड कर सकता है, जबकि उसे केवल एक (वर्तमान पृष्ठ वर्तमान भाषा में) की आवश्यकता होती है। इससे बैंडविड्थ की बर्बादी होती है और लोड समय धीमा हो जाता है।

इसे पता लगाने के लिए, आप rollup-plugin-visualizer (vite), @next/bundle-analyzer (next.js), या webpack-bundle-analyzer (React CRA / Angular / आदि) जैसे बंडल विश्लेषक का उपयोग कर सकते हैं।

Intlayer इस समस्या को build-time optimization के माध्यम से हल करता है। यह आपके कोड का विश्लेषण करता है ताकि पता लगाया जा सके कि कौन से डिक्शनरी वास्तव में प्रत्येक कंपोनेंट में उपयोग किए जाते हैं और केवल आवश्यक सामग्री को आपके बंडल में पुनः सम्मिलित करता है।

विषय सूची

यह कैसे काम करता है

Intlayer एक प्रति-कंपोनेंट दृष्टिकोण का उपयोग करता है। वैश्विक JSON फ़ाइलों के विपरीत, आपकी सामग्री आपके कंपोनेंट्स के साथ या उनके भीतर परिभाषित होती है। बिल्ड प्रक्रिया के दौरान, Intlayer:

1. आपके कोड का विश्लेषण करता है ताकि useIntlayer कॉल्स को खोज सके।
2. संबंधित डिक्शनरी सामग्री का निर्माण करता है।
3. आपकी कॉन्फ़िगरेशन के आधार पर useIntlayer कॉल को अनुकूलित कोड से प्रतिस्थापित करता है।

यह सुनिश्चित करता है कि:

• यदि कोई कंपोनेंट आयातित नहीं है, तो उसकी सामग्री बंडल में शामिल नहीं की जाती (Dead Code Elimination)।
• यदि कोई कंपोनेंट lazy-loaded है, तो उसकी सामग्री भी lazy-loaded होती है।

प्लेटफ़ॉर्म द्वारा सेटअप

Next.js

Next.js को ट्रांसफ़ॉर्मेशन को संभालने के लिए @intlayer/swc प्लगइन की आवश्यकता होती है, क्योंकि Next.js बिल्ड के लिए SWC का उपयोग करता है।

यह प्लगइन डिफ़ॉल्ट रूप से इंस्टॉल होता है क्योंकि SWC प्लगइन्स अभी भी Next.js के लिए प्रायोगिक हैं। भविष्य में इसमें बदलाव हो सकता है।

Vite

Vite @intlayer/babel प्लगइन का उपयोग करता है जो vite-intlayer की निर्भरता के रूप में शामिल है। अनुकूलन डिफ़ॉल्ट रूप से सक्षम है।

Webpack

Webpack पर Intlayer के साथ बंडल अनुकूलन सक्षम करने के लिए, आपको उपयुक्त Babel (@intlayer/babel) या SWC (@intlayer/swc) प्लगइन को इंस्टॉल और कॉन्फ़िगर करना होगा।

Expo / Lynx

इस प्लेटफ़ॉर्म के लिए बंडल अनुकूलन अभी उपलब्ध नहीं है। समर्थन भविष्य के रिलीज़ में जोड़ा जाएगा।

कॉन्फ़िगरेशन

आप अपने intlayer.config.ts में build प्रॉपर्टी के माध्यम से नियंत्रित कर सकते हैं कि Intlayer आपके बंडल को कैसे अनुकूलित करता है।

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH],    defaultLocale: Locales.ENGLISH,  },  build: {    optimize: true,    importMode: "static", // या 'dynamic'    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],  },};export default config;

अधिकांश मामलों में optimize के लिए डिफ़ॉल्ट विकल्प रखना अनुशंसित है।

अधिक विवरण के लिए डॉक्यूमेंटेशन कॉन्फ़िगरेशन देखें: Configuration

बिल्ड विकल्प

build कॉन्फ़िगरेशन ऑब्जेक्ट के तहत निम्नलिखित विकल्प उपलब्ध हैं:

इम्पोर्ट मोड्स

importMode सेटिंग यह निर्धारित करती है कि डिक्शनरी सामग्री आपके कंपोनेंट में कैसे इंजेक्ट की जाती है।

1. स्टैटिक मोड (default)

स्थैतिक मोड में, Intlayer useIntlayer को useDictionary से बदल देता है और डिक्शनरी को सीधे JavaScript बंडल में इंजेक्ट करता है।

• फायदे: त्वरित रेंडरिंग (सिंक्रोनस), हाइड्रेशन के दौरान कोई अतिरिक्त नेटवर्क अनुरोध नहीं।
• नुकसान: बंडल में उस विशिष्ट कंपोनेंट के लिए सभी उपलब्ध भाषाओं के अनुवाद शामिल होते हैं।
• सबसे अच्छा: सिंगल पेज एप्लिकेशन (SPA) के लिए।

परिवर्तित कोड उदाहरण:

// आपका कोडconst content = useIntlayer("my-key");// ऑप्टिमाइज़्ड कोड (स्थैतिक)const content = useDictionary({  key: "my-key",  content: {    nodeType: "translation",    translation: {      en: "My title",      fr: "Mon titre",    },  },});

2. डायनेमिक मोड

डायनामिक मोड में, Intlayer useIntlayer को useDictionaryAsync से बदल देता है। यह import() (Suspense-जैसे तंत्र) का उपयोग करता है ताकि वर्तमान लोकल के लिए JSON को लेज़ी-लोड किया जा सके।

• फायदे: लोकल-स्तर पर ट्री शेकिंग। अंग्रेज़ी संस्करण देखने वाला उपयोगकर्ता केवल अंग्रेज़ी डिक्शनरी डाउनलोड करेगा। फ्रेंच डिक्शनरी कभी लोड नहीं होती।
• नुकसान: हाइड्रेशन के दौरान प्रत्येक कंपोनेंट के लिए एक नेटवर्क अनुरोध (एसेट फेच) ट्रिगर होता है।
• सबसे अच्छा: बड़े टेक्स्ट ब्लॉक्स, लेख, या कई भाषाओं का समर्थन करने वाले एप्लिकेशन जहां बंडल का आकार महत्वपूर्ण हो।

परिवर्तित कोड उदाहरण:

// आपका कोडconst content = useIntlayer("my-key");// अनुकूलित कोड (डायनामिक)const content = useDictionaryAsync({  en: () =>    import(".intlayer/dynamic_dictionary/my-key/en.json").then(      (mod) => mod.default    ),  fr: () =>    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(      (mod) => mod.default    ),});

जब importMode: 'dynamic' का उपयोग किया जाता है, यदि आपके पास एक पेज पर 100 कंपोनेंट्स हैं जो useIntlayer का उपयोग करते हैं, तो ब्राउज़र 100 अलग-अलग फेच करने का प्रयास करेगा। इस "वाटरफॉल" अनुरोधों से बचने के लिए, सामग्री को कम .content फाइलों में समूहित करें (जैसे, पेज सेक्शन के लिए एक डिक्शनरी) बजाय कि प्रत्येक एटम कंपोनेंट के लिए एक।

वर्तमान में, importMode: 'dynamic' Vue और Svelte के लिए पूरी तरह से समर्थित नहीं है। इन फ्रेमवर्क्स के लिए आगे के अपडेट तक importMode: 'static' का उपयोग करने की सलाह दी जाती है।

3. लाइव मोड

डायनामिक मोड के समान व्यवहार करता है लेकिन पहले Intlayer लाइव सिंक API से शब्दकोश प्राप्त करने का प्रयास करता है। यदि API कॉल विफल हो जाती है या सामग्री लाइव अपडेट के लिए चिह्नित नहीं है, तो यह डायनामिक इम्पोर्ट पर वापस चला जाता है।

अधिक जानकारी के लिए CMS दस्तावेज़ देखें: CMS

सारांश: स्टैटिक बनाम डायनामिक