@intlayer/docs 7.3.3 → 7.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  ---
2
2
  createdAt: 2025-11-24
3
3
  updatedAt: 2025-11-24
4
- title: कंपाइलर बनाम घोषणात्मक i18n
5
- description: '"मैजिक" कंपाइलर-आधारित अंतरराष्ट्रीयकरण और स्पष्ट घोषणात्मक सामग्री प्रबंधन के बीच वास्तुशिल्पीय ट्रेड-ऑफ का अन्वेषण।'
4
+ title: "कंपाइलर बनाम घोषणात्मक i18n"
5
+ description: '"मैजिक" कंपाइलर-आधारित अंतरराष्ट्रीयकरण और स्पष्ट घोषणात्मक सामग्री प्रबंधन के बीच वास्तुशिल्पीय ट्रेड-ऑफ़ का अन्वेषण।'
6
6
  keywords:
7
7
  - Intlayer
8
8
  - अंतरराष्ट्रीयकरण
@@ -20,118 +20,201 @@ slugs:
20
20
 
21
21
  # कंपाइलर-आधारित i18n के पक्ष और विपक्ष
22
22
 
23
- यदि आप एक दशक से अधिक समय से वेब एप्लिकेशन बना रहे हैं, तो आप जानते हैं कि अंतरराष्ट्रीयकरण (i18n) हमेशा एक संघर्ष का बिंदु रहा है। यह अक्सर वह कार्य होता है जिसे कोई करना नहीं चाहता — स्ट्रिंग्स निकालना, JSON फ़ाइलों का प्रबंधन करना, और बहुवचन नियमों की चिंता करना।
23
+ यदि आप एक दशक से अधिक समय से वेब एप्लिकेशन बना रहे हैं, तो आप जानते हैं कि अंतरराष्ट्रीयकरण (i18n) हमेशा एक संघर्ष का बिंदु रहा है। यह अक्सर वह कार्य होता है जिसे कोई करना नहीं चाहता — स्ट्रिंग्स निकालना, JSON फाइलों का प्रबंधन करना, और बहुवचन नियमों की चिंता करना।
24
24
 
25
- हाल ही में, "कंपाइलर-आधारित" i18n टूल्स की एक नई लहर उभरी है, जो इस दर्द को गायब करने का वादा करती है। प्रस्तुति आकर्षक है: **बस अपने कंपोनेंट्स में टेक्स्ट लिखें, और बाकी काम बिल्ड टूल पर छोड़ दें।** न कोई कीज़, न कोई इम्पोर्ट्स, बस जादू।
25
+ हाल ही में, **"कंपाइलर-आधारित" i18n टूल्स** की एक नई लहर उभरी है, जो इस दर्द को गायब करने का वादा करती है। प्रस्ताव आकर्षक है: **बस अपने कंपोनेंट्स में टेक्स्ट लिखें, और बाकी काम बिल्ड टूल पर छोड़ दें।** न कोई कीज़, न कोई इम्पोर्ट्स, बस जादू।
26
26
 
27
27
  लेकिन सॉफ़्टवेयर इंजीनियरिंग में सभी अमूर्तताओं की तरह, जादू की भी एक कीमत होती है।
28
28
 
29
- इस ब्लॉग पोस्ट में, हम घोषणात्मक लाइब्रेरीज से कंपाइलर-आधारित दृष्टिकोण की ओर हुए बदलाव, उनके द्वारा लाए गए छिपे हुए वास्तुशिल्पीय ऋण, और क्यों "निरस" तरीका अभी भी पेशेवर एप्लिकेशन के लिए सबसे अच्छा तरीका हो सकता है, का अन्वेषण करेंगे।
29
+ इस ब्लॉग पोस्ट में, हम घोषणात्मक लाइब्रेरीज़ से कंपाइलर-आधारित दृष्टिकोणों की ओर बदलाव, उनके द्वारा लाए गए छिपे हुए वास्तुशिल्पीय ऋणों, और क्यों "निरस" तरीका अभी भी पेशेवर एप्लिकेशन के लिए सबसे अच्छा तरीका हो सकता है, का अन्वेषण करेंगे।
30
30
 
31
- ## अनुवाद का संक्षिप्त इतिहास
31
+ ## विषय सूची
32
32
 
33
- यह समझने के लिए कि हम कहां हैं, हमें यह देखना होगा कि हमने कहां से शुरुआत की थी।
33
+ <TOC/>
34
34
 
35
- 2011–2012 के आसपास, JavaScript का परिदृश्य काफी अलग था। जैसे हम आज जानते हैं, वे बंडलर्स (Webpack, Vite) मौजूद नहीं थे या वे अपने प्रारंभिक चरण में थे। हम ब्राउज़र में स्क्रिप्ट्स को जोड़ रहे थे। इसी युग में, **i18next** जैसी लाइब्रेरीज का जन्म हुआ।
35
+ ## अंतरराष्ट्रीयकरण का संक्षिप्त इतिहास
36
+
37
+ यह समझने के लिए कि हम कहाँ हैं, हमें यह देखना होगा कि हमने कहाँ से शुरुआत की थी।
38
+
39
+ 2011–2012 के आसपास, JavaScript का परिदृश्य काफी अलग था। जैसे हम आज जानते हैं, वे बंडलर्स (Webpack, Vite) मौजूद नहीं थे या वे अपने शुरुआती दौर में थे। हम ब्राउज़र में स्क्रिप्ट्स को जोड़ रहे थे। इसी युग में, **i18next** जैसी लाइब्रेरीज़ का जन्म हुआ।
36
40
 
37
41
  उन्होंने उस समय संभव唯一 तरीके से समस्या का समाधान किया: **रनटाइम डिक्शनरीज़**। आप एक विशाल JSON ऑब्जेक्ट मेमोरी में लोड करते थे, और एक फ़ंक्शन तुरंत कीज़ को खोजता था। यह विश्वसनीय, स्पष्ट था, और हर जगह काम करता था।
