@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.
Files changed (182) hide show
  1. package/docs/ar/benchmark/index.md +0 -3
  2. package/docs/ar/benchmark/nextjs.md +15 -6
  3. package/docs/ar/benchmark/solid.md +155 -0
  4. package/docs/ar/benchmark/svelte.md +148 -0
  5. package/docs/ar/benchmark/tanstack.md +12 -3
  6. package/docs/ar/benchmark/vue.md +160 -0
  7. package/docs/ar/configuration.md +16 -12
  8. package/docs/ar/dictionary/content_file.md +51 -1
  9. package/docs/ar/plugins/sync-po.md +0 -21
  10. package/docs/bn/configuration.md +16 -12
  11. package/docs/cs/configuration.md +16 -12
  12. package/docs/de/benchmark/index.md +0 -3
  13. package/docs/de/benchmark/nextjs.md +15 -6
  14. package/docs/de/benchmark/solid.md +155 -0
  15. package/docs/de/benchmark/svelte.md +148 -0
  16. package/docs/de/benchmark/tanstack.md +12 -3
  17. package/docs/de/benchmark/vue.md +160 -0
  18. package/docs/de/configuration.md +16 -12
  19. package/docs/de/dictionary/content_file.md +52 -2
  20. package/docs/de/plugins/sync-po.md +0 -22
  21. package/docs/en/benchmark/nextjs.md +11 -2
  22. package/docs/en/benchmark/solid.md +22 -4
  23. package/docs/en/benchmark/svelte.md +17 -5
  24. package/docs/en/benchmark/tanstack.md +18 -3
  25. package/docs/en/benchmark/vue.md +17 -11
  26. package/docs/en/configuration.md +16 -13
  27. package/docs/en/dictionary/content_file.md +51 -1
  28. package/docs/en/plugins/sync-po.md +0 -21
  29. package/docs/en-GB/benchmark/index.md +0 -3
  30. package/docs/en-GB/benchmark/nextjs.md +15 -6
  31. package/docs/en-GB/benchmark/solid.md +155 -0
  32. package/docs/en-GB/benchmark/svelte.md +148 -0
  33. package/docs/en-GB/benchmark/tanstack.md +12 -3
  34. package/docs/en-GB/benchmark/vue.md +160 -0
  35. package/docs/en-GB/configuration.md +15 -11
  36. package/docs/en-GB/dictionary/content_file.md +51 -1
  37. package/docs/en-GB/plugins/sync-po.md +0 -21
  38. package/docs/es/benchmark/index.md +0 -3
  39. package/docs/es/benchmark/nextjs.md +15 -6
  40. package/docs/es/benchmark/solid.md +155 -0
  41. package/docs/es/benchmark/svelte.md +148 -0
  42. package/docs/es/benchmark/tanstack.md +12 -3
  43. package/docs/es/benchmark/vue.md +160 -0
  44. package/docs/es/configuration.md +16 -12
  45. package/docs/es/dictionary/content_file.md +51 -1
  46. package/docs/es/plugins/sync-po.md +0 -21
  47. package/docs/fr/benchmark/index.md +0 -3
  48. package/docs/fr/benchmark/nextjs.md +15 -6
  49. package/docs/fr/benchmark/solid.md +155 -0
  50. package/docs/fr/benchmark/svelte.md +148 -0
  51. package/docs/fr/benchmark/tanstack.md +12 -3
  52. package/docs/fr/benchmark/vue.md +160 -0
  53. package/docs/fr/configuration.md +16 -12
  54. package/docs/fr/dictionary/content_file.md +51 -1
  55. package/docs/fr/plugins/sync-po.md +0 -21
  56. package/docs/hi/benchmark/nextjs.md +15 -6
  57. package/docs/hi/benchmark/solid.md +155 -0
  58. package/docs/hi/benchmark/svelte.md +148 -0
  59. package/docs/hi/benchmark/tanstack.md +12 -3
  60. package/docs/hi/benchmark/vue.md +160 -0
  61. package/docs/hi/configuration.md +16 -12
  62. package/docs/hi/dictionary/content_file.md +51 -1
  63. package/docs/hi/plugins/sync-po.md +0 -21
  64. package/docs/id/benchmark/index.md +0 -3
  65. package/docs/id/benchmark/nextjs.md +15 -6
  66. package/docs/id/benchmark/solid.md +155 -0
  67. package/docs/id/benchmark/svelte.md +148 -0
  68. package/docs/id/benchmark/tanstack.md +12 -3
  69. package/docs/id/benchmark/vue.md +160 -0
  70. package/docs/id/configuration.md +16 -12
  71. package/docs/id/dictionary/content_file.md +51 -1
  72. package/docs/id/plugins/sync-po.md +0 -21
  73. package/docs/it/benchmark/index.md +1 -4
  74. package/docs/it/benchmark/nextjs.md +15 -6
  75. package/docs/it/benchmark/solid.md +155 -0
  76. package/docs/it/benchmark/svelte.md +148 -0
  77. package/docs/it/benchmark/tanstack.md +12 -3
  78. package/docs/it/benchmark/vue.md +160 -0
  79. package/docs/it/configuration.md +16 -12
  80. package/docs/it/dictionary/content_file.md +51 -1
  81. package/docs/it/plugins/sync-po.md +0 -21
  82. package/docs/ja/benchmark/index.md +5 -5
  83. package/docs/ja/benchmark/nextjs.md +15 -6
  84. package/docs/ja/benchmark/solid.md +155 -0
  85. package/docs/ja/benchmark/svelte.md +148 -0
  86. package/docs/ja/benchmark/tanstack.md +12 -3
  87. package/docs/ja/benchmark/vue.md +160 -0
  88. package/docs/ja/configuration.md +16 -12
  89. package/docs/ja/dictionary/content_file.md +50 -2
  90. package/docs/ja/intlayer_with_nextjs_no_locale_path.md +4 -3
  91. package/docs/ja/plugins/sync-po.md +0 -21
  92. package/docs/ko/benchmark/nextjs.md +15 -6
  93. package/docs/ko/benchmark/solid.md +155 -0
  94. package/docs/ko/benchmark/svelte.md +148 -0
  95. package/docs/ko/benchmark/tanstack.md +12 -3
  96. package/docs/ko/benchmark/vue.md +160 -0
  97. package/docs/ko/configuration.md +16 -12
  98. package/docs/ko/dictionary/content_file.md +51 -1
  99. package/docs/ko/intlayer_with_nextjs_no_locale_path.md +3 -2
  100. package/docs/ko/plugins/sync-po.md +0 -21
  101. package/docs/nl/configuration.md +16 -12
  102. package/docs/pl/benchmark/index.md +0 -3
  103. package/docs/pl/benchmark/nextjs.md +15 -6
  104. package/docs/pl/benchmark/solid.md +155 -0
  105. package/docs/pl/benchmark/svelte.md +148 -0
  106. package/docs/pl/benchmark/tanstack.md +12 -3
  107. package/docs/pl/benchmark/vue.md +160 -0
  108. package/docs/pl/configuration.md +16 -12
  109. package/docs/pl/dictionary/content_file.md +51 -1
  110. package/docs/pl/plugins/sync-po.md +0 -21
  111. package/docs/pt/benchmark/index.md +0 -3
  112. package/docs/pt/benchmark/nextjs.md +16 -7
  113. package/docs/pt/benchmark/solid.md +155 -0
  114. package/docs/pt/benchmark/svelte.md +148 -0
  115. package/docs/pt/benchmark/tanstack.md +13 -4
  116. package/docs/pt/benchmark/vue.md +160 -0
  117. package/docs/pt/configuration.md +16 -12
  118. package/docs/pt/dictionary/content_file.md +51 -1
  119. package/docs/pt/plugins/sync-po.md +0 -21
  120. package/docs/ru/benchmark/nextjs.md +15 -6
  121. package/docs/ru/benchmark/solid.md +155 -0
  122. package/docs/ru/benchmark/svelte.md +148 -0
  123. package/docs/ru/benchmark/tanstack.md +12 -3
  124. package/docs/ru/benchmark/vue.md +160 -0
  125. package/docs/ru/configuration.md +16 -12
  126. package/docs/ru/dictionary/content_file.md +52 -2
  127. package/docs/ru/plugins/sync-po.md +0 -21
  128. package/docs/tr/benchmark/index.md +0 -3
  129. package/docs/tr/benchmark/nextjs.md +15 -6
  130. package/docs/tr/benchmark/solid.md +155 -0
  131. package/docs/tr/benchmark/svelte.md +148 -0
  132. package/docs/tr/benchmark/tanstack.md +12 -3
  133. package/docs/tr/benchmark/vue.md +160 -0
  134. package/docs/tr/configuration.md +16 -12
  135. package/docs/tr/dictionary/content_file.md +51 -1
  136. package/docs/tr/plugins/sync-po.md +0 -21
  137. package/docs/uk/benchmark/nextjs.md +15 -6
  138. package/docs/uk/benchmark/solid.md +155 -0
  139. package/docs/uk/benchmark/svelte.md +148 -0
  140. package/docs/uk/benchmark/tanstack.md +12 -3
  141. package/docs/uk/benchmark/vue.md +160 -0
  142. package/docs/uk/configuration.md +16 -12
  143. package/docs/uk/dictionary/content_file.md +51 -1
  144. package/docs/uk/plugins/sync-po.md +0 -21
  145. package/docs/ur/configuration.md +16 -12
  146. package/docs/vi/benchmark/index.md +0 -3
  147. package/docs/vi/benchmark/nextjs.md +15 -6
  148. package/docs/vi/benchmark/solid.md +155 -0
  149. package/docs/vi/benchmark/svelte.md +148 -0
  150. package/docs/vi/benchmark/tanstack.md +12 -3
  151. package/docs/vi/benchmark/vue.md +160 -0
  152. package/docs/vi/configuration.md +16 -12
  153. package/docs/vi/dictionary/content_file.md +51 -1
  154. package/docs/vi/intlayer_with_nextjs_15.md +10 -57
  155. package/docs/vi/plugins/sync-po.md +0 -21
  156. package/docs/zh/benchmark/nextjs.md +15 -6
  157. package/docs/zh/benchmark/solid.md +155 -0
  158. package/docs/zh/benchmark/svelte.md +148 -0
  159. package/docs/zh/benchmark/tanstack.md +12 -3
  160. package/docs/zh/benchmark/vue.md +160 -0
  161. package/docs/zh/configuration.md +16 -12
  162. package/docs/zh/dictionary/content_file.md +51 -3
  163. package/docs/zh/plugins/sync-po.md +0 -21
  164. package/frequent_questions/ar/intlayerNode.md +3 -3
  165. package/frequent_questions/de/intlayerNode.md +3 -3
  166. package/frequent_questions/en/intlayerNode.md +3 -3
  167. package/frequent_questions/en-GB/intlayerNode.md +3 -3
  168. package/frequent_questions/es/intlayerNode.md +3 -3
  169. package/frequent_questions/fr/intlayerNode.md +3 -3
  170. package/frequent_questions/hi/intlayerNode.md +3 -3
  171. package/frequent_questions/id/intlayerNode.md +3 -3
  172. package/frequent_questions/it/intlayerNode.md +3 -3
  173. package/frequent_questions/ja/intlayerNode.md +3 -3
  174. package/frequent_questions/ko/intlayerNode.md +3 -3
  175. package/frequent_questions/pl/intlayerNode.md +3 -3
  176. package/frequent_questions/pt/intlayerNode.md +3 -3
  177. package/frequent_questions/ru/intlayerNode.md +3 -3
  178. package/frequent_questions/tr/intlayerNode.md +3 -3
  179. package/frequent_questions/uk/intlayerNode.md +3 -3
  180. package/frequent_questions/vi/intlayerNode.md +3 -3
  181. package/frequent_questions/zh/intlayerNode.md +3 -3
  182. package/package.json +8 -8
