@intlayer/docs 9.4.2 → 9.4.3

package/blog/ar/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: هل أصبحت مكتبة vue-i18n قديمة في عام 2026؟
+description: ظلت vue-i18n المعيار الأساسي لـ Vue وNuxt لعقد كامل. لكن في اختباراتنا الميدانية، تبين أنها أثقل بيئة تشغيل للتدويل على الويب. نوضح الأسباب هنا.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - تدويل المواقع
+  - i18n
+  - Vue
+  - Nuxt
+  - حجم الحزمة
+  - مدونة
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# هل أصبحت مكتبة vue-i18n قديمة في عام 2026؟
+
+في مجتمع Vue، قلما تجد مكتبة تحظى بانتشار مماثل لـ `vue-i18n`. قاد تطويرها Kazupon منذ أيام Vue 2، وهي تشكل ركيزة `@nuxtjs/i18n` وتعتبر الخيار الطبيعي لكل من يريد بناء تطبيق Vue متعدد اللغات.
+
+ومع ذلك، أظهرت اختبارات الأداء لعام 2026 مفارقة غير متوقعة: **تبيّن أن `vue-i18n` هي أثقل بيئة تشغيل للتدويل بين كل أطر العمل التي تم قياسها.**
+
+ففي مشروع أساسي خفيف باستخدام Vite + Vue لا يتعدى 31.5 كيلوبايت، أدى إدراج `vue-i18n` إلى رفع متوسط حجم JavaScript في الصفحة إلى **136.4 كيلوبايت**، أي أكثر من 4 أضعاف الحجم الأصلي.
+
+كيف انتهى المطاف بإطار عمل معروف بالخفة إلى حمل مثل هذا العبء الثقيل للتدويل؟ وهل لا يزال نموذج وقت التشغيل التقليدي مقبولاً اليوم؟
+
+<TOC/>
+
+## النقاط الرئيسية
+
+**أثقل بيئة تشغيل تم اختبارها:**
+
+بحجم يبلغ **24.3 كيلوبايت مضغوطة بـ gzip (نحو 83.2 كيلوبايت minified)** قبل إضافة أي ترجمات، تصبح `vue-i18n` أثقل بنحو **9 أضعاف** من محرك `intlayer` (2.7 كيلوبايت).
+
+**زيادة 330% في حمولة الصفحة:**
+
+رفعت `vue-i18n` حجم الصفحة الأساسية من 31.5 كيلوبايت إلى 136.4 كيلوبايت. بينما استقرت Intlayer عند 59.3 كيلوبايت، محققة **حمولة أخف بنسبة 56%**.
+
+**مترجم متخفٍ داخل المتصفح:**
+
+ما لم تضبط أسماء مستعارة (aliases) خاصة في أداة الحزم، ترسل `vue-i18n` افتراضياً مترجم نصوص كاملاً للمتصفح ليقوم بتحليل العبارات لحظياً أثناء التشغيل.
+
+**وتيرة التحديثات:**
+
+شهدت `vue-i18n` قرابة 259 تعديلاً (commit) خلال العام المنصرم، تركزت على إصلاح الأعطال ومواكبة إصدارات Vue.
+
+**غياب الأدوات المتقدمة الرسمية:**
+
+لا يتوفر دعم رسمي لخادم لغة (LSP)، أو خوادم MCP للذكاء الاصطناعي، أو أدوات الترجمة عبر سطر الأوامر.
+
+## الصيانة مقارنة بالحلول الحديثة
+
+| المستودع              | النجوم                                                                                                                                                 | إجمالي التعديلات                                                                                                                                                    | التعديلات / سنة                                                                                                                                                    | آخر تعديل                                                                                                                                    |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlify/vue-i18n`    | [![stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/intlify/vue-i18n?style=for-the-badge&label=%2Fyear)](https://github.com/intlify/vue-i18n/commits)       | [![last](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+الأداء خلال الاثني عشر شهراً الأخيرة:
+
+- `intlify/vue-i18n`: **259 تعديلاً** (صيانة دورية لـ Vue 3 وNuxt).
+- `aymericzip/intlayer`: **4,343 تعديلاً** (تطوير مستمر لتحسينات المترجم وخادم LSP وأدوات الوكلاء الأذكياء).
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+المكتبة العريقة تمنح شعوراً بالاستقرار. لكن تطوير الواجهات الحديثة بات يستند إلى تحويلات شجرة الإعراب (AST) أثناء البناء، والتخلص من الشيفرات الخاملة، والترجمة بالذكاء الاصطناعي. ومن الصعب على البنى المحصورة في وقت التشغيل استيعاب هذه الآليات.
+
+## القياسات في بيئة Vite + Vue
+
+أُجري الاختبار على تطبيق يضم 10 صفحات و10 لغات باستخدام Vite وVue 3:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> تم الاختبار في متصفحات فعلية مع تفعيل ضغط gzip. التفاصيل متوفرة في [توثيق مقارنة أداء Vue](https://intlayer.org/ar/doc/benchmark/vue).
+
+### العبء الأولي للمكتبات
+
+الحجم قبل تضمين ملفات الترجمة:
+
+| المكتبة           | الحجم (gzip) | الحجم المصغر (Minified) |
+| ----------------- | ------------ | ----------------------- |
+| `vue-i18n@11.4.0` | 24.3 KB      | 83.2 KB                 |
+| `intlayer@8.7.12` | **2.7 KB**   | **7.6 KB**              |
+
+محرك تشغيل `vue-i18n` وحده يستهلك **24.3 كيلوبايت (gzip)**، وهو ما يقارب حجم نواة Vue ذاتها. بينما تكتفي Intlayer بـ **2.7 كيلوبايت**.
+
+### حجم الصفحات وتسريب المحتوى
+
+| الإعداد           | متوسط JS / صفحة (gz) | تسريب اللغات | تسريب الصفحات الأخرى | متوسط المكون (gz) |
+| ----------------- | -------------------- | ------------ | -------------------- | ----------------- |
+| الأساس (دون i18n) | 31.5 KB              | 0.0%         | 90.0%                | 0.9 KB            |
+| `vue-i18n`        | **136.4 KB**         | 50.2%        | 90.0%                | 196.0 KB          |
+| Intlayer          | **59.3 KB**          | 51.1%        | **0.0%**             | **6.5 KB**        |
+
+### أهم الملاحظات
+
+**تضخم نسبي مرتفع:**
+
+بما أن حجم Vue المبدئي خفيف جداً (~31 كيلوبايت)، فإن إضافة `vue-i18n` تضاعف حمولة الصفحة بأكثر من أربع مرات.
+
+**تسريب البيانات إلى مسارات أخرى:**
+
+بشكل افتراضي، **90% من الترجمات** التي يستقبلها المسار تخص صفحات أخرى. تلغي Intlayer هذا الهدر كلياً لتبلغ النسبة **0.0%**.
+
+**ضخامة المكونات المعزولة:**
+
+بلغ متوسط حجم المكونات ذات النطاق المحلي نحو 196 كيلوبايت في `vue-i18n` نتيجة تكرار القواميس، مقابل **6.5 كيلوبايت** في Intlayer.
+
+## لماذا تعد vue-i18n ثقيلة؟
+
+### شحن مترجم AST إلى المتصفح
+
+تحتوي `vue-i18n` على مترجم داخلي لتنسيق الرسائل. قواعد الجمع والتبديل تُحول إلى أشجار إعراب (AST) مباشرة في المتصفح أثناء العمل.
+
+لتجنب ذلك، يتطلب الأمر توجيه اسم مستعار في أداة الحزم نحو `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` والترجمة المسبقة عبر `@intlify/unplugin-vue-i18n`. وهو إجراء تتجاهله مشاريع كثيرة.
+
+### منظومة وظائف أحادية
+
+تجمع `vue-i18n` بين محركات التواريخ والأرقام، والرسائل المرتبطة، وجسور Options API القديمة (`$t`, `v-t`)، والوكلاء التفاعليين. حتى إن أردت نصوصاً بسيطة في `<script setup>`، تُحمل المكتبة بكامل ثقلها.
+
+### المفاتيح الديناميكية تمنع الـ Tree-shaking
+
+تفسير مفتاح مثل `"home.hero.title"` في وقت التشغيل يعمي أدوات الحزم عن تحديد النصوص المستعملة فعلياً. فتبقى الترجمات غير المستخدمة داخل الملفات المنشورة.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("home.hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+يستطيع [مترجم Intlayer](https://intlayer.org/ar/doc/compiler) تتبع الخصائص المطلوبة تحديداً واستبعاد ما عداها قبل بناء ملفات العميل. تعرف على المزيد في [تحسين الحزم](https://intlayer.org/ar/doc/concept/bundle-optimization).
+
+## تجربة المطورين
+
+### ملفات منفصلة مقابل التجاور المباشر
+
+في `vue-i18n`، توضع الترجمات في مجلد `locales/` بعيد. أما Intlayer فتتيح وضع ملفات المحتوى بجوار المكونات مباشرة:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="locales/en.json"
+{
+  "hero": {
+    "title": "Ship in every language"
+  }
+}
+```
+
+```json fileName="locales/ar.json"
+{
+  "hero": {
+    "title": "أطلق منتجك بكل اللغات"
+  }
+}
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      en: "Ship in every language",
+      ar: "أطلق منتجك بكل اللغات",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+عند إعادة تسمية أو حذف `Hero.vue`، يتم التعامل مع ملف المحتوى الخاص به بصورة متزامنة.
+
+### الإكمال التلقائي في مواجهة أمان الأنواع الشامل
+
+توفر `DefineLocaleMessage` اقتراحات بناءً على ملف اللغة الأساسية. لكنها تعجز عن رصد النقص في بقية اللغات. فغياب مفتاح من `ar.json` لن يعرقل بناء TypeScript.
+
+في Intlayer، تخضع القواميس لتدقيق حازم. وتفعيل [`strictMode`](https://intlayer.org/ar/doc/concept/configuration) يوقف البناء فوراً إذا كانت هناك ترجمة ناقصة في أي لغة مستهدفة.
+
+### أدوات المحررات والذكاء الاصطناعي
+
+| الأداة                        | `vue-i18n`                 | Intlayer                                                               |
+| ----------------------------- | -------------------------- | ---------------------------------------------------------------------- |
+| **إضافة VS Code**             | إضافات مجتمعية (i18n Ally) | ✅ [إضافة رسمية](https://intlayer.org/ar/doc/vs-code-extension)        |
+| **خادم اللغة (LSP)**          | ❌ غير متوفر               | ✅ [LSP مخصص](https://intlayer.org/ar/doc/lsp)                         |
+| **خادم MCP للذكاء الاصطناعي** | ❌ غير متوفر               | ✅ [خادم MCP مدمج](https://intlayer.org/ar/doc/mcp-server)             |
+| **مهارات الوكلاء (Skills)**   | ❌ غير متوفر               | ✅ [مهارات ذاتية](https://intlayer.org/ar/doc/agent_skills)            |
+| **نظام CMS مرئي**             | ❌ غير متوفر               | ✅ [نظام CMS مفتوح ومجاني](https://intlayer.org/ar/doc/concept/editor) |
+
+## إدارة الترجمات
+
+لا توفر `vue-i18n` أوامر داخلية لإنشاء أو ملء الترجمات. وعادة ما يضطر الفريق لتصدير الملفات إلى منصات مثل Crowdin أو Phrase.
+
+تأتي Intlayer بهذه المزايا مدمجة:
+
+**الإكمال الآلي بالذكاء الاصطناعي محلياً (`intlayer fill`):**
+
+يترجم المفاتيح الناقصة باستخدام مفاتيح API الخاصة بك من OpenAI أو Anthropic أو Mistral أو Gemini.
+
+**نظام إدارة محتوى مرئي ذاتي الاستضافة:**
+
+شغّل [Intlayer CMS](https://intlayer.org/ar/doc/concept/cms) لتمكين كتاب المحتوى من تعديل العبارات برؤية حية مع الحفظ المباشر في Git.
+
+**ترخيص مفتوح:**
+
+كافة الأدوات والمكونات متاحة تحت رخصة Apache 2.0.
+
+## متى تظل vue-i18n ملائمة؟
+
+<AccordionGroup>
+<Accordion header="مشاريع Nuxt 2/3 القديمة والمستقرة">
+
+إذا كان التوجيه في مشروعك مرتبطاً بشدة بـ `@nuxtjs/i18n`، فقد لا يكون التغيير مجدياً في الوقت الراهن.
+
+</Accordion>
+<Accordion header="استخدامات ICU المتخصصة">
+
+إذا كان التطبيق يعتمد بشكل مكثف على الرسائل المتسلسلة وقواعد التنسيق الخاصة.
+
+</Accordion>
+<Accordion header="المشاريع الشخصية البسيطة">
+
+حين لا يمثل حجم الحزمة عاملاً حاسماً في نجاح التطبيق.
+
+</Accordion>
+</AccordionGroup>
+
+## كيف أطور إعدادات vue-i18n الحالية في مشروعي؟
+
+توفر Intlayer حزم توافق مباشرة تحتفظ بنفس تواقيع دوال مكتبات `vue-i18n` و`@nuxtjs/i18n` مثل `useI18n` و`$t` و`<i18n-t>`. لن تحتاج إلى إعادة كتابة القوالب أو الدوال التركيبية (composables) للاستفادة من مزايا البنية الخفيفة المعتمدة على المترجم.
+
+يتم الإعداد عبر أمر واحد فقط:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+تقوم هذه الأداة التفاعلية بما يلي تلقائياً:
+
+1. تثبيت حزمة التوافق `@intlayer/vue-i18n` أو `@intlayer/nuxt-i18n`.
+2. ضبط الأسماء المستعارة (aliases) في أداة الحزم (Vite أو Nuxt) لتوجه استدعاءاتك وقوالبك الحالية مباشرة نحو Intlayer، مما يتيح لك إزالة `vue-i18n` من ملف `package.json`.
+3. تفعيل تشخيصات خادم اللغة (LSP) داخل المحرر مباشرة، والتخلص من محلل AST الذي يزن 24 كيلوبايت من حزمة العميل، وتشغيل أدوات الترجمة الآلية بالذكاء الاصطناعي محلياً دون تعديلات معقدة.
+
+للاطلاع على الخطوات التفصيلية، راجع أدلتنا المتخصصة:
+
+- **توافق مباشر وسريع:** حافظ على شفرات القوالب عبر استخدام [طبقة التوافق مع `vue-i18n`](https://intlayer.org/ar/doc/compatibility/vue-i18n) أو [`@nuxtjs/i18n`](https://intlayer.org/ar/doc/compatibility/nuxtjs-i18n).
+- **أدلة النقل والتحويل:** حول ملفات JSON الحالية إلى قواميس منظمة بمساعدة أدلتنا: [من vue-i18n](https://intlayer.org/ar/doc/migration/vue-i18n) أو [من @nuxtjs/i18n](https://intlayer.org/ar/doc/migration/nuxtjs-i18n).
+- **الدمج المرحلي:** يمكنك ترك `vue-i18n` في وقت التشغيل، مع [استخدام Intlayer مع vue-i18n](https://intlayer.org/ar/blog/intlayer-with-vue-i18n) لإدخال تدقيق الأنواع الصارم والترجمة بالذكاء الاصطناعي محلياً.
+
+افحص حمولة وتوافق موقعك عبر [ماسح SEO للتدويل المجاني](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## مقالات مقترحة
+
+- [مقارنة أداء تدويل Vue وVite: دراسة معمقة](https://intlayer.org/ar/doc/benchmark/vue)
+- [مقارنة تفصيلية بين vue-i18n و Intlayer](https://intlayer.org/ar/blog/vue-i18n-vs-intlayer)
+- [هل أصبحت مكتبة next-intl قديمة في 2026؟](https://intlayer.org/ar/blog/is-next-intl-outdated)
+- [التدويل المعتمد على المترجم في مقابل النموذج الإعلاني](https://intlayer.org/ar/blog/compiler-vs-declarative-i18n)

package/blog/ar/list_i18n_technologies/build-tools/vite.md

@@ -0,0 +1,177 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: استيراد glob، الحزم (chunks)، ومعالجة النصوص أثناء البناء"
+description: ما هو خاص حقاً بـ Vite في التدويل (i18n). الكتالوجات الكسولة عبر import.meta.glob، لماذا نادراً ما ينجح التقسيم حسب المسار، ثغرات HMR، وإضافات وقت البناء.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite تقطيع الكود
+  - تحميل الترجمات البطيء
+  - vite إضافة i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: الأجزاء المتعلقة بـ Vite نفسه، وليس بإطار عملك
+
+معظم الشروحات المعنونة بـ "Vite i18n" هي في الواقع شروحات لـ React أو Vue تصادف أنها تستخدم Vite. يتناول هذا المقال الطبقة الأساسية أدناها: كيف يتم استيراد الكتالوجات، ماذا يفعل Rollup بها، ولماذا التحميل الكسول (lazy loading) الذي كتبته ربما لا يكون كسولاً في الواقع.
+
+## جدول المحتويات
+
+<TOC/>
+
+## الاستيراد الثابت هو الافتراضي، وهو متزامن وفوري
+
+أبسط إعداد يستورد كل كتالوج في الجزء العلوي من الوحدة البرمجية (Module):
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+هذا يعني تضمين ثلاثة كتالوجات في حزمة الإدخال الأساسية (Entry chunk)، في كل صفحة، ولكل زائر. هذا محتمل للغتين ومائة نص. لكن عند الوصول إلى عشر لغات، يصبح هذا أكبر تكلفة يمكن تفاديها في الحزمة بأكملها.
+
+## `import.meta.glob` والمعامل الذي يخطئ فيه الجميع
+
+خاصية استيراد glob في Vite هي الحل المعتاد:
+
+```ts
+const catalogs = import.meta.glob("./locales/*.json");
+
+export const loadCatalog = async (locale: string) => {
+  const load = catalogs[`./locales/${locale}.json`];
+  return (await load()) as Record<string, string>;
+};
+```
+
+التحميل الكسول هو السلوك الافتراضي: كل عنصر هو دالة تُرجع استيراداً ديناميكياً، ويقوم Rollup بإنشاء حزمة منفصلة لكل ملف. أما إضافة `{ eager: true }` فتدمج جميع الملفات مباشرة داخل الوحدة المستوردة، وهو بالضبط ما كنت تحاول تجنبه:
+
+```ts
+// تضمين كافة اللغات في حزمة الدخول الأساسية (غير مستحسن إطلاقاً):
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+الفخ يكمن في أن كلا الخيارين يعملان بشكل جيد في بيئة التطوير، لأن Vite يقدم الوحدات دون تجميعها في حزم. الفرق الحقيقي لا يظهر إلا داخل مجلد `dist`. اختبر ذلك عبر `npx vite build && npx vite preview` وافحص محتويات حزمة الدخول فعلياً.
+
+## التقسيم حسب المسار نادراً ما يقسم الملفات فعلياً
+
+هذا هو السلوك الذي يفاجئ الكثيرين. تقوم بتقسيم الكتالوجات حسب الصفحات:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+ثم يقوم مساران مختلفان باستيراد `checkout.json`، فيقوم Rollup برفع هذا الملف إلى حزمة مشتركة يتم تنزيلها في كلتا الصفحتين. يعتمد تقسيم الحزم في Rollup على مخطط علاقات الوحدات (Module graph) وليس على أسماء المجلدات: أي وحدة يمكن الوصول إليها من أكثر من نقطة دخول تصبح تابعة لحزمة مشتركة. إضافة مسار ثالث لا يغير شيئاً، وإضافة مسار رابع قد تعيد توزيع الحزم بشكل غير متوقع.
+
+بالتالي، لا يصمد التقسيم حسب المسار إلا إذا كان مخطط الاستيراد منفصلاً تماماً. وإذا كان حجم الحزمة يهمك، فتحقق بالأدوات بدلاً من التخمين:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+إذا كنت مضطراً لفرض حدود تقسيم معينة، فإن `build.rollupOptions.output.manualChunks` هو المهرب الوحيد، ولكن على حساب الصيانة اليدوية المستمرة.
+
+## الكتالوجات لا تدعم التحديث الحي (HMR) تلقائياً
+
+عدل على أي مكون، وسيقوم Vite بتحديثه على الفور. لكن عدل على `locales/fr.json`، وبحسب طريقة الاستيراد، قد لا يحدث أي شيء. فالـ JSON المستورد ديناميكياً يفتقر لحدود HMR الأصلية، مما يجعل مخطط الوحدات عاجزاً عن معرفة كيفية إبطال المكونات المستهلكة له.
+
+يلجأ المطورون عادة إلى إعادة تشغيل خادم التطوير مع كل تعديل على النصوص، دون إدراك أن هذا الأمر يمكن تفاديه عبر إضافات i18n المتخصصة، حيث يجب على الإضافة استقبال تحديث HMR ودفع الرسائل المحدثة مباشرة للتطبيق المشغل.
+
+## `define` يثبت اللغة بشكل دائم داخل الكود المترجم
+
+من المغري تحديد اللغة الافتراضية أثناء وقت البناء:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+خاصية `define` تقوم باستبدال نصي بحت في وقت التجميع. القيمة الموجودة أثناء البناء هي التي يتم شحنها في الكود النهائي، مما يلزمك بعمل بناء منفصل لكل لغة. هذه استراتيجية معتمدة في حلول مثل نظام i18n المدمج في Angular، لكنها لا تناسبك إذا كنت تريد لعملية نشر واحدة خدمة جميع اللغات.
+
+القيم التي تتغير حسب طلب المستخدم يجب إبقاؤها بعيدة عن `define` وتحديدها وقت التشغيل.
+
+## نقل معالجة النصوص إلى وقت البناء
+
+تتجه جميع الخيارات الناضجة في هذا المجال نحو مسار واحد: التوقف عن معالجة وتفسير النصوص داخل متصفح المستخدم.
+
+| الإضافة                      | ما تنقله إلى وقت البناء                                               |
+| :--------------------------- | :-------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | تجميع نصوص vue-i18n إلى دوال تصيير (شحن حزمة وقت التشغيل الخفيفة فقط) |
+| Lingui (ماكرو + إضافة)       | استخراج وتجميع الكتالوجات واستبدال الماكرو بمعرفات نصوص مختصرة        |
+| Paraglide (inlang)           | تجميع كل رسالة في دالة مستقلة قابلة للـ tree-shaking                  |
+| `vite-intlayer`              | بناء قواميس لكل مكون على حدة، وتفريغ وضغط الحقول غير المستخدمة        |
+
+المكسب مزدوج: التخلص من مترجم النصوص الثقيل في الحزمة النهائية للمتصفح، والقدرة على حذف النصوص غير المستخدمة برمجياً. التكلفة المقابلة: خادم التطوير ونظام CI يحتاجان كلاهما للإضافة، كما يتطلب تشغيل `tsc` المجرد خارج Vite ضبطاً إضافياً.
+
+## SSR: إياك والاحتفاظ باللغة على مستوى الوحدة البرمجية
+
+عند استخدام التصيير من جهة الخادم (SSR)، سواء عبر إطار عمل أو عبر `vite-plugin-ssr`، تنص القاعدة الذهبية على: المتغير الموجود على مستوى الوحدة والذي يحمل اللغة الحالية تتم مشاركته بين كافة الطلبات المتزامنة المعالجة في نفس خادم Node.js.
+
+```ts
+// آمن تماماً داخل المتصفح. لكنه تسريب خطير للبيانات بين الطلبات على الخادم:
+export let currentLocale = "en";
+```
+
+إذا طلب مستخدمان الخادم في نفس اللحظة، ستحدث حالة تسابق برمجية، وسيرى أحدهما لغة الآخر. هذا لا يحدث في التطوير المحلي لأنك المستخدم الوحيد. حدد اللغة لكل طلب بمفرده ومررها صراحة عبر السياق (Context) أو تخزين الطلب الخاص بإطار العمل.
+
+## إضافة Vite الخاصة بـ Intlayer
+
+توفر Intlayer إضافة واحدة موحدة تدير بناء القواميس، ومراقبة الملفات أثناء التطوير، ومسار التحسين:
+
+```ts fileName="vite.config.ts"
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+إعادة كتابة الاستيرادات، والتفريغ (purge)، والضغط (minify) مفعلة بشكل افتراضي. يتم ضبط الإعدادات الرئيسية في ملف `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // حذف حقول المحتوى التي لا يقرؤها أي مكون
+    minify: true, // إعادة تسمية مفاتيح المحتوى إلى أسماء بديلة مختصرة
+  },
+};
+
+export default config;
+```
+
+نظراً لأن المحتوى يُصرح به لكل مكون على حدة بدلاً من حفظه في ملفات لغات عالمية ضخمة، فإن مرحلة التفريغ تعتمد على مخطط ارتباط الوحدات الحقيقي، مما يجعل حذف الأكواد غير المستغلة آمناً للغاية. التفاصيل في [توثيق تحسين الحزم](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/bundle_optimization.md).
+
+## أخطاء شائعة
+
+- **وضع `{ eager: true }` على استيراد كان الهدف منه أن يكون كسولاً.** يعمل محلياً، ولكنه يشحن كل اللغات في الإنتاج.
+- **الظن بأن أسماء المجلدات تقسم الحزم تلقائياً.** يتبع Rollup مسار الاستيراد وليس المجلدات.
+- **إعادة تشغيل خادم التطوير لرؤية تعديلات النصوص.** دليل على غياب معالج HMR مناسب.
+- **تثبيت اللغة في `define`.** يلزمك بعمل بناء منفصل لكل لغة.
+- **حفظ حالة اللغة على مستوى الوحدة في SSR.** يسبب تسريب وتضارب اللغات بين المستخدمين المتزامنين.
+- **قياس الأداء على خادم التطوير.** الملفات غير المجمعة محلياً لا تمثل بأي شكل حزمة الإنتاج.
+
+## للمزيد من القراءة
+
+- [تحسين الحزم: التفريغ والضغط وما يصل بالفعل إلى المتصفح](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/bundle_optimization.md)
+- [تقارير المقارنة المعيارية عبر أطر العمل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/benchmark/index.md)
+- [مرجع الإعدادات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md)
+- [إعداد Intlayer مع Vite و React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_with_vite+react.md)
+- [محول التوافق مع i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/compat/i18next.md)
+- [React i18n: آلية عمل نموذج الموفر (Provider)](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: كيف يعمل وما هي معوقاته](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/list_i18n_technologies/frameworks/vue.md)
+- [التدويل على مستوى المكونات مقابل التدويل المركزي](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/per-component_vs_centralized_i18n.md)

package/blog/ar/list_i18n_technologies/frameworks/angular.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![رسم توضيحي لـ i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ما هو التدويل (i18n)؟
 
 التدويل، المعروف غالبًا باسم i18n، هو عملية تصميم وإعداد تطبيقك لدعم لغات وسياقات ثقافية متعددة. في Angular، يتطلب ذلك تكوين تطبيقك بحيث يمكن للنصوص، والتواريخ، والأرقام، وحتى تخطيطات واجهة المستخدم، التكيف بسلاسة مع مواقع محلية مختلفة. يضمن وضع هذه الأسس بشكل صحيح أن تظل عملية دمج الترجمات المستقبلية منظمة وفعالة.

package/blog/ar/list_i18n_technologies/frameworks/react-native.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ما هي الـ Internationalization (i18n)؟
 
 تتضمن Internationalization، أو i18n، هيكلة التطبيق بحيث يمكنه التكيف بسهولة مع لغات مختلفة، وتنسيقات إقليمية، وأعراف ثقافية. في React Native، تشمل i18n التعامل مع السلاسل للنوافذ والأزرار، بالإضافة إلى تنسيق التواريخ، والأوقات، والعملات، والمزيد وفقًا لإعدادات المستخدم. تتيح لك تطبيقات React Native المعدة بشكل صحيح دمج اللغات الإضافية وسلوكيات محددة محليًا لاحقًا, دون عمليات إعادة هيكلة ضخمة.

package/blog/ar/list_i18n_technologies/frameworks/react.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ما هي الدولية (i18n)؟
 
 الدولية، المختصرة إلى i18n، هي عملية تصميم وإعداد موقعك لدعم لغات وسياقات ثقافية متعددة. في React، يعني هذا إعداد التطبيق الخاص بك بحيث يمكن تعديل النصوص، وتنسيقات التاريخ، وتنسيقات الأرقام، وحتى التخطيط بسهولة للمستخدمين من مناطق مختلفة. إعداد تطبيق React الخاص بك لـ i18n يضع الأساس لدمج الترجمات وميزات التوطين الأخرى بشكل نظيف.

package/blog/ar/list_i18n_technologies/frameworks/svelte.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ما هو العولمة (i18n)؟
 
 العولمة، التي اختصرت بشكل شائع كـ i18n، هي عملية تصميم وبناء التطبيق الخاص بك بحيث يمكنه التكيف بسهولة مع لغات، ومناطق، وتقاليد ثقافية مختلفة. في Svelte، يعني هذا عادةً إعداد سلاسل ترجمات، وتوطين التواريخ، والأوقات، والأرقام، وضمان أن واجهة المستخدم يمكنها التبديل ديناميكيًا بين مختلف المناطق دون الحاجة إلى إعادة كتابة الشيفرة بشكل كبير.

package/blog/ar/list_i18n_technologies/frameworks/vue.md

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## ما هي العولمة (i18n)؟
 
 العولمة (i18n) هي ممارسة إعداد تطبيق برمجي (أو موقع ويب) لعدة لغات وعادات ثقافية. ضمن نظام Vue.js البيئي، يشمل ذلك تحديد كيفية تكييف النصوص، والتواريخ، والأرقام، والعملة، والعناصر الأخرى القابلة للتخصيص لمواقع مختلفة. من خلال إعداد i18n من البداية، تضمن هيكلًا منظمًا وقابلًا للتوسع لإضافة لغات جديدة والتعامل مع احتياجات الترجمة المستقبلية.

package/blog/ar/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # ما هو التدويل (i18n)؟ التعريف والتحديات
 
-![توضيح i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## فهم التدويل (i18n)
 
 **التدويل**، وغالباً ما يُختصر بـ **i18n**، هو عملية تصميم وإعداد تطبيق لدعم لغات متعددة وثقافات وعادات إقليمية **دون** تغييرات كبيرة في قاعدة الشفرة. مشتق اسم i18n من حقيقة أنه يوجد 18 حرفًا بين **i** و **n** في كلمة "التدويل".