@intlayer/docs 8.9.4 → 8.9.6-canary.0
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.
- package/docs/ar/benchmark/index.md +0 -3
- package/docs/ar/benchmark/nextjs.md +15 -6
- package/docs/ar/benchmark/solid.md +155 -0
- package/docs/ar/benchmark/svelte.md +148 -0
- package/docs/ar/benchmark/tanstack.md +12 -3
- package/docs/ar/benchmark/vue.md +160 -0
- package/docs/ar/configuration.md +16 -12
- package/docs/ar/dictionary/content_file.md +51 -1
- package/docs/ar/plugins/sync-po.md +0 -21
- package/docs/bn/configuration.md +16 -12
- package/docs/cs/configuration.md +16 -12
- package/docs/de/benchmark/index.md +0 -3
- package/docs/de/benchmark/nextjs.md +15 -6
- package/docs/de/benchmark/solid.md +155 -0
- package/docs/de/benchmark/svelte.md +148 -0
- package/docs/de/benchmark/tanstack.md +12 -3
- package/docs/de/benchmark/vue.md +160 -0
- package/docs/de/configuration.md +16 -12
- package/docs/de/dictionary/content_file.md +52 -2
- package/docs/de/plugins/sync-po.md +0 -22
- package/docs/en/benchmark/nextjs.md +11 -2
- package/docs/en/benchmark/solid.md +22 -4
- package/docs/en/benchmark/svelte.md +17 -5
- package/docs/en/benchmark/tanstack.md +18 -3
- package/docs/en/benchmark/vue.md +17 -11
- package/docs/en/configuration.md +16 -13
- package/docs/en/dictionary/content_file.md +51 -1
- package/docs/en/plugins/sync-po.md +0 -21
- package/docs/en-GB/benchmark/index.md +0 -3
- package/docs/en-GB/benchmark/nextjs.md +15 -6
- package/docs/en-GB/benchmark/solid.md +155 -0
- package/docs/en-GB/benchmark/svelte.md +148 -0
- package/docs/en-GB/benchmark/tanstack.md +12 -3
- package/docs/en-GB/benchmark/vue.md +160 -0
- package/docs/en-GB/configuration.md +15 -11
- package/docs/en-GB/dictionary/content_file.md +51 -1
- package/docs/en-GB/plugins/sync-po.md +0 -21
- package/docs/es/benchmark/index.md +0 -3
- package/docs/es/benchmark/nextjs.md +15 -6
- package/docs/es/benchmark/solid.md +155 -0
- package/docs/es/benchmark/svelte.md +148 -0
- package/docs/es/benchmark/tanstack.md +12 -3
- package/docs/es/benchmark/vue.md +160 -0
- package/docs/es/configuration.md +16 -12
- package/docs/es/dictionary/content_file.md +51 -1
- package/docs/es/plugins/sync-po.md +0 -21
- package/docs/fr/benchmark/index.md +0 -3
- package/docs/fr/benchmark/nextjs.md +15 -6
- package/docs/fr/benchmark/solid.md +155 -0
- package/docs/fr/benchmark/svelte.md +148 -0
- package/docs/fr/benchmark/tanstack.md +12 -3
- package/docs/fr/benchmark/vue.md +160 -0
- package/docs/fr/configuration.md +16 -12
- package/docs/fr/dictionary/content_file.md +51 -1
- package/docs/fr/plugins/sync-po.md +0 -21
- package/docs/hi/benchmark/nextjs.md +15 -6
- package/docs/hi/benchmark/solid.md +155 -0
- package/docs/hi/benchmark/svelte.md +148 -0
- package/docs/hi/benchmark/tanstack.md +12 -3
- package/docs/hi/benchmark/vue.md +160 -0
- package/docs/hi/configuration.md +16 -12
- package/docs/hi/dictionary/content_file.md +51 -1
- package/docs/hi/plugins/sync-po.md +0 -21
- package/docs/id/benchmark/index.md +0 -3
- package/docs/id/benchmark/nextjs.md +15 -6
- package/docs/id/benchmark/solid.md +155 -0
- package/docs/id/benchmark/svelte.md +148 -0
- package/docs/id/benchmark/tanstack.md +12 -3
- package/docs/id/benchmark/vue.md +160 -0
- package/docs/id/configuration.md +16 -12
- package/docs/id/dictionary/content_file.md +51 -1
- package/docs/id/plugins/sync-po.md +0 -21
- package/docs/it/benchmark/index.md +1 -4
- package/docs/it/benchmark/nextjs.md +15 -6
- package/docs/it/benchmark/solid.md +155 -0
- package/docs/it/benchmark/svelte.md +148 -0
- package/docs/it/benchmark/tanstack.md +12 -3
- package/docs/it/benchmark/vue.md +160 -0
- package/docs/it/configuration.md +16 -12
- package/docs/it/dictionary/content_file.md +51 -1
- package/docs/it/plugins/sync-po.md +0 -21
- package/docs/ja/benchmark/index.md +5 -5
- package/docs/ja/benchmark/nextjs.md +15 -6
- package/docs/ja/benchmark/solid.md +155 -0
- package/docs/ja/benchmark/svelte.md +148 -0
- package/docs/ja/benchmark/tanstack.md +12 -3
- package/docs/ja/benchmark/vue.md +160 -0
- package/docs/ja/configuration.md +16 -12
- package/docs/ja/dictionary/content_file.md +50 -2
- package/docs/ja/intlayer_with_nextjs_no_locale_path.md +4 -3
- package/docs/ja/plugins/sync-po.md +0 -21
- package/docs/ko/benchmark/nextjs.md +15 -6
- package/docs/ko/benchmark/solid.md +155 -0
- package/docs/ko/benchmark/svelte.md +148 -0
- package/docs/ko/benchmark/tanstack.md +12 -3
- package/docs/ko/benchmark/vue.md +160 -0
- package/docs/ko/configuration.md +16 -12
- package/docs/ko/dictionary/content_file.md +51 -1
- package/docs/ko/intlayer_with_nextjs_no_locale_path.md +3 -2
- package/docs/ko/plugins/sync-po.md +0 -21
- package/docs/nl/configuration.md +16 -12
- package/docs/pl/benchmark/index.md +0 -3
- package/docs/pl/benchmark/nextjs.md +15 -6
- package/docs/pl/benchmark/solid.md +155 -0
- package/docs/pl/benchmark/svelte.md +148 -0
- package/docs/pl/benchmark/tanstack.md +12 -3
- package/docs/pl/benchmark/vue.md +160 -0
- package/docs/pl/configuration.md +16 -12
- package/docs/pl/dictionary/content_file.md +51 -1
- package/docs/pl/plugins/sync-po.md +0 -21
- package/docs/pt/benchmark/index.md +0 -3
- package/docs/pt/benchmark/nextjs.md +16 -7
- package/docs/pt/benchmark/solid.md +155 -0
- package/docs/pt/benchmark/svelte.md +148 -0
- package/docs/pt/benchmark/tanstack.md +13 -4
- package/docs/pt/benchmark/vue.md +160 -0
- package/docs/pt/configuration.md +16 -12
- package/docs/pt/dictionary/content_file.md +51 -1
- package/docs/pt/plugins/sync-po.md +0 -21
- package/docs/ru/benchmark/nextjs.md +15 -6
- package/docs/ru/benchmark/solid.md +155 -0
- package/docs/ru/benchmark/svelte.md +148 -0
- package/docs/ru/benchmark/tanstack.md +12 -3
- package/docs/ru/benchmark/vue.md +160 -0
- package/docs/ru/configuration.md +16 -12
- package/docs/ru/dictionary/content_file.md +52 -2
- package/docs/ru/plugins/sync-po.md +0 -21
- package/docs/tr/benchmark/index.md +0 -3
- package/docs/tr/benchmark/nextjs.md +15 -6
- package/docs/tr/benchmark/solid.md +155 -0
- package/docs/tr/benchmark/svelte.md +148 -0
- package/docs/tr/benchmark/tanstack.md +12 -3
- package/docs/tr/benchmark/vue.md +160 -0
- package/docs/tr/configuration.md +16 -12
- package/docs/tr/dictionary/content_file.md +51 -1
- package/docs/tr/plugins/sync-po.md +0 -21
- package/docs/uk/benchmark/nextjs.md +15 -6
- package/docs/uk/benchmark/solid.md +155 -0
- package/docs/uk/benchmark/svelte.md +148 -0
- package/docs/uk/benchmark/tanstack.md +12 -3
- package/docs/uk/benchmark/vue.md +160 -0
- package/docs/uk/configuration.md +16 -12
- package/docs/uk/dictionary/content_file.md +51 -1
- package/docs/uk/plugins/sync-po.md +0 -21
- package/docs/ur/configuration.md +16 -12
- package/docs/vi/benchmark/index.md +0 -3
- package/docs/vi/benchmark/nextjs.md +15 -6
- package/docs/vi/benchmark/solid.md +155 -0
- package/docs/vi/benchmark/svelte.md +148 -0
- package/docs/vi/benchmark/tanstack.md +12 -3
- package/docs/vi/benchmark/vue.md +160 -0
- package/docs/vi/configuration.md +16 -12
- package/docs/vi/dictionary/content_file.md +51 -1
- package/docs/vi/intlayer_with_nextjs_15.md +10 -57
- package/docs/vi/plugins/sync-po.md +0 -21
- package/docs/zh/benchmark/nextjs.md +15 -6
- package/docs/zh/benchmark/solid.md +155 -0
- package/docs/zh/benchmark/svelte.md +148 -0
- package/docs/zh/benchmark/tanstack.md +12 -3
- package/docs/zh/benchmark/vue.md +160 -0
- package/docs/zh/configuration.md +16 -12
- package/docs/zh/dictionary/content_file.md +51 -3
- package/docs/zh/plugins/sync-po.md +0 -21
- package/frequent_questions/ar/intlayerNode.md +3 -3
- package/frequent_questions/de/intlayerNode.md +3 -3
- package/frequent_questions/en/intlayerNode.md +3 -3
- package/frequent_questions/en-GB/intlayerNode.md +3 -3
- package/frequent_questions/es/intlayerNode.md +3 -3
- package/frequent_questions/fr/intlayerNode.md +3 -3
- package/frequent_questions/hi/intlayerNode.md +3 -3
- package/frequent_questions/id/intlayerNode.md +3 -3
- package/frequent_questions/it/intlayerNode.md +3 -3
- package/frequent_questions/ja/intlayerNode.md +3 -3
- package/frequent_questions/ko/intlayerNode.md +3 -3
- package/frequent_questions/pl/intlayerNode.md +3 -3
- package/frequent_questions/pt/intlayerNode.md +3 -3
- package/frequent_questions/ru/intlayerNode.md +3 -3
- package/frequent_questions/tr/intlayerNode.md +3 -3
- package/frequent_questions/uk/intlayerNode.md +3 -3
- package/frequent_questions/vi/intlayerNode.md +3 -3
- package/frequent_questions/zh/intlayerNode.md +3 -3
- package/package.json +8 -8
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2026-04-20
|
|
3
|
+
updatedAt: 2026-04-21
|
|
4
|
+
title: 2026 में Solid के लिए सर्वश्रेष्ठ i18n समाधान - बेंचमार्क रिपोर्ट
|
|
5
|
+
description: solid-primitives, solid-i18next, और Intlayer जैसे Solid अंतर्राष्ट्रीयकरण (i18n) पुस्तकालयों की तुलना करें। बंडल आकार, लीकेज और प्रतिक्रियाशीलता पर विस्तृत प्रदर्शन रिपोर्ट।
|
|
6
|
+
keywords:
|
|
7
|
+
- benchmark
|
|
8
|
+
- i18n
|
|
9
|
+
- intl
|
|
10
|
+
- solid
|
|
11
|
+
- performance
|
|
12
|
+
- intlayer
|
|
13
|
+
slugs:
|
|
14
|
+
- doc
|
|
15
|
+
- benchmark
|
|
16
|
+
- solid
|
|
17
|
+
author: Aymeric PINEAU
|
|
18
|
+
applicationTemplate: https://github.com/intlayer-org/benchmark-i18n-solid-template
|
|
19
|
+
history:
|
|
20
|
+
- version: 8.7.12
|
|
21
|
+
date: 2026-01-06
|
|
22
|
+
changes: "बेंचमार्क प्रारंभ"
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# Solid i18n पुस्तकालय — 2026 बेंचमार्क रिपोर्ट
|
|
26
|
+
|
|
27
|
+
यह पृष्ठ Solid पर i18n समाधानों के लिए एक बेंचमार्क रिपोर्ट है।
|
|
28
|
+
|
|
29
|
+
## विषय सूची
|
|
30
|
+
|
|
31
|
+
<Toc/>
|
|
32
|
+
|
|
33
|
+
## इंटरैक्टिव बेंचमार्क
|
|
34
|
+
|
|
35
|
+
<I18nBenchmark framework="vite-solid" vertical/>
|
|
36
|
+
|
|
37
|
+
## परिणाम संदर्भ:
|
|
38
|
+
|
|
39
|
+
<iframe
|
|
40
|
+
src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_solid.md"
|
|
41
|
+
width="100%"
|
|
42
|
+
height="600px"
|
|
43
|
+
style="border:none;">
|
|
44
|
+
</iframe>
|
|
45
|
+
|
|
46
|
+
> https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_solid.md
|
|
47
|
+
|
|
48
|
+
संपूर्ण बेंचमार्क रिपॉजिटरी [यहाँ](https://github.com/intlayer-org/benchmark-i18n/tree/main) देखें।
|
|
49
|
+
|
|
50
|
+
## परिचय
|
|
51
|
+
|
|
52
|
+
Solid ऐप में अंतर्राष्ट्रीयकरण (Internationalisation) समाधान सबसे भारी निर्भरताओं में से हैं। मुख्य जोखिम अनावश्यक सामग्री भेजने का है: एक ही रूट के बंडल में अन्य पृष्ठों और अन्य लोकेल्स के अनुवाद शामिल करना।
|
|
53
|
+
|
|
54
|
+
जैसे-जैसे आपका ऐप बढ़ता है, यह समस्या क्लाइंट को भेजे जाने वाले JavaScript को तेज़ी से बढ़ा सकती है और नेविगेशन को धीमा कर सकती है।
|
|
55
|
+
|
|
56
|
+
व्यवहार में, कम से कम अनुकूलित कार्यान्वयन के लिए, एक अंतर्राष्ट्रीयकृत पृष्ठ बिना i18n वाले संस्करण की तुलना में कई गुना भारी हो सकता है।
|
|
57
|
+
|
|
58
|
+
दूसरा प्रभाव डेवलपर अनुभव (DX) पर पड़ता है: आप सामग्री, प्रकार (types), नेमस्पेस संगठन, डायनेमिक लोडिंग और लोकेल बदलने पर प्रतिक्रियाशीलता को कैसे घोषित करते हैं।
|
|
59
|
+
|
|
60
|
+
## TL;DR
|
|
61
|
+
|
|
62
|
+
- **Intlayer**: उन्नत सुविधाओं और अनुकूलन की आवश्यकता वाले पेशेवर Solid अनुप्रयोगों के लिए अनुशंसित विकल्प (v8.7.12)।
|
|
63
|
+
- **@solid-primitives/i18n**: सरल परियोजनाओं के लिए उत्कृष्ट हल्का विकल्प, हालांकि इसमें लेज़ी लोडिंग (lazy loading) जैसी उन्नत सुविधाओं का अभाव है।
|
|
64
|
+
- **solid-i18next**: मानक लेकिन भारी विकल्प (~4.7x Intlayer) जिसमें React i18next वाले ही नकारात्मक पक्ष हैं।
|
|
65
|
+
- **Paraglide**: अभिनव दृष्टिकोण लेकिन जटिल DX और कुछ सेटअपों में ट्री-शेकिंग (tree-shaking) के मुद्दे।
|
|
66
|
+
|
|
67
|
+
## अपने ऐप का परीक्षण करें
|
|
68
|
+
|
|
69
|
+
i18n लीकेज समस्याओं को तुरंत पहचानने के लिए, मैंने एक निःशुल्क स्कैनर सेट किया है जो [यहाँ](https://intlayer.org/i18n-seo-scanner) उपलब्ध है।
|
|
70
|
+
|
|
71
|
+
<iframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
|
|
72
|
+
|
|
73
|
+
## समस्या
|
|
74
|
+
|
|
75
|
+
बहुभाषी ऐप की लागत को सीमित करने के लिए दो लीवर आवश्यक हैं:
|
|
76
|
+
|
|
77
|
+
- सामग्री को पृष्ठ / नेमस्पेस द्वारा विभाजित करें ताकि जरूरत न होने पर आप संपूर्ण शब्दकोश लोड न करें।
|
|
78
|
+
- सही लोकेल को डायनेमिक रूप से लोड करें, केवल तभी जब आवश्यक हो।
|
|
79
|
+
|
|
80
|
+
इन दृष्टिकोणों की तकनीकी सीमाओं को समझना:
|
|
81
|
+
|
|
82
|
+
**डायनेमिक लोडिंग**
|
|
83
|
+
|
|
84
|
+
डायनेमिक लोडिंग के बिना, अधिकांश समाधान पहले रेंडर से संदेशों को मेमोरी में रखते हैं, जो कई रूट्स और लोकेल्स वाले ऐप्स के लिए महत्वपूर्ण ओवरहेड जोड़ता है।
|
|
85
|
+
|
|
86
|
+
डायनेमिक लोडिंग के साथ, आप एक समझौता स्वीकार करते हैं: कम प्रारंभिक JS, लेकिन भाषा स्विच करते समय कभी-कभी एक अतिरिक्त अनुरोध।
|
|
87
|
+
|
|
88
|
+
**सामग्री विभाजन (Splitting)**
|
|
89
|
+
|
|
90
|
+
`t('a.b.c')` के इर्द-गिर्द निर्मित सिंटैक्स बहुत सुविधाजनक हैं लेकिन अक्सर रनटाइम पर बड़ी JSON वस्तुओं को रखने के लिए प्रोत्साहित करते हैं। वह मॉडल ट्री-शेकिंग (tree-shaking) को कठिन बनाता है जब तक कि पुस्तकालय वास्तविक प्रति-पृष्ठ विभाजन रणनीति प्रदान नहीं करता।
|
|
91
|
+
|
|
92
|
+
## अनुसंधान पद्धति
|
|
93
|
+
|
|
94
|
+
इस बेंचमार्क के लिए, हमने निम्नलिखित पुस्तकालयों की तुलना की:
|
|
95
|
+
|
|
96
|
+
- `Base App` (कोई i18n पुस्तकालय नहीं)
|
|
97
|
+
- `solid-intlayer` (v8.7.12)
|
|
98
|
+
- `@solid-primitives/i18n` (v2.2.1)
|
|
99
|
+
- `solid-i18next` (v17.0.2)
|
|
100
|
+
- `@inlang/paraglide-js` (v2.17.0)
|
|
101
|
+
|
|
102
|
+
फ्रेमवर्क `Solid` है जिसमें **10 पृष्ठों** और **10 भाषाओं** का एक बहुभाषी ऐप है।
|
|
103
|
+
|
|
104
|
+
हमने **चार लोडिंग रणनीतियों** की तुलना की:
|
|
105
|
+
|
|
106
|
+
| रणनीति | कोई नेमस्पेस नहीं (वैश्विक) | नेमस्पेस के साथ (स्कोपयुक्त/scoped) |
|
|
107
|
+
| :------------------ | :------------------------------------------ | :------------------------------------------------------------------- |
|
|
108
|
+
| **स्टेटिक लोडिंग** | **Static**: स्टार्टअप पर मेमोरी में सब कुछ। | **Scoped static**: नेमस्पेस द्वारा विभाजित; स्टार्टअप पर सब कुछ लोड। |
|
|
109
|
+
| **डायनेमिक लोडिंग** | **Dynamic**: लोकेल प्रति मांग पर लोडिंग। | **Scoped dynamic**: नेमस्पेस और लोकेल प्रति सूक्ष्म लोडिंग। |
|
|
110
|
+
|
|
111
|
+
## रणनीति सारांश
|
|
112
|
+
|
|
113
|
+
- **Static**: सरल; प्रारंभिक लोड के बाद कोई नेटवर्क विलंबता नहीं। नकारात्मक पक्ष: बड़ा बंडल आकार।
|
|
114
|
+
- **Dynamic**: प्रारंभिक वजन कम करता है (लेज़ी-लोडिंग)। आदर्श जब आपके पास कई लोकेल्स हों।
|
|
115
|
+
- **Scoped static**: जटिल अतिरिक्त नेटवर्क अनुरोधों के बिना कोड को व्यवस्थित रखता है (तार्किक पृथक्करण)।
|
|
116
|
+
- **Scoped dynamic**: _कोड स्प्लिटिंग_ और प्रदर्शन के लिए सर्वोत्तम दृष्टिकोण। केवल वर्तमान दृश्य और सक्रिय लोकेल के लिए आवश्यक सामग्री लोड करके मेमोरी को कम करता है।
|
|
117
|
+
|
|
118
|
+
## विवरण में परिणाम
|
|
119
|
+
|
|
120
|
+
### 1 — बचने के लिए समाधान
|
|
121
|
+
|
|
122
|
+
> Solid पारिस्थितिकी तंत्र में बचने के लिए कोई स्पष्ट समाधान नहीं है।
|
|
123
|
+
|
|
124
|
+
### 2 — स्वीकार्य समाधान
|
|
125
|
+
|
|
126
|
+
**(solid-i18next)** (`solid-i18next@17.0.2`):
|
|
127
|
+
|
|
128
|
+
`solid-i18next` शायद सबसे लोकप्रिय विकल्प है क्योंकि यह JavaScript ऐप i18n जरूरतों को पूरा करने वाले पहले समाधानों में से एक था। इसमें विशिष्ट समस्याओं के लिए सामुदायिक प्लगइन्स का एक विस्तृत सेट भी है।
|
|
129
|
+
|
|
130
|
+
पैकेज भारी है (~14.6kb, जो `solid-intlayer` से लगभग 4.7 गुना है)।
|
|
131
|
+
|
|
132
|
+
फिर भी, यह `t('a.b.c')` पर बने स्टैक्स के समान ही प्रमुख नकारात्मक पक्ष साझा करता है: अनुकूलन संभव है लेकिन बहुत समय लेने वाला है, और बड़ी परियोजनाओं में खराब प्रथाओं (नेमस्पेस + डायनेमिक लोडिंग + प्रकार) का जोखिम होता है।
|
|
133
|
+
|
|
134
|
+
**(@solid-primitives/i18n)** (`@solid-primitives/i18n@2.2.1`):
|
|
135
|
+
|
|
136
|
+
Solid primitive बेहद हल्का और कुशल है। मैं उन परियोजनाओं के लिए इस समाधान की अनुशंसा करता हूं जो बहुत हल्की हैं, लेकिन इसमें पेशेवर समाधानों के लिए सुविधाओं की जल्दी कमी हो सकती है जिसमें कुकी प्रबंधन, प्रॉक्सी पुनर्निर्देशन, फ़ॉर्मेटर्स आदि शामिल हैं।
|
|
137
|
+
इसमें पृष्ठ आकार अनुकूलन के लिए लेज़ी लोडिंग और स्कोपिंग नेमस्पेस की भी कमी है।
|
|
138
|
+
|
|
139
|
+
**(Paraglide)** (`@inlang/paraglide-js@2.17.0`):
|
|
140
|
+
|
|
141
|
+
`Paraglide` एक अभिनव, सुविचारित दृष्टिकोण प्रदान करता है। फिर भी, इस बेंचमार्क में उनकी कंपनी द्वारा विज्ञापित ट्री-शेकिंग मेरे कार्यान्वयन के लिए काम नहीं कर पाई। वर्कफ़्लो और DX भी अन्य विकल्पों की तुलना में अधिक जटिल हैं।
|
|
142
|
+
व्यक्तिगत रूप से मैं हर पुश से पहले JS फ़ाइलों को पुनर्जीवित करना पसंद नहीं करता, जो PR के माध्यम से निरंतर मर्ज संघर्ष जोखिम पैदा करता है।
|
|
143
|
+
अंत में, अन्य समाधानों की तुलना में, Paraglide सामग्री रेंडर करने के लिए वर्तमान लोकेल को पुनः प्राप्त करने के लिए स्टोर (उदा. Solid signal) का उपयोग नहीं करता है। पार्स किए गए प्रत्येक नोड के लिए, यह localStorage / cookie आदि से लोकेल का अनुरोध करेगा। यह अनावश्यक तर्क के निष्पादन की ओर ले जाता है जो घटक प्रतिक्रियाशीलता को प्रभावित करता है।
|
|
144
|
+
|
|
145
|
+
### 3 — सिफारिशें
|
|
146
|
+
|
|
147
|
+
**(Intlayer)** (`solid-intlayer@8.7.12`):
|
|
148
|
+
|
|
149
|
+
मैं निष्पक्षता के लिए व्यक्तिगत रूप से `solid-intlayer` का न्याय नहीं करूँगा, क्योंकि यह मेरा अपना समाधान है।
|
|
150
|
+
|
|
151
|
+
### व्यक्तिगत नोट
|
|
152
|
+
|
|
153
|
+
यह नोट व्यक्तिगत है और बेंचमार्क परिणामों को प्रभावित नहीं करता है। फिर भी, i18n दुनिया में आप अक्सर अनुवादित सामग्री के लिए `const t = useTranslation('xx')` + `<>{t('xx.xx')}</>` जैसे पैटर्न के आसपास आम सहमति देखते हैं।
|
|
154
|
+
|
|
155
|
+
Solid ऐप्स में, एक फ़ंक्शन को `JSX.Element` के रूप में इंजेक्ट करना, मेरी नज़र में, एक एंटी-पैटर्न है। यह परिहार्य जटिलता और JavaScript निष्पादन ओवरहेड भी जोड़ता है (भले ही यह मुश्किल से ध्यान देने योग्य हो)।
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2026-04-20
|
|
3
|
+
updatedAt: 2026-04-21
|
|
4
|
+
title: 2026 में Svelte के लिए सर्वश्रेष्ठ i18n समाधान - बेंचमार्क रिपोर्ट
|
|
5
|
+
description: svelte-i18n, Paraglide, और Intlayer जैसे Svelte अंतर्राष्ट्रीयकरण (i18n) पुस्तकालयों की तुलना करें। बंडल आकार, लीकेज और प्रतिक्रियाशीलता पर विस्तृत प्रदर्शन रिपोर्ट।
|
|
6
|
+
keywords:
|
|
7
|
+
- benchmark
|
|
8
|
+
- i18n
|
|
9
|
+
- intl
|
|
10
|
+
- svelte
|
|
11
|
+
- performance
|
|
12
|
+
- intlayer
|
|
13
|
+
slugs:
|
|
14
|
+
- doc
|
|
15
|
+
- benchmark
|
|
16
|
+
- svelte
|
|
17
|
+
author: Aymeric PINEAU
|
|
18
|
+
applicationTemplate: https://github.com/intlayer-org/benchmark-i18n-svelte-template
|
|
19
|
+
history:
|
|
20
|
+
- version: 8.7.12
|
|
21
|
+
date: 2026-01-06
|
|
22
|
+
changes: "बेंचमार्क प्रारंभ"
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# Svelte i18n पुस्तकालय — 2026 बेंचमार्क रिपोर्ट
|
|
26
|
+
|
|
27
|
+
यह पृष्ठ Svelte पर i18n समाधानों के लिए एक बेंचमार्क रिपोर्ट है।
|
|
28
|
+
|
|
29
|
+
## विषय सूची
|
|
30
|
+
|
|
31
|
+
<Toc/>
|
|
32
|
+
|
|
33
|
+
## इंटरैक्टिव बेंचमार्क
|
|
34
|
+
|
|
35
|
+
<I18nBenchmark framework="vite-svelte" vertical/>
|
|
36
|
+
|
|
37
|
+
## परिणाम संदर्भ:
|
|
38
|
+
|
|
39
|
+
<iframe
|
|
40
|
+
src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_svelte.md"
|
|
41
|
+
width="100%"
|
|
42
|
+
height="600px"
|
|
43
|
+
style="border:none;">
|
|
44
|
+
</iframe>
|
|
45
|
+
|
|
46
|
+
> https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_svelte.md
|
|
47
|
+
|
|
48
|
+
संपूर्ण बेंचमार्क रिपॉजिटरी [यहाँ](https://github.com/intlayer-org/benchmark-i18n/tree/main) देखें।
|
|
49
|
+
|
|
50
|
+
## परिचय
|
|
51
|
+
|
|
52
|
+
Svelte ऐप में अंतर्राष्ट्रीयकरण (Internationalisation) समाधान सबसे भारी निर्भरताओं में से हैं। मुख्य जोखिम अनावश्यक सामग्री भेजने का है: एक ही रूट के बंडल में अन्य पृष्ठों और अन्य लोकेल्स के अनुवाद शामिल करना।
|
|
53
|
+
|
|
54
|
+
जैसे-जैसे आपका ऐप बढ़ता है, यह समस्या क्लाइंट को भेजे जाने वाले JavaScript को तेज़ी से बढ़ा सकती है और नेविगेशन को धीमा कर सकती है।
|
|
55
|
+
|
|
56
|
+
व्यवहार में, कम से कम अनुकूलित कार्यान्वयन के लिए, एक अंतर्राष्ट्रीयकृत पृष्ठ बिना i18n वाले संस्करण की तुलना में कई गुना भारी हो सकता है।
|
|
57
|
+
|
|
58
|
+
दूसरा प्रभाव डेवलपर अनुभव (DX) पर पड़ता है: आप सामग्री, प्रकार (types), नेमस्पेस संगठन, डायनेमिक लोडिंग और लोकेल बदलने पर प्रतिक्रियाशीलता को कैसे घोषित करते हैं।
|
|
59
|
+
|
|
60
|
+
## TL;DR
|
|
61
|
+
|
|
62
|
+
- **Intlayer**: सबसे छोटे पदचिह्न (footprint) के साथ सबसे प्रदर्शन-कुशल विकल्प (v8.7.12)।
|
|
63
|
+
- **Paraglide**: ट्री-शेकिंग (tree-shaking) के लिए मजबूत दावेदार लेकिन इसमें अधिक जटिल डेवलपर अनुभव और प्रतिक्रियाशीलता ओवरहेड है।
|
|
64
|
+
- **svelte-i18n**: Svelte के लिए व्यापक और मानक, लेकिन बहुत बड़े बंडल वजन (~7x Intlayer) के साथ आता है।
|
|
65
|
+
|
|
66
|
+
## अपने ऐप का परीक्षण करें
|
|
67
|
+
|
|
68
|
+
i18n लीकेज समस्याओं को तुरंत पहचानने के लिए, मैंने एक निःशुल्क स्कैनर सेट किया है जो [यहाँ](https://intlayer.org/i18n-seo-scanner) उपलब्ध है।
|
|
69
|
+
|
|
70
|
+
<iframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
|
|
71
|
+
|
|
72
|
+
## समस्या
|
|
73
|
+
|
|
74
|
+
बहुभाषी ऐप की लागत को सीमित करने के लिए दो लीवर आवश्यक हैं:
|
|
75
|
+
|
|
76
|
+
- सामग्री को पृष्ठ / नेमस्पेस द्वारा विभाजित करें ताकि जरूरत न होने पर आप संपूर्ण शब्दकोश लोड न करें।
|
|
77
|
+
- सही लोकेल को डायनेमिक रूप से लोड करें, केवल तभी जब आवश्यक हो।
|
|
78
|
+
|
|
79
|
+
इन दृष्टिकोणों की तकनीकी सीमाओं को समझना:
|
|
80
|
+
|
|
81
|
+
**डायनेमिक लोडिंग**
|
|
82
|
+
|
|
83
|
+
डायनेमिक लोडिंग के बिना, अधिकांश समाधान पहले रेंडर से संदेशों को मेमोरी में रखते हैं, जो कई रूट्स और लोकेल्स वाले ऐप्स के लिए महत्वपूर्ण ओवरहेड जोड़ता है।
|
|
84
|
+
|
|
85
|
+
डायनेमिक लोडिंग के साथ, आप एक समझौता स्वीकार करते हैं: कम प्रारंभिक JS, लेकिन भाषा स्विच करते समय कभी-कभी एक अतिरिक्त अनुरोध।
|
|
86
|
+
|
|
87
|
+
**सामग्री विभाजन (Splitting)**
|
|
88
|
+
|
|
89
|
+
`t('a.b.c')` के इर्द-गिर्द निर्मित सिंटैक्स बहुत सुविधाजनक हैं लेकिन अक्सर रनटाइम पर बड़ी JSON वस्तुओं को रखने के लिए प्रोत्साहित करते हैं। वह मॉडल ट्री-शेकिंग (tree-shaking) को कठिन बनाता है जब तक कि पुस्तकालय वास्तविक प्रति-पृष्ठ विभाजन रणनीति प्रदान नहीं करता।
|
|
90
|
+
|
|
91
|
+
## अनुसंधान पद्धति
|
|
92
|
+
|
|
93
|
+
इस बेंचमार्क के लिए, हमने निम्नलिखित पुस्तकालयों की तुलना की:
|
|
94
|
+
|
|
95
|
+
- `Base App` (कोई i18n पुस्तकालय नहीं)
|
|
96
|
+
- `svelte-intlayer` (v8.7.12)
|
|
97
|
+
- `svelte-i18n` (v4.0.1)
|
|
98
|
+
- `@inlang/paraglide-js` (v2.17.0)
|
|
99
|
+
|
|
100
|
+
फ्रेमवर्क `Svelte` है जिसमें **10 पृष्ठों** और **10 भाषाओं** का एक बहुभाषी ऐप है।
|
|
101
|
+
|
|
102
|
+
हमने **चार लोडिंग रणनीतियों** की तुलना की:
|
|
103
|
+
|
|
104
|
+
| रणनीति | कोई नेमस्पेस नहीं (वैश्विक) | नेमस्पेस के साथ (स्कोपयुक्त/scoped) |
|
|
105
|
+
| :------------------ | :------------------------------------------ | :------------------------------------------------------------------- |
|
|
106
|
+
| **स्टेटिक लोडिंग** | **Static**: स्टार्टअप पर मेमोरी में सब कुछ। | **Scoped static**: नेमस्पेस द्वारा विभाजित; स्टार्टअप पर सब कुछ लोड। |
|
|
107
|
+
| **डायनेमिक लोडिंग** | **Dynamic**: लोकेल प्रति मांग पर लोडिंग। | **Scoped dynamic**: नेमस्पेस और लोकेल प्रति सूक्ष्म लोडिंग। |
|
|
108
|
+
|
|
109
|
+
## रणनीति सारांश
|
|
110
|
+
|
|
111
|
+
- **Static**: सरल; प्रारंभिक लोड के बाद कोई नेटवर्क विलंबता नहीं। नकारात्मक पक्ष: बड़ा बंडल आकार।
|
|
112
|
+
- **Dynamic**: प्रारंभिक वजन कम करता है (लेज़ी-लोडिंग)। आदर्श जब आपके पास कई लोकेल्स हों।
|
|
113
|
+
- **Scoped static**: जटिल अतिरिक्त नेटवर्क अनुरोधों के बिना कोड को व्यवस्थित रखता है (तार्किक पृथक्करण)।
|
|
114
|
+
- **Scoped dynamic**: _कोड स्प्लिटिंग_ और प्रदर्शन के लिए सर्वोत्तम दृष्टिकोण। केवल वर्तमान दृश्य और सक्रिय लोकेल के लिए आवश्यक सामग्री लोड करके मेमोरी को कम करता है।
|
|
115
|
+
|
|
116
|
+
## विवरण में परिणाम
|
|
117
|
+
|
|
118
|
+
### 1 — बचने के लिए समाधान
|
|
119
|
+
|
|
120
|
+
> Svelte पारिस्थितिकी तंत्र में बचने के लिए कोई स्पष्ट समाधान नहीं है।
|
|
121
|
+
|
|
122
|
+
### 2 — स्वीकार्य समाधान
|
|
123
|
+
|
|
124
|
+
**(Paraglide)** (`@inlang/paraglide-js@2.17.0`):
|
|
125
|
+
|
|
126
|
+
`Paraglide` एक अभिनव, सुविचारित दृष्टिकोण प्रदान करता है। Vite + Svelte ऐप के संदर्भ में, उनकी कंपनी द्वारा विज्ञापित ट्री-शेकिंग अपेक्षा के अनुरूप काम करती है, जो बहुत अच्छी बात है।
|
|
127
|
+
लेकिन React + TanStack Start के मामले में, ट्री-शेकिंग ने अपेक्षा के अनुरूप काम नहीं किया, Next.js के लिए भी यही स्थिति रही। उस ने कहा, Svelte और TanStack Start प्रोजेक्ट में Paraglide के उपयोग की दोबारा जांच करना सार्थक होगा।
|
|
128
|
+
वर्कफ़्लो और DX भी अन्य विकल्पों की तुलना में अधिक जटिल हैं।
|
|
129
|
+
व्यक्तिगत रूप से मैं हर पुश से पहले JS फ़ाइलों को पुनर्जीवित करने का प्रशंसक नहीं हूं, जो PR के माध्यम से निरंतर मर्ज संघर्ष जोखिम पैदा करता है। यह टूल Next.js की तुलना में Vite पर अधिक केंद्रित लगता है।
|
|
130
|
+
अंत में, अन्य समाधानों की तुलना में, Paraglide सामग्री रेंडर करने के लिए वर्तमान लोकेल को पुनः प्राप्त करने के लिए स्टोर (उदा. Svelte store) का उपयोग नहीं करता है। पार्स किए गए प्रत्येक नोड के लिए, यह localStorage / cookie आदि से लोकेल का अनुरोध करेगा। यह अनावश्यक तर्क के निष्पादन की ओर ले जाता है जो घटक प्रतिक्रियाशीलता को प्रभावित करता है।
|
|
131
|
+
|
|
132
|
+
> Paraglide पर ध्यान दें: समाधान आयात के लिए आपके कोडबेस में कोड इंजेक्ट करता है; परिणामस्वरूप, बेंचमार्क रिपोर्ट में 'lib size' मीट्रिक लगभग 0 है। कोड जेनरेशन एक अच्छी बात है, क्योंकि उपयोग किए गए फ़ंक्शन में केवल आवश्यक तर्क शामिल होंगे (हर जगह प्रीफ़िक्स बनाम कोई प्रीफ़िक्स नहीं, कुकी बनाम स्टोरेज आदि)। तुलनात्मक रूप से, Intlayer तर्क के आधार पर सामग्री को ट्री-शेक करने के लिए बंडलर को मजबूर करने के लिए बिल्ड में पर्यावरण चर इंजेक्शन के माध्यम से यह फ़िल्टरिंग करता है। इसके कारण, paraglide और intlayer i18next या next-intl की तुलना में 6 से 10 गुना हल्के समाधान साबित होते हैं।
|
|
133
|
+
|
|
134
|
+
**(svelte-i18n)** (`svelte-i18n@3.4.0`):
|
|
135
|
+
|
|
136
|
+
यह समाधान Svelte प्रोजेक्ट में सभी i18n आवश्यकताओं को पूरा करता है। लेकिन जैसा कि i18next या अन्य प्रमुख i18n समाधानों के मामले में होता है, यह थोड़ा भारी है (~15.9kb, जो `svelte-intlayer` से लगभग 7 गुना है)।
|
|
137
|
+
|
|
138
|
+
### 3 — सिफारिशें
|
|
139
|
+
|
|
140
|
+
**(Intlayer)** (`svelte-intlayer@8.7.12`):
|
|
141
|
+
|
|
142
|
+
मैं निष्पक्षता के लिए व्यक्तिगत रूप से `svelte-intlayer` का न्याय नहीं करूँगा, क्योंकि यह मेरा अपना समाधान है।
|
|
143
|
+
|
|
144
|
+
### व्यक्तिगत नोट
|
|
145
|
+
|
|
146
|
+
यह नोट व्यक्तिगत है और बेंचमार्क परिणामों को प्रभावित नहीं करता है। फिर भी, i18n दुनिया में आप अक्सर अनुवादित सामग्री के लिए `const t = useTranslation('xx')` + `<>{t('xx.xx')}</>` जैसे पैटर्न के आसपास आम सहमति देखते हैं।
|
|
147
|
+
|
|
148
|
+
Svelte ऐप्स में, एक फ़ंक्शन को `Slot` के रूप में इंजेक्ट करना, मेरी नज़र में, एक एंटी-पैटर्न है। यह परिहार्य जटिलता और JavaScript निष्पादन ओवरहेड भी जोड़ता है (भले ही यह मुश्किल से ध्यान देने योग्य हो)।
|
|
@@ -57,6 +57,13 @@ history:
|
|
|
57
57
|
|
|
58
58
|
दूसरा प्रभाव डेवलपर अनुभव (DX) पर पड़ता है: आप सामग्री को कैसे घोषित करते हैं, टाइप्स, नेमस्पेस संगठन, डायनेमिक लोडिंग, और लोकेल बदलने पर रिएक्टिविटी।
|
|
59
59
|
|
|
60
|
+
## TL;DR
|
|
61
|
+
|
|
62
|
+
- **Intlayer**: TanStack Start के लिए सर्वश्रेष्ठ प्रदर्शन और सबसे छोटा बंडल आकार (v8.7.12) प्रदान करता है।
|
|
63
|
+
- **react-i18next** और **use-intl**: बड़े ईकोसिस्टम वाले परिपक्व विकल्प, लेकिन अनुकूलन के लिए काफी भारी और अधिक जटिल।
|
|
64
|
+
- **Paraglide**: अभिनव ट्री-शेकिंग विचार जो व्यवहार में काम नहीं करता है। TanStack Start में जटिल DX और रिएक्टिविटी ओवरहेड।
|
|
65
|
+
- **बचें**: **General Translation (GT)** और **Lingo.dev** गंभीर प्रदर्शन समस्याओं, AI कोटा सीमाओं और वेंडर लॉक-इन (vendor lock-in) के कारण।
|
|
66
|
+
|
|
60
67
|
## अपने ऐप का परीक्षण करें
|
|
61
68
|
|
|
62
69
|
i18n लीकेज के मुद्दों को तेज़ी से पहचानने के लिए, मैंने एक मुफ़्त स्कैनर सेट किया है जो [यहाँ](https://intlayer.org/i18n-seo-scanner) उपलब्ध है।
|
|
@@ -87,12 +94,12 @@ i18n लीकेज के मुद्दों को तेज़ी से
|
|
|
87
94
|
इस बेंचमार्क के लिए, हमने निम्नलिखित लाइब्रेरीज़ की तुलना की है:
|
|
88
95
|
|
|
89
96
|
- `Base App` (कोई i18n लाइब्रेरी नहीं)
|
|
90
|
-
- `react-intlayer` (v8.7.
|
|
97
|
+
- `react-intlayer` (v8.7.12)
|
|
91
98
|
- `react-i18next` (v17.0.2)
|
|
92
99
|
- `use-intl` (v4.9.1)
|
|
93
100
|
- `@lingui/core` (v5.3.0)
|
|
94
101
|
- `@inlang/paraglide-js` (v2.15.1)
|
|
95
|
-
-
|
|
102
|
+
- `@tolgee/react` (v7.0.0)
|
|
96
103
|
- `react-intl` (v10.1.1)
|
|
97
104
|
- `wuchale` (v0.22.11)
|
|
98
105
|
- `gt-react` (vlatest)
|
|
@@ -150,7 +157,9 @@ i18n लीकेज के मुद्दों को तेज़ी से
|
|
|
150
157
|
|
|
151
158
|
`Paraglide` एक अभिनव, अच्छी तरह से सोचा गया दृष्टिकोण प्रदान करता है। फिर भी, इस बेंचमार्क में उनकी कंपनी द्वारा विज्ञापित ट्री-शेकिंग मेरे Next.js कार्यान्वयन या TanStack Start के लिए काम नहीं कर पाया। वर्कफ़्लो और DX अन्य विकल्पों की तुलना में अधिक जटिल हैं। व्यक्तिगत रूप से मैं हर पुश से पहले JS फ़ाइलों को दोबारा उत्पन्न करने का प्रशंसक नहीं हूँ, जो PR के माध्यम से डेवलपर्स के लिए लगातार मर्ज संघर्ष का जोखिम पैदा करता है।
|
|
152
159
|
|
|
153
|
-
|
|
160
|
+
> paraglide पर नोट: यह समाधान आयात के लिए आपके कोडबेस में कोड इंजेक्ट करता है, जिसके परिणामस्वरूप बेंचमार्क रिपोर्ट में 'lib size' मीट्रिक लगभग 0 है। कोड जनरेशन एक अच्छी चीज़ है, क्योंकि उपयोग किया गया फ़ंक्शन केवल आवश्यक लॉजिक (हर जगह प्रीफ़िक्स बनाम कोई प्रीफ़िक्स नहीं, कुकी बनाम स्टोरेज, आदि) शामिल करेगा। इसके विपरीत, Intlayer बिल्ड में एनवायरनमेंट वेरिएबल इंजेक्शन के माध्यम से यह फ़िल्टरिंग करता है ताकि बंडलर को लॉजिक के आधार पर सामग्री को ट्री-शेक करने के लिए मजबूर किया जा सके। इसके लिए धन्यवाद, paraglide और intlayer अंत में i18next या next-intl की तुलना में 6 से 10 गुना हल्के समाधान बन जाते हैं।
|
|
161
|
+
|
|
162
|
+
**(Tolgee)** (`@tolgee/react@7.0.0`):
|
|
154
163
|
|
|
155
164
|
`Tolgee` पहले उल्लेखित कई मुद्दों को संबोधित करता है। मुझे लगा कि इसे शुरू करना समान दृष्टिकोण वाले अन्य उपकरणों की तुलना में कठिन है। यह टाइप सेफ्टी प्रदान नहीं करता है, जिससे कंपाइल समय पर गायब कीज़ को पकड़ना भी बहुत कठिन हो जाता है। गायब-की पहचान जोड़ने के लिए मुझे Tolgee की APIs को अपनी APIs के साथ रैप करना पड़ा।
|
|
156
165
|
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2026-04-20
|
|
3
|
+
updatedAt: 2026-04-21
|
|
4
|
+
title: 2026 में Vue के लिए सर्वश्रेष्ठ i18n समाधान - बेंचमार्क रिपोर्ट
|
|
5
|
+
description: vue-i18n, fluent-vue, और Intlayer जैसे Vue अंतर्राष्ट्रीयकरण (i18n) पुस्तकालयों की तुलना करें। बंडल आकार, लीकेज और प्रतिक्रियाशीलता पर विस्तृत प्रदर्शन रिपोर्ट।
|
|
6
|
+
keywords:
|
|
7
|
+
- benchmark
|
|
8
|
+
- i18n
|
|
9
|
+
- intl
|
|
10
|
+
- vue
|
|
11
|
+
- performance
|
|
12
|
+
- intlayer
|
|
13
|
+
slugs:
|
|
14
|
+
- doc
|
|
15
|
+
- benchmark
|
|
16
|
+
- vue
|
|
17
|
+
author: Aymeric PINEAU
|
|
18
|
+
applicationTemplate: https://github.com/intlayer-org/benchmark-i18n-vue-template
|
|
19
|
+
history:
|
|
20
|
+
- version: 8.7.12
|
|
21
|
+
date: 2026-01-06
|
|
22
|
+
changes: "बेंचमार्क प्रारंभ"
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# Vue i18n पुस्तकालय — 2026 बेंचमार्क रिपोर्ट
|
|
26
|
+
|
|
27
|
+
यह पृष्ठ Vue पर i18n समाधानों के लिए एक बेंचमार्क रिपोर्ट है।
|
|
28
|
+
|
|
29
|
+
## विषय सूची
|
|
30
|
+
|
|
31
|
+
<Toc/>
|
|
32
|
+
|
|
33
|
+
## इंटरैक्टिव बेंचमार्क
|
|
34
|
+
|
|
35
|
+
<I18nBenchmark framework="vite-vue" vertical/>
|
|
36
|
+
|
|
37
|
+
## परिणाम संदर्भ:
|
|
38
|
+
|
|
39
|
+
<iframe
|
|
40
|
+
src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
|
|
41
|
+
width="100%"
|
|
42
|
+
height="600px"
|
|
43
|
+
style="border:none;">
|
|
44
|
+
</iframe>
|
|
45
|
+
|
|
46
|
+
> https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md
|
|
47
|
+
|
|
48
|
+
संपूर्ण बेंचमार्क रिपॉजिटरी [यहाँ](https://github.com/intlayer-org/benchmark-i18n/tree/main) देखें।
|
|
49
|
+
|
|
50
|
+
## परिचय
|
|
51
|
+
|
|
52
|
+
Vue ऐप में अंतर्राष्ट्रीयकरण (Internationalisation) समाधान सबसे भारी निर्भरताओं में से हैं। मुख्य जोखिम अनावश्यक सामग्री भेजने का है: एक ही रूट के बंडल में अन्य पृष्ठों और अन्य लोकेल्स के अनुवाद शामिल करना।
|
|
53
|
+
|
|
54
|
+
जैसे-जैसे आपका ऐप बढ़ता है, यह समस्या क्लाइंट को भेजे जाने वाले JavaScript को तेज़ी से बढ़ा सकती है और नेविगेशन को धीमा कर सकती है।
|
|
55
|
+
|
|
56
|
+
व्यवहार में, कम से कम अनुकूलित कार्यान्वयन के लिए, एक अंतर्राष्ट्रीयकृत पृष्ठ बिना i18n वाले संस्करण की तुलना में कई गुना भारी हो सकता है।
|
|
57
|
+
|
|
58
|
+
दूसरा प्रभाव डेवलपर अनुभव (DX) पर पड़ता है: आप सामग्री, प्रकार (types), नेमस्पेस संगठन, डायनेमिक लोडिंग और लोकेल बदलने पर प्रतिक्रियाशीलता को कैसे घोषित करते हैं।
|
|
59
|
+
|
|
60
|
+
## TL;DR
|
|
61
|
+
|
|
62
|
+
- **Intlayer**: मूल स्कोपिंग (scoping) और डायनेमिक लोडिंग के साथ सबसे हल्का समाधान (v8.7.12)।
|
|
63
|
+
- **vue-i18n**: एक समृद्ध पारिस्थितिकी तंत्र के साथ उद्योग मानक, लेकिन बड़े अनुप्रयोगों में महत्वपूर्ण रूप से भारी हो सकता है और कोड-स्प्लिटिंग के लिए अनुकूलित करना कठिन हो सकता है।
|
|
64
|
+
- **fluent-vue**: अभिनव संदेश संगठन लेकिन इसमें टाइप-सेफ्टी की कमी है और यह एक अत्यंत भारी समाधान साबित होता है।
|
|
65
|
+
|
|
66
|
+
## अपने ऐप का परीक्षण करें
|
|
67
|
+
|
|
68
|
+
i18n लीकेज समस्याओं को तुरंत पहचानने के लिए, मैंने एक निःशुल्क स्कैनर सेट किया है जो [यहाँ](https://intlayer.org/i18n-seo-scanner) उपलब्ध है।
|
|
69
|
+
|
|
70
|
+
<iframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
|
|
71
|
+
|
|
72
|
+
## समस्या
|
|
73
|
+
|
|
74
|
+
बहुभाषी ऐप की लागत को सीमित करने के लिए दो लीवर आवश्यक हैं:
|
|
75
|
+
|
|
76
|
+
- सामग्री को पृष्ठ / नेमस्पेस द्वारा विभाजित करें ताकि जरूरत न होने पर आप संपूर्ण शब्दकोश लोड न करें।
|
|
77
|
+
- सही लोकेल को डायनेमिक रूप से लोड करें, केवल तभी जब आवश्यक हो।
|
|
78
|
+
|
|
79
|
+
इन दृष्टिकोणों की तकनीकी सीमाओं को समझना:
|
|
80
|
+
|
|
81
|
+
**डायनेमिक लोडिंग**
|
|
82
|
+
|
|
83
|
+
डायनेमिक लोडिंग के बिना, अधिकांश समाधान पहले रेंडर से संदेशों को मेमोरी में रखते हैं, जो कई रूट्स और लोकेल्स वाले ऐप्स के लिए महत्वपूर्ण ओवरहेड जोड़ता है।
|
|
84
|
+
|
|
85
|
+
डायनेमिक लोडिंग के साथ, आप एक समझौता स्वीकार करते हैं: कम प्रारंभिक JS, लेकिन भाषा स्विच करते समय कभी-कभी एक अतिरिक्त अनुरोध।
|
|
86
|
+
|
|
87
|
+
**सामग्री विभाजन (Splitting)**
|
|
88
|
+
|
|
89
|
+
`const { t } = useI18n()` + `t('a.b.c')` के इर्द-गिर्द निर्मित सिंटैक्स बहुत सुविधाजनक हैं लेकिन अक्सर रनटाइम पर बड़ी JSON वस्तुओं को रखने के लिए प्रोत्साहित करते हैं। वह मॉडल ट्री-शेकिंग (tree-shaking) को कठिन बनाता है जब तक कि पुस्तकालय वास्तविक प्रति-पृष्ठ विभाजन रणनीति प्रदान नहीं करता।
|
|
90
|
+
|
|
91
|
+
## अनुसंधान पद्धति
|
|
92
|
+
|
|
93
|
+
इस बेंचमार्क के लिए, हमने निम्नलिखित पुस्तकालयों की तुलना की:
|
|
94
|
+
|
|
95
|
+
- `Base App` (कोई i18n पुस्तकालय नहीं)
|
|
96
|
+
- `vue-intlayer` (v8.7.12)
|
|
97
|
+
- `vue-i18n` (v11.4.0)
|
|
98
|
+
- `fluent-vue` (v3.8.2)
|
|
99
|
+
|
|
100
|
+
फ्रेमवर्क `Vue` है जिसमें **10 पृष्ठों** और **10 भाषाओं** का एक बहुभाषी ऐप है।
|
|
101
|
+
|
|
102
|
+
हमने **चार लोडिंग रणनीतियों** की तुलना की:
|
|
103
|
+
|
|
104
|
+
| रणनीति | कोई नेमस्पेस नहीं (वैश्विक) | नेमस्पेस के साथ (स्कोपयुक्त/scoped) |
|
|
105
|
+
| :------------------ | :------------------------------------------ | :------------------------------------------------------------------- |
|
|
106
|
+
| **स्टेटिक लोडिंग** | **Static**: स्टार्टअप पर मेमोरी में सब कुछ। | **Scoped static**: नेमस्पेस द्वारा विभाजित; स्टार्टअप पर सब कुछ लोड। |
|
|
107
|
+
| **डायनेमिक लोडिंग** | **Dynamic**: लोकेल प्रति मांग पर लोडिंग। | **Scoped dynamic**: नेमस्पेस और लोकेल प्रति सूक्ष्म लोडिंग। |
|
|
108
|
+
|
|
109
|
+
## रणनीति सारांश
|
|
110
|
+
|
|
111
|
+
- **Static**: सरल; प्रारंभिक लोड के बाद कोई नेटवर्क विलंबता नहीं। नकारात्मक पक्ष: बड़ा बंडल आकार।
|
|
112
|
+
- **Dynamic**: प्रारंभिक वजन कम करता है (लेज़ी-लोडिंग)। आदर्श जब आपके पास कई लोकेल्स हों।
|
|
113
|
+
- **Scoped static**: जटिल अतिरिक्त नेटवर्क अनुरोधों के बिना कोड को व्यवस्थित रखता है (तार्किक पृथक्करण)।
|
|
114
|
+
- **Scoped dynamic**: _कोड स्प्लिटिंग_ और प्रदर्शन के लिए सर्वोत्तम दृष्टिकोण। केवल वर्तमान दृश्य और सक्रिय लोकेल के लिए आवश्यक सामग्री लोड करके मेमोरी को कम करता है।
|
|
115
|
+
|
|
116
|
+
### मैंने क्या मापा:
|
|
117
|
+
|
|
118
|
+
मैंने प्रत्येक स्टैक के लिए एक वास्तविक ब्राउज़र में एक ही बहुभाषी ऐप चलाया, फिर लिखा कि वास्तव में नेटवर्क पर क्या दिखाई दिया और चीजों में कितना समय लगा। आकार **सामान्य वेब संपीड़न के बाद** रिपोर्ट किए गए हैं, क्योंकि यह कच्चे स्रोत गणनाओं की तुलना में लोगों द्वारा वास्तव में डाउनलोड की जाने वाली सामग्री के करीब है।
|
|
119
|
+
|
|
120
|
+
- **अंतर्राष्ट्रीयकरण पुस्तकालय आकार**: बंडलिंग, ट्री-शेकिंग और मिनिफिकेशन के बाद, i18n पुस्तकालय का आकार एक खाली घटक में प्रदाताओं (providers) + कंपोजेबल्स (composables) कोड का आकार है। इसमें अनुवाद फ़ाइलों की लोडिंग शामिल नहीं है। यह उत्तर देता है कि आपकी सामग्री चित्र में आने से पहले पुस्तकालय कितना "महंगा" है।
|
|
121
|
+
|
|
122
|
+
- **प्रति पृष्ठ JavaScript**: प्रत्येक बेंचमार्क रूट के लिए, ब्राउज़र उस विज़िट के लिए कितना स्क्रिप्ट खींचता है, सूट के पृष्ठों (और लोकेल्स में) में औसत। भारी पृष्ठ धीमे पृष्ठ होते हैं।
|
|
123
|
+
|
|
124
|
+
- **अन्य लोकेल्स से लीकेज (Leakage)**: यह उसी पृष्ठ की सामग्री है लेकिन दूसरी भाषा में जो ऑडिट किए गए पृष्ठ में गलती से लोड हो जाएगी। यह सामग्री अनावश्यक है और इससे बचा जाना चाहिए (उदा: `/en/about` पृष्ठ बंडल में `/fr/about` पृष्ठ सामग्री)।
|
|
125
|
+
|
|
126
|
+
- **अन्य रूट्स से लीकेज**: ऐप में **अन्य स्क्रीन** के लिए भी यही विचार: क्या उनकी प्रतिलिपि तब आ रही है जब आपने केवल एक पृष्ठ खोला है (उदा: `/en/contact` पृष्ठ बंडल में `/en/about` पृष्ठ सामग्री)। एक उच्च स्कोर कमजोर विभाजन या अत्यधिक व्यापक बंडलों का संकेत देता है।
|
|
127
|
+
|
|
128
|
+
- **औसत घटक बंडल आकार**: सामान्य UI टुकड़ों को एक विशाल ऐप नंबर के अंदर छिपाने के बजाय **एक बार में एक** मापा जाता है। यह दिखाता है कि क्या अंतर्राष्ट्रीयकरण चुपचाप रोजमर्रा के घटकों को फुलाता है। उदाहरण के लिए, यदि आपका घटक फिर से रेंडर होता है, तो यह मेमोरी से वह सारा डेटा लोड करेगा। किसी भी घटक के साथ एक विशाल JSON संलग्न करना अप्रयुक्त डेटा के एक बड़े स्टोर को जोड़ने जैसा है जो आपके घटकों के प्रदर्शन को धीमा कर देगा।
|
|
129
|
+
|
|
130
|
+
- **भाषा स्विच प्रतिक्रियाशीलता**: मैं ऐप के अपने नियंत्रण का उपयोग करके भाषा बदलता हूं और समय मापता हूं जब तक कि पृष्ठ स्पष्ट रूप से स्विच नहीं हो जाता, जो एक विज़िटर नोटिस करेगा।
|
|
131
|
+
|
|
132
|
+
- **भाषा परिवर्तन के बाद रेंडरिंग कार्य**: एक सूक्ष्म अनुवर्ती: स्विच होने के बाद इंटरफ़ेस ने नई भाषा के लिए फिर से पेंट करने के लिए कितना प्रयास किया। उपयोगी है जब "महसूस किया गया" समय और फ्रेमवर्क लागत अलग-अलग होती है।
|
|
133
|
+
|
|
134
|
+
- **प्रारंभिक पृष्ठ लोड समय**: नेविगेशन से ब्राउज़र द्वारा मेरे द्वारा परीक्षण किए गए परिदृश्यों के लिए पृष्ठ को पूरी तरह से लोड मानने तक। कोल्ड स्टार्ट की तुलना करने के लिए अच्छा है।
|
|
135
|
+
|
|
136
|
+
- **हाइड्रेशन समय (Hydration)**: ग्राहक सर्वर HTML को एक इंटरैक्टिव इंटरफ़ेस में बदलने में कितना समय बिताता है। तालिकाओं में एक डैश का अर्थ है कि उस कार्यान्वयन ने इस बेंचमार्क में एक विश्वसनीय हाइड्रेशन आंकड़ा प्रदान नहीं किया।
|
|
137
|
+
|
|
138
|
+
## विवरण में परिणाम
|
|
139
|
+
|
|
140
|
+
### 1 — बचने के लिए समाधान
|
|
141
|
+
|
|
142
|
+
> Vue पारिस्थितिकी तंत्र में बचने के लिए कोई स्पष्ट समाधान नहीं है।
|
|
143
|
+
|
|
144
|
+
### 2 — स्वीकार्य समाधान
|
|
145
|
+
|
|
146
|
+
**(vue-i18n)** (`vue-i18n@11.4.0`):
|
|
147
|
+
|
|
148
|
+
- **vue-i18n** निस्संदेह Vue के लिए सबसे अधिक उपयोग किया जाने वाला i18n पुस्तकालय है, इसमें बहुत सारी विशेषताएं और एक विशाल पारिस्थितिकी तंत्र है। लेकिन हुड के तहत समाधान काफी भारी है। भले ही vue-i18n संदेशों के लिए लेज़ी लोडिंग को एकीकृत करता है, लेकिन इसमें स्कोपिंग सुविधा की कमी है। एक क्लासिक Vue SPA ऐप के मामले में कोई समस्या नहीं है, लेकिन @nuxt/i18n का उपयोग करने वाले nuxt ऐप के लिए, यह सभी पृष्ठों के संदेशों को एक ही पृष्ठ में शामिल करने की ओर ले जाता है। 10 से अधिक पृष्ठों वाले बड़े nuxt ऐप के लिए, यह वास्तव में समस्याग्रस्त हो सकता है।
|
|
149
|
+
|
|
150
|
+
पैकेज बहुत भारी है (~24.3kb, जो `vue-intlayer` से लगभग 9 गुना है)।
|
|
151
|
+
|
|
152
|
+
**(fluent-vue)** (`fluent-vue@0.5.0`):
|
|
153
|
+
|
|
154
|
+
- **fluent-vue** .ftl प्रारूप के माध्यम से एक अभिनव प्रयास प्रदान करता है। संदेश संगठन महान है, शुरू करना आसान है। लेकिन व्यवहार में, टाइप-सेफ्टी की कमी त्रुटि के जोखिम को बढ़ाती है और डिबग करने में जल्दी से समय लग सकता है। इसके अलावा, वह समाधान एक vite प्लगइन का उपयोग करके संदेशों को लोड करता है जो प्रत्येक पृष्ठ में सभी भाषाओं में सभी सामग्री को लोड करने के लिए मजबूर करता है। इसके अतिरिक्त यह एक अत्यंत भारी समाधान है (~92.7kb, जो `vue-intlayer` से लगभग 34 गुना है)।
|
|
155
|
+
|
|
156
|
+
### 3 — सिफारिशें
|
|
157
|
+
|
|
158
|
+
**(Intlayer)** (`vue-intlayer@8.7.12`):
|
|
159
|
+
|
|
160
|
+
मैं निष्पक्षता के लिए व्यक्तिगत रूप से `vue-intlayer` का न्याय नहीं करूँगा, क्योंकि यह मेरा अपना समाधान है।
|