38
42
 
39
- आज की ओर तेजी से बढ़ें। हमारे पास शक्तिशाली कंपाइलर हैं (SWC, Rust-आधारित बंडलर्स) जो Abstract Syntax Trees (AST) को मिलीसेकंड में पार्स कर सकते हैं। इस शक्ति ने एक नया विचार जन्म दिया: _हम मैन्युअली कीज़ क्यों प्रबंधित कर रहे हैं? क्यों कंपाइलर सीधे "Hello World" टेक्स्ट को देख कर हमारे लिए बदल नहीं सकता?_
43
+ आज के समय में तेजी से आगे बढ़ें। हमारे पास शक्तिशाली कंपाइलर हैं (SWC, Rust-आधारित बंडलर्स) जो Abstract Syntax Trees (AST) को मिलीसेकंड में पार्स कर सकते हैं। इस शक्ति ने एक नया विचार जन्म दिया: _हम मैन्युअली कीज़ क्यों प्रबंधित कर रहे हैं? क्यों कंपाइलर सीधे "Hello World" टेक्स्ट को देख कर उसे हमारे लिए स्वैप नहीं कर सकता?_
40
44
 
41
45
  इस प्रकार, कंपाइलर-आधारित i18n का जन्म हुआ।
42
46
 
47
+ > **कंपाइलर-आधारित i18n का उदाहरण:**
48
+ >
49
+ > - Paraglide (Tree-shaken मॉड्यूल जो प्रत्येक संदेश को एक छोटे ESM फ़ंक्शन में कंपाइल करते हैं ताकि बंडलर्स स्वचालित रूप से अप्रयुक्त लोकल और कीज़ को हटा सकें। आप संदेशों को स्ट्रिंग-की लुकअप करने के बजाय फ़ंक्शंस के रूप में इम्पोर्ट करते हैं।)
50
+ > - LinguiJS (मैक्रो-से-फ़ंक्शन कंपाइलर जो `<Trans>` जैसे मैसेज मैक्रोज़ को बिल्ड समय पर साधारण JS फ़ंक्शन कॉल में पुनः लिखता है। आपको ICU/MessageFormat सिंटैक्स मिलता है जिसमें बहुत छोटा रनटाइम फुटप्रिंट होता है।)
51
+ > - Lingo.dev (लोकलाइज़ेशन पाइपलाइन को स्वचालित करने पर केंद्रित है, जो आपके React एप्लिकेशन के बिल्ड के दौरान सीधे अनुवादित सामग्री इंजेक्ट करता है। यह AI का उपयोग करके स्वचालित रूप से अनुवाद उत्पन्न कर सकता है और सीधे CI/CD में एकीकृत हो सकता है।)
52
+ > - Wuchale (Svelte-प्रथम प्रीप्रोसेसर जो .svelte फ़ाइलों में इनलाइन टेक्स्ट निकालता है और इसे ज़ीरो-रैपर ट्रांसलेशन फ़ंक्शंस में कंपाइल करता है। यह स्ट्रिंग कीज़ से बचता है, और कंटेंट एक्सट्रैक्शन लॉजिक को मुख्य एप्लिकेशन रनटाइम से पूरी तरह अलग करता है।)
53
+ > - Intlayer (कंपाइलर / Extract CLI जो आपके कंपोनेंट्स को पार्स करता है, टाइप्ड डिक्शनरीज़ जनरेट करता है, और वैकल्पिक रूप से कोड को पुनः लिख सकता है ताकि स्पष्ट Intlayer कंटेंट का उपयोग किया जा सके। लक्ष्य है कंपाइलर का उपयोग गति के लिए करना जबकि एक डिक्लेरेटिव, फ्रेमवर्क-एग्नॉस्टिक कोर बनाए रखना।)
54
+ >
55
+ > **डिक्लेरेटिव i18n का उदाहरण:**
56
+ >
57
+ > - i18next / react-i18next / next-i18next (परिपक्व उद्योग मानक जो रनटाइम JSON डिक्शनरीज़ और एक व्यापक प्लगइन इकोसिस्टम का उपयोग करता है)
58
+ > - react-intl (FormatJS लाइब्रेरी का हिस्सा, जो मानक ICU संदेश सिंटैक्स और सख्त डेटा फॉर्मेटिंग पर केंद्रित है)
59
+ > - next-intl (विशेष रूप से Next.js के लिए अनुकूलित, App Router और React Server Components के साथ एकीकरण के साथ)
60
+ > - vue-i18n / @nuxt/i18n (मानक Vue इकोसिस्टम समाधान जो कंपोनेंट-स्तर के अनुवाद ब्लॉक्स और कड़ी प्रतिक्रियाशीलता एकीकरण प्रदान करता है)
61
+ > - svelte-i18n (Svelte स्टोर्स के चारों ओर एक हल्का रैपर जो प्रतिक्रियाशील, रनटाइम अनुवाद के लिए है)
62
+ > - angular-translate (विरासत गतिशील अनुवाद लाइब्रेरी जो रनटाइम की लुकअप पर निर्भर करती है बजाय बिल्ड-टाइम मर्जिंग के)
63
+ > - angular-i18n (Angular की मूल, अग्रिम-समय विधि जो XLIFF फ़ाइलों को सीधे टेम्पलेट्स में बिल्ड के दौरान मर्ज करती है)
64
+ > - Tolgee (घोषणात्मक कोड को एक इन-कॉन्टेक्स्ट SDK के साथ संयोजित करता है जो UI में सीधे "क्लिक-टू-ट्रांसलेट" संपादन की सुविधा देता है)
65
+ > - Intlayer (प्रति-कंपोनेंट दृष्टिकोण, कंटेंट घोषणा फ़ाइलों का उपयोग करता है जो नेटिव ट्री-शेकिंग और TypeScript सत्यापन सक्षम करता है)
66
+
67
+ ## Intlayer कंपाइलर
68
+
69
+ हालांकि **Intlayer** एक ऐसा समाधान है जो मूल रूप से आपके कंटेंट के लिए एक **घोषणात्मक दृष्टिकोण** को प्रोत्साहित करता है, इसमें विकास को तेज करने या त्वरित प्रोटोटाइपिंग की सुविधा देने के लिए एक कंपाइलर शामिल है।
70
+
71
+ Intlayer कंपाइलर आपके React, Vue, या Svelte कंपोनेंट्स के AST (Abstract Syntax Tree) के साथ-साथ अन्य JavaScript/TypeScript फ़ाइलों को पार करता है। इसका कार्य हार्डकोडेड स्ट्रिंग्स का पता लगाना और उन्हें समर्पित `.content` घोषणाओं में निकालना है।
72
+
73
+ > अधिक विवरण के लिए, दस्तावेज़ देखें: [Intlayer Compiler Docs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/compiler.md)
74
+
43
75
  ## कंपाइलर का आकर्षण (The "Magic" Approach)