@@ -30,6 +30,3 @@ Benchmark Bloom هي مجموعة لقياس الأداء تقيس التأثي
30
30
  - [**Vue Benchmark Report**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/vue.md)
31
31
  - [**Solid Benchmark Report**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/solid.md)
32
32
  - [**Svelte Benchmark Report**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/svelte.md)
33
- - [**Vue Benchmark Report**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/vue.md)
34
- - [**Solid Benchmark Report**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/solid.md)
35
- - [**Svelte Benchmark Report**](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/svelte.md)
@@ -61,6 +61,13 @@ history:
61
61
 
62
62
  يحاول Intlayer التحسين عبر هذه الأبعاد.
63
63
 
64
+ ## TL;DR
65
+
66
+ - **Intlayer** و **next-translate**: أفضل الخيارات لأداء Next.js، حيث يقدمان أصغر حجم وأفضل دعم للرندرة الستاتيكية.
67
+ - **next-intl**: الخيار الأكثر رواجًا ولكنه ثقيل ومعقد في التحسين للتطبيقات الكبيرة.
68
+ - **next-i18next**: شائع وغني بالإضافات، ولكنه يأتي بحجم حزمة كبير (~3 أضعاف Intlayer).
69
+ - **تجنب**: **gt-next** و **lingo.dev** بسبب مشكلات الأداء الخطيرة، والارتباط بالبائع (vendor lock-in)، والأخطاء التي تعطل البناء.
70
+
64
71
  ## اختبر تطبيقك
