i18n बंडल साइज और परफॉरमेंस को ऑप्टिमाइज़ करना

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

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

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

विषय सूची

अपने बंडल को स्कैन करें

अपने बंडल का विश्लेषण करना "भारी" JSON फाइलों और कोड-स्प्लिटिंग के अवसरों की पहचान करने का पहला कदम है। ये टूल आपके एप्लिकेशन के संकलित कोड का एक विज़ुअल ट्रीमैप (treemap) तैयार करते हैं, जिससे आप देख सकते हैं कि कौन सी लाइब्रेरी सबसे अधिक जगह घेर रही हैं।

npm install -D rollup-plugin-visualizer

import { defineConfig } from "vite";import { visualizer } from "rollup-plugin-visualizer";export default defineConfig({ plugins: [   visualizer({     open: true, // रिपोर्ट को अपने ब्राउज़र में स्वचालित रूप से खोलें     filename: "stats.html",     gzipSize: true,     brotliSize: true,   }), ],});

npx next experimental-analyze

npm install -D @next/bundle-analyzer

const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: process.env.ANALYZE === "true",});module.exports = withBundleAnalyzer({ // आपका Next.js कॉन्फ़िगरेशन});

ANALYZE=true npm run build

npm install -D webpack-bundle-analyzer

import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";export default { plugins: [   new BundleAnalyzerPlugin({     analyzerMode: "static",     reportFilename: "bundle-analyzer.html",     openAnalyzer: false,   }), ],};

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

Intlayer प्रति-कंपोनेंट दृष्टिकोण (per-component approach) का उपयोग करता है। ग्लोबल JSON फाइलों के विपरीत, आपका कंटेंट आपके कंपोनेंट्स के साथ या उनके भीतर परिभाषित किया जाता है। बिल्ड प्रक्रिया के दौरान, Intlayer:

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

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

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

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

npm install -D @intlayer/swc

npm install -D @intlayer/babel

const { getOptimizePluginOptions, intlayerOptimizeBabelPlugin,} = require("@intlayer/babel");module.exports = { plugins: [[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()]],};

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

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

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH],    defaultLocale: Locales.ENGLISH,  },  dictionary: {    importMode: "dynamic",  },  build: {    /**     * बंडल साइज कम करने के लिए डिक्शनरी को मिनिफ़ाई करें।     */     minify: true;    /**     * डिक्शनरी में अप्रयुक्त कुंजियों (unused keys) को हटा दें (purge)     */     purge: true;    /**     * इंगित करता है कि क्या बिल्ड को टाइपस्क्रिप्ट प्रकारों (TypeScript types) की जांच करनी चाहिए     */    checkTypes: false;  },};export default config;

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

अधिक जानकारी के लिए कॉन्फ़िगरेशन डॉक्स देखें: Configuration

बिल्ड विकल्प

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

मिनिफ़िकेशन (Minification)

डिक्शनरी को मिनिफ़ाई करने से अनावश्यक व्हाइटस्पेस, कमेंट हट जाते हैं और JSON कंटेंट का आकार कम हो जाता है। यह विशेष रूप से बड़ी डिक्शनरी के लिए उपयोगी है।

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    minify: true,  },};export default config;

नोट: यदि optimize अक्षम है या यदि विजुअल एडिटर (Visual Editor) सक्षम है, तो मिनिफ़िकेशन को इग्नोर कर दिया जाता है (क्योंकि एडिटर को एडिटिंग की अनुमति देने के लिए पूर्ण कंटेंट की आवश्यकता होती है)।

पर्जिंग (Purging)

पर्जिंग यह सुनिश्चित करता है कि केवल आपके कोड में वास्तव में उपयोग की जाने वाली कुंजियाँ ही अंतिम डिक्शनरी बंडल में शामिल की जाएं। यदि आपके पास कई कुंजियों वाली बड़ी डिक्शनरी हैं जो आपके एप्लिकेशन के हर हिस्से में उपयोग नहीं की जाती हैं, तो यह आपके बंडल के आकार को काफी कम कर सकता है।

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    purge: true,  },};export default config;

नोट: यदि optimize अक्षम है तो पर्जिंग को इग्नोर कर दिया जाता है।

इम्पोर्ट मोड (Import Mode)

बड़े एप्लिकेशन के लिए, जिसमें कई पेज और भाषाएँ शामिल हैं, आपकी JSON फाइलें आपके बंडल साइज का एक महत्वपूर्ण हिस्सा हो सकती हैं। Intlayer आपको यह कंट्रोल करने की अनुमति देता है कि डिक्शनरी कैसे लोड की जाती हैं।

इम्पोर्ट मोड को आपकी intlayer.config.ts फ़ाइल में विश्व स्तर (globally) पर डिफॉल्ट रूप से परिभाषित किया जा सकता है।

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    minify: true,  },};export default config;

साथ ही आपकी .content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}} फ़ाइलों में प्रत्येक डिक्शनरी के लिए भी।

import { type Dictionary, t } from "intlayer";const appContent: Dictionary = {  key: "app",  importMode: "dynamic", // डिफॉल्ट इम्पोर्ट मोड को ओवरराइड करें  content: {    // ...  },};export default appContent;

importMode सेटिंग यह तय करती है कि डिक्शनरी कंटेंट आपके कंपोनेंट में कैसे इंजेक्ट किया जाता है। आप इसे intlayer.config.ts फ़ाइल में dictionary ऑब्जेक्ट के तहत विश्व स्तर पर परिभाषित कर सकते हैं, या आप इसे इसकी .content.ts फ़ाइल में एक विशिष्ट डिक्शनरी के लिए ओवरराइट कर सकते हैं।

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

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

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

रूपांतरित कोड उदाहरण (Transformed Code Example):

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

2. डायनामिक मोड (Dynamic Mode)

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

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

रूपांतरित कोड उदाहरण:

// आपका कोडconst content = useIntlayer("my-key");// ऑप्टिमाइज़्ड कोड (Dynamic)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' का उपयोग करते समय, यदि आपके पास एक ही पेज पर useIntlayer का उपयोग करने वाले 100 कंपोनेंट हैं, तो ब्राउज़र 100 अलग-अलग फेच का प्रयास करेगा। अनुरोधों के इस "वाटरफॉल" से बचने के लिए, कंटेंट को प्रत्येक छोटे कंपोनेंट के बजाय कम .content फ़ाइलों (जैसे, प्रत्येक पेज सेक्शन के लिए एक डिक्शनरी) में समूहित करें।

3. फेच मोड (Fetch Mode)

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

अधिक विवरण के लिए CMS डॉक्स देखें: CMS

फेच मोड में, पर्ज और मिनिफ़िकेशन का उपयोग नहीं किया जा सकता है।

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