44
76
 
45
- इस नए दृष्टिकोण के ट्रेंड में आने का एक कारण है। एक डेवलपर के लिए, यह अनुभव अविश्वसनीय लगता है।
77
+ इस नए दृष्टिकोण के ट्रेंड में आने का एक कारण है। एक डेवलपर के लिए, अनुभव अविश्वसनीय लगता है।
46
78
 
47
79
  ### 1. गति और "फ्लो"
48
80
 
49
- जब आप काम में डूबे होते हैं, तो एक वेरिएबल नाम (`home_hero_title_v2`) सोचने के लिए रुकना आपके फ्लो को तोड़ देता है। कंपाइलर दृष्टिकोण के साथ, आप `<p>Welcome back</p>` टाइप करते हैं और आगे बढ़ते रहते हैं। कोई रुकावट नहीं होती।
81
+ जब आप पूरी तरह से काम में लगे होते हैं, तो एक सेमांटिक वेरिएबल नाम (`home_hero_title_v2`) सोचने के लिए रुकना आपके फ्लो को तोड़ देता है। कंपाइलर दृष्टिकोण के साथ, आप `<p>Welcome back</p>` टाइप करते हैं और आगे बढ़ते रहते हैं। कोई रुकावट नहीं होती।
50
82
 
51
83
  ### 2. विरासत बचाव मिशन
52
84
 
53
- कल्पना करें कि आपको 5,000 कंपोनेंट्स वाला एक विशाल कोडबेस विरासत में मिला है जिसमें कोई अनुवाद नहीं है। इसे मैन्युअल की-आधारित सिस्टम से अनुकूलित करना महीनों लंबा दुःस्वप्न होगा। एक कंपाइलर-आधारित टूल एक बचाव रणनीति के रूप में काम करता है, जो बिना किसी फाइल को मैन्युअली छुए तुरंत हजारों स्ट्रिंग्स निकाल देता है।
85
+ कल्पना करें कि आपको 5,000 कंपोनेंट्स वाला एक विशाल कोडबेस विरासत में मिला है जिसमें कोई अनुवाद नहीं है। इसे मैनुअल की-आधारित सिस्टम से अनुकूलित करना महीनों लंबा दुःस्वप्न हो सकता है। एक कंपाइलर-आधारित टूल एक बचाव रणनीति के रूप में काम करता है, जो बिना आपको एक भी फाइल मैन्युअली छुए हजारों स्ट्रिंग्स को तुरंत निकाल देता है।
54
86
 
55
87
  ### 3. एआई युग
56
88
 
57
- यह एक आधुनिक लाभ है जिसे हमें नजरअंदाज नहीं करना चाहिए। AI कोडिंग असिस्टेंट्स (जैसे Copilot या ChatGPT) स्वाभाविक रूप से मानक JSX/HTML उत्पन्न करते हैं। वे आपके विशिष्ट अनुवाद कुंजी स्कीमा को नहीं जानते।
89
+ यह एक आधुनिक लाभ है जिसे हमें नजरअंदाज नहीं करना चाहिए। एआई कोडिंग असिस्टेंट्स (जैसे Copilot या ChatGPT) स्वाभाविक रूप से मानक JSX/HTML उत्पन्न करते हैं। वे आपके विशिष्ट अनुवाद कुंजी स्कीमा को नहीं जानते।
58
90
 
59
- - **Declarative:** आपको AI के आउटपुट को फिर से लिखना होता है ताकि टेक्स्ट को कुंजियों से बदला जा सके।
60
- - **Compiler:** आप AI का कोड कॉपी-पेस्ट करते हैं, और यह बस काम करता है।
91
+ - **घोषणात्मक:** आपको एआई के आउटपुट को फिर से लिखना होता है ताकि टेक्स्ट को कुंजियों से बदला जा सके।
92
+ - **कंपाइलर:** आप एआई का कोड कॉपी-पेस्ट करते हैं, और यह बस काम करता है।
61
93
 
62
94
  ## वास्तविकता जांच: क्यों "मैजिक" खतरनाक है
63
95
 
64
- जबकि "मैजिक" आकर्षक है, लेकिन अमूर्तता लीक होती है। एक बिल्ड टूल पर मानव इरादे को समझने के लिए निर्भर रहना वास्तुशिल्पीय कमजोरी लाता है।
96
+ जबकि "मैजिक" आकर्षक है, लेकिन अमूर्तन में रिसाव होता है। एक बिल्ड टूल पर मानव इरादे को समझने के लिए निर्भर रहना वास्तुकला की नाजुकता को जन्म देता है।
97
+
98
+ ### हीयूरिस्टिक नाजुकता (अनुमान लगाने का खेल)
99
+
100
+ कंपाइलर को यह अनुमान लगाना पड़ता है कि क्या कंटेंट है और क्या कोड है। इससे ऐसे किनारे के मामले उत्पन्न होते हैं जहां आप टूल के साथ "लड़ाई" करते हैं।
101
+
102
+ इन परिदृश्यों पर विचार करें:
65
103
 