65
72
 
66
73
  لتسليط الضوء على هذه المشكلات، قمت ببناء ماسح ضوئي مجاني يمكنك تجربته [هنا](https://intlayer.org/i18n-seo-scanner).
@@ -99,14 +106,14 @@ history:
99
106
  في هذه المقارنة، قمنا بمقارنة المكتبات التالية:
100
107
 
101
108
  - `Base App` (بدون مكتبة i18n)
102
- - `next-intlayer` (v8.7.5)
109
+ - `next-intlayer` (v8.7.12)
103
110
  - `next-i18next` (v16.0.5)
104
111
  - `next-intl` (v4.9.1)
105
112
  - `@lingui/core` (v5.3.0)
106
113
  - `next-translate` (v3.1.2)
107
114
  - `next-international` (v1.3.1)
108
115
  - `@inlang/paraglide-js` (v2.15.1)
109
- - `tolgee` (v7.0.0)
116
+ - `@tolgee/react` (v7.0.0)
110
117
  - `@lingo.dev/compiler` (v0.4.0)
111
118
  - `wuchale` (v0.22.11)
112
119
  - `gt-next` (v6.16.5)
@@ -161,10 +168,10 @@ history:
161
168
 
162
169
  **(General Translation)** (`gt-next@6.16.5`):
163
170
 
164
- - لتطبيق بحجم 110 كيلوبايت، تضيف `gt-react` أكثر من 440 كيلوبايت إضافية.
171
+ - لتطبيق بحجم 110 كيلوبايت، تضيف `gt-next` أكثر من 440 كيلوبايت إضافية.
165
172
  - `Quota Exceeded, please upgrade your plan` (تم تجاوز الحصة، يرجى ترقية خطتك) في أول بناء للمشروع.
166
173
  - لا يتم رندرة الترجمات؛ أحصل على خطأ `Error: <T> used on the client-side outside of <GTProvider>` ، والذي يبدو أنه خلل في المكتبة.
167
- - أثناء تنفيذ **gt-tanstack-start-react** ، صادفت أيضًا [مشكلة](https://github.com/generaltranslation/gt/issues/1210#event-24510646961) في المكتبة: `does not provide an export named 'printAST' - @formatjs/icu-messageformat-parser` ، والتي كانت تؤدي إلى تعطل التطبيق. بعد الإبلاغ عن هذه المشكلة، قام المطور بإصلاحها خلال 24 ساعة.
174
+ - أثناء تنفيذ **gt-next** ، صادفت أيضًا [مشكلة](https://github.com/generaltranslation/gt/issues/1210#event-24510646961) في المكتبة: `does not provide an export named 'printAST' - @formatjs/icu-messageformat-parser` ، والتي كانت تؤدي إلى تعطل التطبيق. بعد الإبلاغ عن هذه المشكلة، قام المطور بإصلاحها خلال 24 ساعة.
168
175
  - المكتبة تمنع الرندرة الستاتيكية لصفحات Next.js.
169
176
 
170
177
  **(Lingo.dev)** (`@lingo.dev/compiler@0.4.0`):
@@ -186,9 +193,11 @@ history:
186
193
  أنا شخصياً لا أحب الاضطرار إلى إعادة إنشاء ملفات JS قبل كل رفع للكود، مما يخلق خطراً دائماً لتضارب الدمج (merge conflicts). كما يبدو أن الأداة تركز على Vite أكثر من Next.js.
187
194
  أخيرًا، مقارنة بالحلول الأخرى، لا يستخدم Paraglide مخزنًا (مثل React context) لجلب اللغة الحالية لرندرة المحتوى. لكل عقدة يتم تحليلها، سيطلب اللغة من localStorage / cookie وما إلى ذلك. يؤدي ذلك إلى تنفيذ منطق غير ضروري يؤثر على تفاعلية المكونات.
188
195
 
196
+ > ملاحظة حول paraglide: يقوم الحل بحقن الكود في قاعدة الكود الخاصة بك للاستيراد، ونتيجة لذلك يكون مقياس 'حجم المكتبة' في تقرير المقارنة 0 تقريبًا. توليد الكود أمر جيد، لأن الدالة المستخدمة ستتضمن فقط المنطق الضروري (البادئة الكاملة مقابل عدم وجود بادئة، الكوكيز مقابل التخزين، إلخ). في المقابل، يقوم Intlayer بتنفيذ هذا التصفية عبر حقن متغيرات البيئة في البناء لإجبار المجمع على إزالة المحتوى حسب المنطق. بفضل هذا، ينتهي الأمر بـ paraglide و intlayer كحلول أخف بـ 6 إلى 10 مرات من i18next أو next-intl.
197
+
189
198
  ### 3 — حلول مقبولة
190
199
 
191
- **(Tolgee)** (`tolgee@7.0.0`):
200
+ **(Tolgee)** (`@tolgee/react@7.0.0`):
192
201
 
193
202
  يعالج `Tolgee` العديد من المشكلات المذكورة سابقًا. وجدت صعوبة في اعتماده أكثر من الأدوات المماثلة. لا يوفر سلامة الأنواع (type safety) ، مما يجعل اكتشاف المفاتيح المفقودة وقت البناء أكثر صعوبة. اضطررت لتغليف دوال Tolgee بدوالي الخاصة لإضافة ميزة اكتشاف المفاتيح المفقودة.
194
203
 
@@ -216,7 +225,7 @@ history:
216
225
 
217
226
  خيار `next-translate` هو توصيتي الرئيسية إذا كنت تحب واجهة برمجية بأسلوب `t()`. إنه أنيق عبر `next-translate-plugin` ، حيث يحمل مساحات الأسماء من خلال `getStaticProps` مع مجمع Webpack / Turbopack. إنه أيضًا الخيار الأخف هنا (~2.5 كيلوبايت). بالنسبة لمساحات الأسماء، فإن تحديدها لكل صفحة أو مسار في الإعدادات مدروس جيدًا وأسهل في الصيانة من البدائل الرئيسية مثل **next-intl** أو **next-i18next**. في الإصدار `3.1.2` ، لاحظت أن الرندرة الستاتيكية لم تعمل؛ حيث تراجع Next.js إلى الرندرة الديناميكية.
218
227
 
219
- **(Intlayer)** (`next-intlayer@8.7.5`):
228
+ **(Intlayer)** (`next-intlayer@8.7.12`):
220
229
 
221
230
  لن أحكم شخصيًا على `next-intlayer` من أجل الموضوعية، لأنه حلي الخاص.
222
231
 
@@ -0,0 +1,155 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-21
4
+ title: أفضل حل i18n لـ Solid في عام 2026 - تقرير قياسي
5
+ description: قارن بين مكتبات تدويل Solid (i18n) مثل solid-primitives وsolid-i18next وIntlayer. تقرير أداء مفصل حول حجم الحزمة والتسرب والتفاعل.
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
+ # مكتبات i18n لـ Solid — تقرير التقييم القياسي 2026
26
+
27
+ هذه الصفحة هي تقرير تقييم قياسي لحلول i18n على Solid.
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. الخطر الرئيسي هو شحن محتوى غير ضروري: ترجمات لصفحات أخرى ولغات أخرى في حزمة مسار واحد.
53
+
54
+ مع نمو تطبيقك، يمكن أن تؤدي هذه المشكلة بسرعة إلى تضخم ملفات JavaScript المرسلة إلى العميل وإبطاء التنقل.
55
+
56
+ في الممارسة العملية، بالنسبة للتطبيقات الأقل تحسينًا، يمكن أن ينتهي الأمر بصفحة مدولة لتكون أثقل بعدة مرات من النسخة بدون i18n.
57
+
58
+ التأثير الآخر هو على تجربة المطور (DX): كيفية التصريح عن المحتوى، والأنواع، وتنظيم فضاء الأسماء، والتحميل الديناميكي، والتفاعل عند تغيير اللغة.
59
+
60
+ ## TL;DR
61
+
62
+ - **Intlayer**: الخيار الموصى به لتطبيقات Solid المهنية التي تحتاج إلى ميزات متقدمة وتحسين (v8.7.12).
63
+ - **@solid-primitives/i18n**: بديل خفيف الوزن ممتاز للمشاريع البسيطة، على الرغم من افتقاره إلى ميزات متقدمة مثل التحميل الكسول (lazy loading).
64
+ - **solid-i18next**: خيار معياري ولكنه ثقيل (~4.7 أضعاف 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` هو الخيار الأكثر شيوعًا لأنه كان من أوائل الحلول التي لبت احتياجات i18n لتطبيقات JavaScript. كما أنه يحتوي على مجموعة واسعة من المكونات الإضافية للمجتمع لمشكلات محددة.
129
+
130
+ الحزمة ثقيلة (~14.6kb، أي حوالي 4.7 أضعاف `solid-intlayer`).
131
+
132
+ ومع ذلك، فإنه يشترك في نفس العيوب الرئيسية مثل الحلول المبنية على `t('a.b.c')`: التحسينات ممكنة ولكنها تستهلك الكثير من الوقت، والمشاريع الكبيرة تكتنفها مخاطر الممارسات السيئة (فضاءات الأسماء + التحميل الديناميكي + الأنواع).
133
+
134
+ **(@solid-primitives/i18n)** (`@solid-primitives/i18n@2.2.1`):
135
+
136
+ مكون Solid البدائي خفيف الوزن وفعال للغاية. أوصي بهذا الحل للمشاريع الخفيفة، ولكنه قد يفتقر بسرعة إلى الميزات للحلول المهنية بما في ذلك إدارة ملفات تعريف الارتباط، وإعادة توجيه الوكيل، والمنسقات وما إلى ذلك.
137
+ كما يفتقد إلى التحميل الكسول وتقسيم فضاءات الأسماء لتحسين حجم الصفحة.
138
+
139
+ **(Paraglide)** (`@inlang/paraglide-js@2.17.0`):
140
+
141
+ يقدم `Paraglide` نهجًا مبتكرًا ومدروسًا جيدًا. ومع ذلك، في هذا التقييم القياسي، لم يعمل tree-shaking الذي تعلن عنه شركتهم مع التنفيذ الخاص بي. سير العمل و DX أيضًا أكثر تعقيدًا من الخيارات الأخرى.
142
+ شخصيًا، لا أحب الاضطرار إلى إعادة إنشاء ملفات JS قبل كل عملية push، مما يخلق خطرًا مستمرًا لتعارض الدمج عبر طلبات السحب.
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` في نظري نمطًا مضادًا (anti-pattern). كما أنه يضيف تعقيدًا يمكن تجنبه وعبئًا في تنفيذ JavaScript (حتى لو كان بالكاد يلاحظ).
@@ -0,0 +1,148 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-21
4
+ title: أفضل حل i18n لـ Svelte في عام 2026 - تقرير قياسي
5
+ description: قارن بين مكتبات تدويل Svelte (i18n) مثل svelte-i18n وParaglide وIntlayer. تقرير أداء مفصل حول حجم الحزمة والتسرب والتفاعل.
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
+ # مكتبات i18n لـ Svelte — تقرير التقييم القياسي 2026
26
+
27
+ هذه الصفحة هي تقرير تقييم قياسي لحلول i18n على Svelte.
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. الخطر الرئيسي هو شحن محتوى غير ضروري: ترجمات لصفحات أخرى ولغات أخرى في حزمة مسار واحد.
53
+
54
+ مع نمو تطبيقك، يمكن أن تؤدي هذه المشكلة بسرعة إلى تضخم ملفات JavaScript المرسلة إلى العميل وإبطاء التنقل.
55
+
56
+ في الممارسة العملية، بالنسبة للتطبيقات الأقل تحسينًا، يمكن أن ينتهي الأمر بصفحة مدولة لتكون أثقل بعدة مرات من النسخة بدون i18n.
57
+
58
+ التأثير الآخر هو على تجربة المطور (DX): كيفية التصريح عن المحتوى، والأنواع، وتنظيم فضاء الأسماء، والتحميل الديناميكي، والتفاعل عند تغيير اللغة.
59
+
60
+ ## TL;DR
61
+
62
+ - **Intlayer**: الخيار الأكثر كفاءة في الأداء (v8.7.12) مع أصغر بصمة (footprint).
63
+ - **Paraglide**: منافس قوي للتخلص من الكود غير المستخدم (tree-shaking) ولكنه يمتلك تجربة مطور أكثر تعقيدًا وعبئًا في التفاعل.
64
+ - **svelte-i18n**: كامل ومعياري لـ Svelte، ولكنه يحمل وزن حزمة أكبر بكثير (~7 أضعاف 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، يعمل التخلص من الكود غير المستخدم (tree-shaking) الذي تعلن عنه شركتهم كما هو متوقع، وهو أمر رائع.
127
+ ولكن في حالة React + TanStack Start، لم يعمل tree-shaking كما هو متوقع، والأمر نفسه بالنسبة لـ Next.js. ومع ذلك، فإن استخدام Paraglide في مشروع Svelte و TanStack Start يستحق التدقيق.
128
+ سير العمل و DX أيضًا أكثر تعقيدًا من الخيارات الأخرى.
129
+ شخصيًا، لا أحب الاضطرار إلى إعادة إنشاء ملفات JS قبل كل عملية push، مما يخلق خطرًا مستمرًا لتعارض الدمج عبر طلبات السحب (PRs). يبدو أن الأداة تركز أيضًا على Vite أكثر من Next.js.
130
+ أخيرًا، مقارنة بالحلول الأخرى، لا يستخدم Paraglide مخزنًا (مثل Svelte store) لاسترداد اللغة الحالية لريندر المحتوى. لكل عقدة يتم تحليلها، سيطلب اللغة من localStorage / cookie وما إلى ذلك. يؤدي هذا إلى تنفيذ منطق غير ضروري يؤثر على تفاعل المكونات.
131
+
132
+ > ملاحظة حول paraglide: يقوم الحل بحقن الكود في قاعدة الكود الخاصة بك للاستيراد؛ ونتيجة لذلك، فإن مقياس "حجم المكتبة" في تقرير التقييم القياسي هو 0 تقريبًا. يعد إنشاء الكود (Code generation) أمرًا جيدًا، لأن الوظيفة المستخدمة ستتضمن فقط المنطق الضروري (بادئة في كل مكان مقابل لا بادئة، ملف تعريف ارتباط مقابل تخزين، إلخ). بالمقارنة، تقوم Intlayer بإجراء هذا التصفية عبر حقن متغيرات البيئة أثناء البناء لإجبار أداة التجميع على التخلص من الكود غير المستخدم للمحتوى اعتمادًا على المنطق. بفضل هذا، ينتهي الأمر بـ paraglide و intlayer كحلول أخف بـ 6 إلى 10 مرات من i18next أو next-intl.
133
+
134
+ **(svelte-i18n)** (`svelte-i18n@3.4.0`):
135
+
136
+ يلبي هذا الحل جميع احتياجات i18n في مشروع Svelte. ولكن كما هو الحال مع i18next أو غيرها من حلول i18n الرئيسية، فهي ثقيلة بعض الشيء (~15.9kb، أي حوالي 7 أضعاف `svelte-intlayer`).
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` في نظري نمطًا مضادًا (anti-pattern). كما أنه يضيف تعقيدًا يمكن تجنبه وعبئًا في تنفيذ JavaScript (حتى لو كان بالكاد يلاحظ).
@@ -57,6 +57,13 @@ history:
57
57
 
58
58
  التأثير الآخر هو على تجربة المطور (DX): كيفية الإعلان عن المحتوى، والأنواع، وتنظيم مساحة الأسماء، والتحميل الديناميكي، والتفاعلية عند تغيير اللغة.
59
59
 
60
+ ## TL;DR
61
+
62
+ - **Intlayer**: يوفر أفضل أداء وأصغر حجم للحزمة (v8.7.12) لـ TanStack Start.
63
+ - **react-i18next** و **use-intl**: بدائل ناضجة مع أنظمة بيئية كبيرة، ولكنها أثقل بكثير وأكثر تعقيدًا في التحسين.
64
+ - **Paraglide**: فكرة مبتكرة لـ tree-shaking لكنها لا تعمل في الممارسة العملية. تجربة مطور (DX) معقدة وعبء تفاعلي في TanStack Start.
65
+ - **تجنب**: **General Translation (GT)** و **Lingo.dev** بسبب مشكلات الأداء الخطيرة، وقيود حصة الذكاء الاصطناعي، والارتباط بالبائع (vendor lock-in).
66
+
60
67
  ## اختبر تطبيقك
61
68
 
62
69
  لاكتشاف مشكلات تسرب i18n بسرعة، قمت بإعداد ماسح ضوئي مجاني متاح [هنا](https://intlayer.org/i18n-seo-scanner).
@@ -87,12 +94,12 @@ history:
87
94
  في هذه المقارنة، قمنا بمقارنة المكتبات التالية:
88
95
 
89
96
  - `Base App` (بدون مكتبة i18n)
90
- - `react-intlayer` (v8.7.5-canary.0)
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
- - `tolgee` (v7.0.0)
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 @@ history:
150
157
 
151
158
  يقدم `Paraglide` نهجًا مبتكرًا ومدروسًا جيدًا. ومع ذلك، في هذه المقارنة، لم تعمل ميزة Tree-shaking التي تروج لها شركتهم في تنفيذ Next.js أو TanStack Start. كما أن سير العمل وتجربة المطور أكثر تعقيدًا من الخيارات الأخرى. أنا شخصياً لست معجباً بضرورة إعادة إنشاء ملفات JS قبل كل رفع للكود، مما يخلق خطراً دائماً لتضارب الدمج بين المطورين.
152
159
 
153
- **(Tolgee)** (`tolgee@7.0.0`):
160
+ > ملاحظة حول paraglide: يقوم هذا الحل بحقن الكود في قاعدة الكود الخاصة بك لعمليات الاستيراد، ونتيجة لذلك فإن مقياس 'lib size' في تقرير المقارنة هو 0 تقريبًا. توليد الكود (Code generation) أمر جيد، لأن الدالة المستخدمة ستشمل فقط المنطق الضروري (البادئة للكل مقابل عدم وجود بادئة، الكوكيز مقابل التخزين، إلخ). في المقابل، يقوم Intlayer بمعالجة هذا الفلترة باستخدام حقن متغيرات البيئة في البناء لإجبار أداة التجميع (bundler) على عمل tree-shake للمحتوى اعتمادًا على المنطق. بفضل هذا، ينتهي الأمر بـ paraglide و intlayer بكونهما حلولًا أخف بـ 6 إلى 10 مرات من i18next أو next-intl.
161
+
162
+ **(Tolgee)** (`@tolgee/react@7.0.0`):
154
163
 
155
164
  يعالج `Tolgee` العديد من المشكلات المذكورة سابقًا. وجدت صعوبة في البدء معه أكثر من الأدوات الأخرى ذات التوجهات المشابهة. لا يوفر سلامة الأنواع، مما يجعل اكتشاف المفاتيح المفقودة وقت البناء أمراً صعباً للغاية. اضطررت لتغليف واجهات برمجة تطبيقات Tolgee بواجهاتي الخاصة لإضافة ميزة اكتشاف المفاتيح المفقودة.
156
165
 
@@ -0,0 +1,160 @@
1
+ ---
2
+ createdAt: 2026-04-20
3
+ updatedAt: 2026-04-21
4
+ title: أفضل حل i18n لـ Vue في عام 2026 - تقرير قياسي
5
+ description: قارن بين مكتبات تدويل Vue (i18n) مثل vue-i18n وfluent-vue وIntlayer. تقرير أداء مفصل حول حجم الحزمة والتسرب والتفاعل.
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
+ # مكتبات i18n لـ Vue — تقرير التقييم القياسي 2026
26
+
27
+ هذه الصفحة هي تقرير تقييم قياسي لحلول i18n على Vue.
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. الخطر الرئيسي هو شحن محتوى غير ضروري: ترجمات لصفحات أخرى ولغات أخرى في حزمة مسار واحد.
53
+
54
+ مع نمو تطبيقك، يمكن أن تؤدي هذه المشكلة بسرعة إلى تضخم ملفات JavaScript المرسلة إلى العميل وإبطاء التنقل.
55
+
56
+ في الممارسة العملية، بالنسبة للتطبيقات الأقل تحسينًا، يمكن أن ينتهي الأمر بصفحة مدولة لتكون أثقل بعدة مرات من النسخة بدون i18n.
57
+
58
+ التأثير الآخر هو على تجربة المطور (DX): كيفية التصريح عن المحتوى، والأنواع، وتنظيم فضاء الأسماء، والتحميل الديناميكي، والتفاعل عند تغيير اللغة.
59
+
60
+ ## TL;DR
61
+
62
+ - **Intlayer**: الحل الأخف وزنًا (v8.7.12) مع ميزة النطاق (scoping) والتحميل الديناميكي المدمجة.
63
+ - **vue-i18n**: المعيار الصناعي مع نظام بيئي غني، ولكنه قد يصبح أثقل بكثير ويصعب تحسينه لتقسيم الكود في التطبيقات الكبيرة.
64
+ - **fluent-vue**: تنظيم مبتكر للرسائل ولكنه يفتقر إلى سلامة النوع (type-safety) ويعد حلاً ثقيلًا للغاية.
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)**: هو محتوى نفس الصفحة ولكن بلغة أخرى يتم تحميله بالخطأ في الصفحة التي يتم فحصها. هذا المحتوى غير ضروري ويجب تجنبه (مثلاً: محتوى صفحة `/fr/about` في حزمة صفحة `/en/about`).
125
+
126
+ - **التسرب من المسارات الأخرى**: نفس الفكرة لـ **الشاشات الأخرى** في التطبيق: ما إذا كانت نصوصها مرافقة عندما تفتح صفحة واحدة فقط. (مثلاً: محتوى صفحة `/en/about` في حزمة صفحة `/en/contact`). تشير النتيجة العالية إلى ضعف التقسيم أو الحزم الواسعة جدًا.
127
+
128
+ - **متوسط حجم حزمة المكون**: يتم قياس عناصر واجهة المستخدم الشائعة **واحدًا تلو الآخر** بدلاً من الاختباء داخل رقم تطبيق عملاق واحد. يوضح ما إذا كان التدويل يضخم المكونات اليومية بهدوء. على سبيل المثال، إذا تمت إعادة ريندر المكون الخاص بك، فسيقوم بتحميل كل تلك البيانات من الذاكرة. إرفاق ملف 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** هي بدون منازع مكتبة i18n الأكثر استخدامًا لـ Vue، فهي تحتوي على الكثير من الميزات ونظام بيئي ضخم. ولكن تحت الغطاء، الحل ثقيل نوعًا ما. حتى لو قامت vue-i18n بدمج التحميل الكسول للرسائل، فإنها تفتقر إلى ميزة النطاق (scoping). في حالة تطبيق Vue SPA كلاسيكي، لا توجد مشكلة، ولكن بالنسبة لتطبيق Nuxt، باستخدام @nuxt/i18n، فإنه يؤدي إلى تضمين الرسائل من جميع الصفحات في صفحة واحدة. بالنسبة لتطبيق Nuxt كبير يضم أكثر من 10 صفحات، يمكن أن يصبح الأمر إشكاليًا حقًا.
149
+
150
+ الحزمة ثقيلة جدًا (~24.3kb، أي حوالي 9 أضعاف `vue-intlayer`).
151
+
152
+ **(fluent-vue)** (`fluent-vue@0.5.0`):
153
+
154
+ - **fluent-vue** يقدم محاولة ابتكار من خلال تنسيق .ftl. تنظيم الرسائل رائع، وأسهل في البدء. ولكن في الممارسة العملية، يؤدي نقص سلامة النوع إلى زيادة خطر الخطأ ويمكن أن يصبح استهلاك الوقت في تصحيح الأخطاء سريعًا. علاوة على ذلك، يقوم هذا الحل بتحميل الرسائل باستخدام مكون vite الإضافي الذي يفرض تحميل كل المحتوى بجميع اللغات في كل صفحة. بالإضافة إلى ذلك، هذا حل ثقيل للغاية (~92.7kb، أي حوالي 34 ضعف `vue-intlayer`).
155
+
156
+ ### 3 — التوصيات
157
+
158
+ **(Intlayer)** (`vue-intlayer@8.7.12`):
159
+
160
+ لن أحكم شخصيًا على `vue-intlayer` من أجل الموضوعية، لأنه الحل الخاص بي.