66
- ### 1. हीयूरिस्टिक कमजोरी (अनुमान लगाने का खेल)
104
+ - क्या `<span className="active"></span>` निकाला जाता है? (यह एक स्ट्रिंग है, लेकिन संभवतः एक क्लास है)
105
+ - क्या `<span status="pending"></span>` निकाला जाता है? (यह एक प्रॉप वैल्यू है)।
106
+ - क्या `<span>{"Hello World"}</span>` निकाला जाता है? (यह एक JS एक्सप्रेशन है)।
107
+ - क्या `<span>Hello {name}. How are you?</span>` निकाला जाता है? (इंटरपोलेशन जटिल है)।
108
+ - क्या `<span aria-label="Image of cat"></span>` निकाला जाता है? (एक्सेसिबिलिटी एट्रिब्यूट्स का अनुवाद आवश्यक है)।
109
+ - क्या `<span data-testid="my-element"></span>` निकाला जाता है? (टेस्ट आईडी का अनुवाद नहीं किया जाना चाहिए)।
110
+ - क्या `<MyComponent errorMessage="An error occurred" />` निकाला जाता है?
111
+ - क्या `<p>This is a paragraph{" "}\n containing multiple lines</p>` निकाला जाता है?
112
+ - क्या `<p>{getStatusMessage()}</p>` फ़ंक्शन परिणाम निकाला जाता है?
113
+ - क्या `<div>{isLoading ? "The page is loading" : <MyComponent/>} </div>` निकाला जाता है?
114
+ - क्या `<span>AX-99</span>` जैसे प्रोडक्ट आईडी को निकाला जाता है?
67
115
 
68
- कंपाइलर को यह अनुमान लगाना होता है कि क्या कंटेंट है और क्या कोड है।
116
+ आप अंततः विशिष्ट टिप्पणियाँ जोड़ने लगते हैं (जैसे `// ignore-translation`, या विशिष्ट प्रॉप्स जैसे `data-compiler-ignore="true"`) ताकि यह आपकी एप्लिकेशन लॉजिक को तोड़ने से रोका जा सके।
69
117
 
70
- - क्या `className="active"` का अनुवाद होता है? यह एक स्ट्रिंग है।
71
- - क्या `status="pending"` का अनुवाद होता है?
72
- - क्या `<MyComponent errorMessage="An error occurred" />` का अनुवाद होता है?
73
- - क्या `"AX-99"` जैसे उत्पाद आईडी का अनुवाद होता है?
118
+ ### Intlayer इस जटिलता को कैसे संभालता है?
74
119
 
75
- आप अंततः "कंपाइलर से लड़ते" हुए पाएंगे, विशिष्ट टिप्पणियाँ (जैसे `// ignore-translation`) जोड़कर ताकि यह आपकी एप्लिकेशन लॉजिक को तोड़ने से रोका जा सके।
120
+ Intlayer यह पता लगाने के लिए एक मिश्रित दृष्टिकोण का उपयोग करता है कि किसी फ़ील्ड को अनुवाद के लिए निकाला जाना चाहिए या नहीं, और गलत सकारात्मक परिणामों को कम करने का प्रयास करता है:
76
121
 
77
- ### 2. डायनेमिक डेटा की कठोर सीमा
122
+ 1. **AST विश्लेषण:** यह तत्व के प्रकार की जांच करता है (जैसे, `reactNode`, `label`, या `title` prop के बीच अंतर करना)।
123
+ 2. **पैटर्न पहचान:** यह पता लगाता है कि क्या स्ट्रिंग कैपिटलाइज़्ड है या इसमें स्पेस शामिल हैं, जो यह सुझाव देता है कि यह संभवतः मानव-पठनीय टेक्स्ट है न कि कोड पहचानकर्ता।
124
+
125
+ ### डायनेमिक डेटा हार्ड लिमिट
78
126
 
79
127
  कंपाइलर निष्कर्षण **स्थैतिक विश्लेषण** पर निर्भर करता है। इसे आपके कोड में सटीक स्ट्रिंग देखनी होती है ताकि एक स्थिर ID बनाई जा सके।
80
- यदि आपका API `server_error` जैसे त्रुटि कोड स्ट्रिंग लौटाता है, तो आप इसे कंपाइलर के साथ अनुवादित नहीं कर सकते क्योंकि कंपाइलर को बिल्ड समय पर उस स्ट्रिंग के अस्तित्व का पता नहीं होता। आपको डायनेमिक डेटा के लिए एक द्वितीयक "रनटाइम-केवल" सिस्टम बनाना पड़ता है।
128
+ यदि आपका API एक त्रुटि कोड स्ट्रिंग जैसे `server_error` लौटाता है, तो आप इसे कंपाइलर के साथ अनुवादित नहीं कर सकते क्योंकि कंपाइलर को बिल्ड समय पर उस स्ट्रिंग के अस्तित्व का पता नहीं होता है। आपको गतिशील डेटा के लिए एक द्वितीयक "केवल रनटाइम" सिस्टम बनाना होगा।
129
+
130
+ ### चंकिंग की कमी
131
+
132
+ कुछ कंपाइलर पृष्ठ के अनुसार अनुवादों को चंक नहीं करते हैं। यदि आपका कंपाइलर प्रति भाषा एक बड़ा JSON फ़ाइल उत्पन्न करता है (जैसे, `./lang/en.json`, `./lang/fr.json`, आदि), तो आप संभवतः एक ही विज़िट किए गए पृष्ठ के लिए आपकी सभी पृष्ठों की सामग्री लोड कर लेंगे। इसके अलावा, आपकी सामग्री का उपयोग करने वाला प्रत्येक घटक संभवतः आवश्यक से कहीं अधिक सामग्री के साथ हाइड्रेट होगा, जिससे प्रदर्शन संबंधी समस्याएं हो सकती हैं।
133
+
134
+ अपने अनुवादों को गतिशील रूप से लोड करने में भी सावधानी बरतें। यदि ऐसा नहीं किया गया, तो आप वर्तमान भाषा के अलावा सभी भाषाओं के लिए सामग्री लोड कर लेंगे।
135
+
136
+ > समस्या को समझाने के लिए, एक साइट पर विचार करें जिसमें 10 पेज और 10 भाषाएँ हों (सभी 100% अद्वितीय)। आप 99 अतिरिक्त पेजों की सामग्री लोड करेंगे (10 × 10 - 1)।
137
+
138
+ ### "चंक विस्फोट" और नेटवर्क वॉटरफॉल
81
139
 
82
- ### 3. "चंक विस्फोट" और नेटवर्क वॉटरफॉल्स
140
+ चंकिंग समस्या को हल करने के लिए, कुछ समाधान प्रत्येक कंपोनेंट या यहां तक कि प्रत्येक कुंजी के लिए चंकिंग प्रदान करते हैं। फिर भी समस्या केवल आंशिक रूप से हल होती है। इन समाधानों का मुख्य विक्रय बिंदु अक्सर यह होता है कि "आपकी सामग्री ट्री-शेक की गई है।"
83
141
 
84
- ट्री-शेकिंग की अनुमति देने के लिए, कंपाइलर टूल अक्सर अनुवादों को प्रत्येक कंपोनेंट के अनुसार विभाजित करते हैं।
142
+ वास्तव में, यदि आप सामग्री को स्थैतिक रूप से लोड करते हैं, तो आपका समाधान अप्रयुक्त सामग्री को ट्री-शेक करेगा, लेकिन फिर भी आपकी एप्लिकेशन के साथ सभी भाषाओं की सामग्री लोड हो जाएगी।
85
143
 
86
- - **परिणाम:** 50 छोटे कंपोनेंट्स वाली एक ही पेज व्यू में **50 अलग-अलग HTTP अनुरोध** हो सकते हैं छोटे अनुवाद खंडों के लिए। HTTP/2 के बावजूद, यह एक नेटवर्क वॉटरफॉल बनाता है जो आपकी एप्लिकेशन को एकल, अनुकूलित भाषा बंडल की तुलना में धीमा महसूस कराता है।
144
+ तो इसे गतिशील रूप से क्यों लोड किया जाए? हाँ, उस स्थिति में आप आवश्यक सामग्री से अधिक लोड करेंगे, लेकिन इसके बिना कुछ समझौते नहीं हैं।
87
145
 
88
- ### 4. रनटाइम प्रदर्शन ओवरहेड
146
+ सामग्री को गतिशील रूप से लोड करने से प्रत्येक सामग्री का टुकड़ा अपने स्वयं के चंक में अलग हो जाता है, जिसे केवल तब लोड किया जाएगा जब कंपोनेंट रेंडर होगा। इसका मतलब है कि आप प्रत्येक टेक्स्ट ब्लॉक के लिए एक HTTP अनुरोध करेंगे। आपके पेज पर 1,000 टेक्स्ट ब्लॉक हैं? → आपके सर्वरों को 1,000 HTTP अनुरोध। और नुकसान को सीमित करने और आपके एप्लिकेशन के पहले रेंडर समय को अनुकूलित करने के लिए, आपको कई Suspense सीमाओं या Skeleton Loaders को सम्मिलित करना होगा।
89
147
 
90
- अनुवादों को प्रतिक्रियाशील बनाने के लिए (ताकि जब आप भाषाएँ बदलें तो वे तुरंत अपडेट हों), कंपाइलर अक्सर _हर_ कंपोनेंट में स्टेट मैनेजमेंट हुक्स इंजेक्ट करता है।
148
+ > नोट: Next.js और SSR के साथ भी, आपके कंपोनेंट लोड होने के बाद हाइड्रेट किए जाएंगे, इसलिए HTTP अनुरोध अभी भी किए जाएंगे।
91
149
 
92
- - **लागत:** यदि आप 5,000 आइटम की एक सूची रेंडर करते हैं, तो आप केवल टेक्स्ट के लिए 5,000 `useState` और `useEffect` हुक्स इनिशियलाइज़ कर रहे हैं। यह मेमोरी और CPU चक्रों को खपत करता है, जिन्हें डिक्लेरेटिव लाइब्रेरीज़ (जो आमतौर पर एकल Context प्रोवाइडर का उपयोग करती हैं) बचाती हैं।
150
+ समाधान? एक ऐसा समाधान अपनाना जो स्कोप्ड कंटेंट डिक्लेरेशन की अनुमति देता हो, जैसे कि `i18next`, `next-intl`, या `intlayer` करता है।
151
+
152
+ > नोट: `i18next` और `next-intl` आपको प्रत्येक पेज के लिए अपने namespace / messages आयातों को मैन्युअली प्रबंधित करने की आवश्यकता होती है ताकि आपके बंडल का आकार अनुकूलित हो सके। आपको एक बंडल एनालाइज़र का उपयोग करना चाहिए जैसे कि `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), या `webpack-bundle-analyzer` (React CRA / Angular / आदि) यह पता लगाने के लिए कि क्या आप अपने बंडल को अप्रयुक्त अनुवादों से प्रदूषित कर रहे हैं।
153
+
154
+ ### रनटाइम प्रदर्शन ओवरहेड
155
+
156
+ अनुवादों को प्रतिक्रियाशील बनाने के लिए (ताकि जब आप भाषा बदलें तो वे तुरंत अपडेट हो जाएं), कंपाइलर अक्सर प्रत्येक कॉम्पोनेंट में स्टेट मैनेजमेंट हुक्स इंजेक्ट करता है।
157
+
158
+ - **लागत:** यदि आप 5,000 आइटम की एक सूची रेंडर करते हैं, तो आप केवल टेक्स्ट के लिए 5,000 `useState` और `useEffect` हुक्स इनिशियलाइज़ कर रहे हैं। React को सभी 5,000 कंज्यूमर्स को एक साथ पहचानना और पुनः रेंडर करना होता है। इससे एक बड़ा "Main Thread" ब्लॉक होता है, जो स्विच के दौरान UI को फ्रीज कर देता है। यह मेमोरी और CPU साइकल्स को खपत करता है, जिन्हें डिक्लेरेटिव लाइब्रेरीज़ (जो आमतौर पर एकल Context प्रोवाइडर का उपयोग करती हैं) बचाती हैं।
159
+
160
+ > ध्यान दें कि यह समस्या React के अलावा अन्य फ्रेमवर्क्स के लिए भी समान है।
93
161
 
94
162
  ## जाल: विक्रेता लॉक-इन
95
163
 
96
- यह संभवतः कंपाइलर-आधारित i18n का सबसे खतरनाक पहलू है।
164
+ ऐसे i18n समाधान का चयन करते समय सावधान रहें जो अनुवाद कुंजियों के निष्कर्षण या माइग्रेशन की अनुमति देता हो।
165
+
166
+ डिक्लेरेटिव लाइब्रेरी के मामले में, आपका स्रोत कोड स्पष्ट रूप से आपके अनुवाद इरादे को दर्शाता है: ये आपके कीज़ हैं, और आप इन्हें नियंत्रित करते हैं। यदि आप लाइब्रेरी बदलना चाहते हैं, तो आमतौर पर आपको केवल इम्पोर्ट को अपडेट करना होता है।
97
167
 
98
- एक डिक्लेरेटिव लाइब्रेरी में, आपके स्रोत कोड में स्पष्ट इरादा होता है। आप कुंजियों के मालिक होते हैं। यदि आप लाइब्रेरी बदलते हैं, तो आप केवल इम्पोर्ट बदलते हैं।
168
+ कंपाइलर दृष्टिकोण के साथ, आपका स्रोत कोड केवल सामान्य अंग्रेज़ी टेक्स्ट हो सकता है, जिसमें अनुवाद लॉजिक का कोई निशान नहीं होता: सब कुछ बिल्ड टूल कॉन्फ़िगरेशन में छिपा होता है। यदि वह प्लगइन अप्रबंधित हो जाता है या आप समाधान बदलना चाहते हैं, तो आप फंस सकते हैं। "इजेक्ट" करने का कोई आसान तरीका नहीं है: आपके कोड में कोई उपयोगी कीज़ नहीं होतीं, और आपको नई लाइब्रेरी के लिए अपने सभी अनुवादों को पुनः उत्पन्न करना पड़ सकता है।
99
169
 
100
- कंपाइलर-आधारित दृष्टिकोण में, **आपका स्रोत कोड केवल अंग्रेज़ी टेक्स्ट होता है।** "अनुवाद लॉजिक" केवल बिल्ड प्लगइन की कॉन्फ़िगरेशन के अंदर मौजूद होता है।
101
- यदि वह लाइब्रेरी मेंटेन करना बंद कर देती है, या यदि आप उससे आगे बढ़ जाते हैं, तो आप फंसे हुए हैं। आप आसानी से "eject" नहीं कर सकते क्योंकि आपके स्रोत कोड में कोई ट्रांसलेशन कीज़ नहीं हैं। आपको मैन्युअली अपना पूरा एप्लिकेशन फिर से लिखना होगा ताकि आप माइग्रेट कर सकें।
170
+ कुछ समाधान अनुवाद जनरेशन सेवाएं भी प्रदान करते हैं। क्रेडिट खत्म? अनुवाद खत्म।
171
+
172
+ कंपाइलर अक्सर टेक्स्ट को हैश करते हैं (जैसे, `"Hello World"` -> `x7f2a`)। आपकी अनुवाद फ़ाइलें इस तरह दिखती हैं: `{ "x7f2a": "Hola Mundo" }`। जाल: यदि आप लाइब्रेरी बदलते हैं, तो नई लाइब्रेरी `"Hello World"` देखती है और उस कुंजी की तलाश करती है। यह उसे नहीं पाएगी क्योंकि आपकी अनुवाद फ़ाइल हैश से भरी होती है (`x7f2a`)।
173
+
174
+ ### प्लेटफ़ॉर्म लॉक-इन
175
+
176
+ कंपाइलर-आधारित दृष्टिकोण चुनकर, आप खुद को अंतर्निहित प्लेटफ़ॉर्म में बंद कर लेते हैं। उदाहरण के लिए, कुछ कंपाइलर सभी बंडलरों (जैसे Vite, Turbopack, या Metro) के लिए उपलब्ध नहीं हैं। यह भविष्य के माइग्रेशन को कठिन बना सकता है, और आपको अपने सभी एप्लिकेशन को कवर करने के लिए कई समाधान अपनाने की आवश्यकता हो सकती है।
102
177
 
103
178
  ## दूसरी तरफ: डिक्लेरेटिव दृष्टिकोण के जोखिम
104
179
 
105
- सच कहें तो, पारंपरिक डिक्लेरेटिव तरीका भी परफेक्ट नहीं है। इसके अपने "footguns" होते हैं।
180
+ सच कहें तो, पारंपरिक डिक्लेरेटिव तरीका भी परफेक्ट नहीं है। इसके अपने "फुटगन्स" होते हैं।
106
181
 
107
- 1. **Namespace Hell:** आपको अक्सर मैन्युअली यह प्रबंधित करना पड़ता है कि कौन से JSON फाइलें लोड करनी हैं (`common.json`, `dashboard.json`, `footer.json`)। यदि आप कोई फाइल भूल जाते हैं, तो उपयोगकर्ता को कच्ची कुंजियाँ दिखाई देती हैं।
108
- 2. **Over-fetching:** सावधानीपूर्वक कॉन्फ़िगरेशन के बिना, यह बहुत आसान है कि आप गलती से प्रारंभिक लोड पर _सभी_ पृष्ठों के लिए _सभी_ ट्रांसलेशन कीज़ लोड कर लें, जिससे आपके बंडल का आकार बढ़ जाता है।
109
- 3. **सिंक ड्रिफ्ट:** यह आम बात है कि JSON फाइल में कुंजियाँ तब तक बनी रहती हैं जब तक कि उन कुंजियों का उपयोग करने वाला कंपोनेंट डिलीट नहीं हो जाता। आपकी ट्रांसलेशन फाइलें अनंत तक बढ़ती रहती हैं, जो "ज़ॉम्बी कीज़" से भरी होती हैं।
182
+ 1. **Namespace Hell:** आपको अक्सर मैन्युअली यह प्रबंध करना पड़ता है कि कौन सी JSON फ़ाइलें लोड करनी हैं (`common.json`, `dashboard.json`, `footer.json`)। यदि आप किसी एक को भूल जाते हैं, तो उपयोगकर्ता को कच्ची कुंजियाँ दिखाई देती हैं।
183
+ 2. **अधिक लोडिंग (Over-fetching):** सावधानीपूर्वक कॉन्फ़िगरेशन के बिना, यह बहुत आसान है कि आप गलती से अपनी सभी पृष्ठों के लिए सभी अनुवाद कुंजियाँ प्रारंभिक लोड पर लोड कर लें, जिससे आपके बंडल का आकार बढ़ जाता है।
184
+ 3. **सिंक ड्रिफ्ट (Sync Drift):** यह सामान्य है कि कुंजियाँ JSON फ़ाइल में तब तक बनी रहती हैं जब तक कि उस कंपोनेंट का उपयोग नहीं किया जाता जो उन्हें उपयोग करता था। आपकी अनुवाद फ़ाइलें अनंत तक बढ़ती रहती हैं, "ज़ॉम्बी कुंजियों" से भरी हुई।
110
185
 
111
186
  ## Intlayer का मध्य मार्ग
112
187
 
113
- यहीं पर **Intlayer** जैसे टूल्स नवाचार करने की कोशिश कर रहे हैं। Intlayer समझता है कि जबकि कंपाइलर शक्तिशाली होते हैं, अप्रत्यक्ष जादू खतरनाक होता है।
188
+ यहीं पर **Intlayer** जैसे टूल नवाचार करने की कोशिश कर रहे हैं। Intlayer समझता है कि जबकि कंपाइलर शक्तिशाली होते हैं, अप्रत्यक्ष जादू खतरनाक होता है।
114
189
 
115
- Intlayer एक अनोखा **`transform` कमांड** प्रदान करता है। छिपे हुए बिल्ड स्टेप में जादू करने के बजाय, यह वास्तव में **आपके कंपोनेंट कोड को फिर से लिख सकता है**। यह आपके टेक्स्ट को स्कैन करता है और इसे आपके कोडबेस में स्पष्ट कंटेंट डिक्लेरेशन से बदल देता है।
190
+ Intlayer एक मिश्रित दृष्टिकोण प्रदान करता है, जिससे आप दोनों दृष्टिकोणों के लाभ उठा सकते हैं: घोषणात्मक सामग्री प्रबंधन, जो इसके कंपाइलर के साथ भी संगत है ताकि विकास समय बचाया जा सके।
191
+
192
+ और यदि आप Intlayer कंपाइलर का उपयोग नहीं करते हैं, तब भी Intlayer एक `transform` कमांड प्रदान करता है (जो VSCode एक्सटेंशन के माध्यम से भी सुलभ है)। छिपे हुए बिल्ड चरण में जादू करने के बजाय, यह वास्तव में **आपके कंपोनेंट कोड को पुनः लिख सकता है**। यह आपके टेक्स्ट को स्कैन करता है और इसे आपके कोडबेस में स्पष्ट कंटेंट घोषणाओं से बदल देता है।
116
193
 
117
194
  यह आपको दोनों दुनिया का सर्वश्रेष्ठ देता है:
118
195
 
119
- 1. **ग्रैन्युलैरिटी:** आप अपनी ट्रांसलेशन्स को अपने कंपोनेंट्स के करीब रखते हैं (जो मॉड्यूलैरिटी और ट्री-शेकिंग में सुधार करता है)।
120
- 2. **सुरक्षा:** अनुवाद स्पष्ट कोड बन जाता है, छिपे हुए बिल्ड-टाइम जादू नहीं।
121
- 3. **कोई लॉक-इन नहीं:** चूंकि कोड आपके रिपॉजिटरी के भीतर एक मानक घोषणात्मक संरचना में परिवर्तित हो जाता है, आप लॉजिक को वेबपैक प्लगइन में छिपा नहीं रहे हैं।
196
+ 1. **सूक्ष्मता (Granularity):** आप अपने अनुवादों को अपने कंपोनेंट्स के करीब रखते हैं (जो मॉड्यूलैरिटी और ट्री-शेकिंग को बेहतर बनाता है)।
197
+ 2. **सुरक्षा (Safety):** अनुवाद स्पष्ट कोड बन जाता है, छिपे हुए बिल्ड-टाइम जादू के बजाय।
198
+ 3. **कोई लॉक-इन नहीं (No Lock-in):** चूंकि कोड आपके रिपोजिटरी में एक घोषणात्मक संरचना में परिवर्तित हो जाता है, आप आसानी से टैब दबा सकते हैं, या अपने IDE के कोपिलट का उपयोग करके अपनी कंटेंट घोषणाएं जनरेट कर सकते हैं, आप वेबपैक प्लगइन में लॉजिक छिपा नहीं रहे हैं।
122
199
 
123
200
  ## निष्कर्ष
124
201
 
125
- तो, आपको क्या चुनना चाहिए?
202
+ तो, आपको कौन सा चुनना चाहिए?
203
+
204
+ **यदि आप एक MVP बना रहे हैं, या जल्दी आगे बढ़ना चाहते हैं:**
205
+ कंपाइलर-आधारित दृष्टिकोण एक वैध विकल्प है। यह आपको बेहद तेजी से आगे बढ़ने की अनुमति देता है। आपको फ़ाइल संरचनाओं या कुंजियों की चिंता करने की आवश्यकता नहीं है। आप बस निर्माण करें। तकनीकी ऋण "भविष्य के आप" के लिए समस्या है।
206
+
207
+ **यदि आप एक जूनियर डेवलपर हैं, या अनुकूलन की परवाह नहीं करते:**
208
+ यदि आप सबसे कम मैनुअल प्रबंधन चाहते हैं, तो कंपाइलर-आधारित दृष्टिकोण संभवतः सबसे अच्छा है। आपको कुंजियों या अनुवाद फ़ाइलों को स्वयं संभालने की आवश्यकता नहीं होगी—बस टेक्स्ट लिखें, और कंपाइलर बाकी को स्वचालित करता है। इससे सेटअप प्रयास कम होता है और मैनुअल चरणों से जुड़ी सामान्य i18n गलतियाँ कम होती हैं।
126
209
 
127
- **यदि आप एक जूनियर डेवलपर, एक सोलो फाउंडर, या MVP बना रहे हैं:**
128
- कंपाइलर-आधारित दृष्टिकोण एक वैध विकल्प है। यह आपको बेहद तेज़ी से आगे बढ़ने की अनुमति देता है। आपको फाइल संरचनाओं या कुंजियों की चिंता करने की जरूरत नहीं है। आप बस निर्माण करते हैं। तकनीकी ऋण "भविष्य के आप" के लिए एक समस्या है।
210
+ **यदि आप एक मौजूदा प्रोजेक्ट का अंतरराष्ट्रीयकरण कर रहे हैं जिसमें पहले से ही हजारों घटक हैं जिन्हें पुनः संरचित करना है:**
211
+ यहाँ एक कंपाइलर-आधारित दृष्टिकोण व्यावहारिक विकल्प हो सकता है। प्रारंभिक निष्कर्षण चरण हफ्तों या महीनों के मैनुअल काम को बचा सकता है। हालांकि, Intlayer के `transform` कमांड जैसे टूल का उपयोग करने पर विचार करें, जो स्ट्रिंग्स को निकाल सकता है और उन्हें स्पष्ट घोषणात्मक कंटेंट डिक्लेरेशन में परिवर्तित कर सकता है। यह आपको ऑटोमेशन की गति देता है जबकि घोषणात्मक दृष्टिकोण की सुरक्षा और पोर्टेबिलिटी को बनाए रखता है। आपको दोनों दुनिया का सर्वश्रेष्ठ मिलता है: तेज़ प्रारंभिक माइग्रेशन बिना दीर्घकालिक आर्किटेक्चरल कर्ज के।
129
212
 
130
- **यदि आप एक पेशेवर, एंटरप्राइज-ग्रेड एप्लिकेशन बना रहे हैं:**
131
- जादू आमतौर पर एक बुरा विचार है। आपको नियंत्रण की आवश्यकता है।
213
+ **यदि आप एक प्रोफेशनल, एंटरप्राइज-ग्रेड एप्लिकेशन बना रहे हैं:**
214
+ मैजिक आमतौर पर एक खराब विचार है। आपको नियंत्रण की आवश्यकता है।
132
215
 
133
- - आपको बैकएंड से डायनेमिक डेटा को संभालना होगा।
134
- - आपको कम-श्रेणी के उपकरणों पर प्रदर्शन सुनिश्चित करना होगा (हुक विस्फोटों से बचते हुए)।
135
- - आपको यह सुनिश्चित करना होगा कि आप हमेशा के लिए किसी विशिष्ट बिल्ड टूल में लॉकहों।
216
+ - आपको बैकएंड से डायनामिक डेटा को संभालना होगा।
217
+ - आपको लो-एंड डिवाइसेस पर प्रदर्शन सुनिश्चित करना होगा (हुक विस्फोटों से बचते हुए)।
218
+ - आपको यह सुनिश्चित करने की आवश्यकता है कि आप हमेशा के लिए किसी विशिष्ट बिल्ड टूल में फंसेरहें।
136
219
 
137
- पेशेवर ऐप्स के लिए, **घोषणात्मक कंटेंट मैनेजमेंट** (जैसे Intlayer या स्थापित लाइब्रेरी) स्वर्ण मानक बना रहता है। यह आपकी चिंताओं को अलग करता है, आपकी आर्किटेक्चर को साफ़ रखता है, और यह सुनिश्चित करता है कि आपकी एप्लिकेशन की बहुभाषी क्षमता किसी "ब्लैक बॉक्स" कंपाइलर पर निर्भर न हो जो आपकी मंशाओं का अनुमान लगाता हो।
220
+ पेशेवर ऐप्स के लिए, **घोषणात्मक कंटेंट प्रबंधन** (जैसे Intlayer या स्थापित लाइब्रेरीज़) स्वर्ण मानक बना रहता है। यह आपकी चिंताओं को अलग करता है, आपकी आर्किटेक्चर को साफ रखता है, और यह सुनिश्चित करता है कि आपकी एप्लिकेशन की बहुभाषी क्षमता किसी "ब्लैक बॉक्स" कंपाइलर पर निर्भर न हो जो आपकी मंशाओं का अनुमान लगाता हो।