هل أصبحت مكتبة 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 أضعاف الحجم الأصلي.

كيف انتهى المطاف بإطار عمل معروف بالخفة إلى حمل مثل هذا العبء الثقيل للتدويل؟ وهل لا يزال نموذج وقت التشغيل التقليدي مقبولاً اليوم؟

النقاط الرئيسية

أثقل بيئة تشغيل تم اختبارها:

بحجم يبلغ 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
aymericzip/intlayer

الأداء خلال الاثني عشر شهراً الأخيرة:

• intlify/vue-i18n: 259 تعديلاً (صيانة دورية لـ Vue 3 وNuxt).
• aymericzip/intlayer: 4,343 تعديلاً (تطوير مستمر لتحسينات المترجم وخادم LSP وأدوات الوكلاء الأذكياء).

المكتبة العريقة تمنح شعوراً بالاستقرار. لكن تطوير الواجهات الحديثة بات يستند إلى تحويلات شجرة الإعراب (AST) أثناء البناء، والتخلص من الشيفرات الخاملة، والترجمة بالذكاء الاصطناعي. ومن الصعب على البنى المحصورة في وقت التشغيل استيعاب هذه الآليات.

القياسات في بيئة Vite + Vue

أُجري الاختبار على تطبيق يضم 10 صفحات و10 لغات باستخدام Vite وVue 3:

تم الاختبار في متصفحات فعلية مع تفعيل ضغط gzip. التفاصيل متوفرة في توثيق مقارنة أداء Vue.

العبء الأولي للمكتبات

الحجم قبل تضمين ملفات الترجمة:

محرك تشغيل vue-i18n وحده يستهلك 24.3 كيلوبايت (gzip)، وهو ما يقارب حجم نواة Vue ذاتها. بينما تكتفي Intlayer بـ 2.7 كيلوبايت.

حجم الصفحات وتسريب المحتوى

أهم الملاحظات

تضخم نسبي مرتفع:

بما أن حجم 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" في وقت التشغيل يعمي أدوات الحزم عن تحديد النصوص المستعملة فعلياً. فتبقى الترجمات غير المستخدمة داخل الملفات المنشورة.

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

يستطيع مترجم Intlayer تتبع الخصائص المطلوبة تحديداً واستبعاد ما عداها قبل بناء ملفات العميل. تعرف على المزيد في تحسين الحزم.

تجربة المطورين

ملفات منفصلة مقابل التجاور المباشر

في vue-i18n، توضع الترجمات في مجلد locales/ بعيد. أما Intlayer فتتيح وضع ملفات المحتوى بجوار المكونات مباشرة:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "أطلق منتجك بكل اللغات"
  }
}

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

import { t, type Dictionary } from "intlayer";

export default {
  key: "hero",
  content: {
    title: t({
      en: "Ship in every language",
      ar: "أطلق منتجك بكل اللغات",
    }),
  },
} satisfies Dictionary;

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

عند إعادة تسمية أو حذف Hero.vue، يتم التعامل مع ملف المحتوى الخاص به بصورة متزامنة.

الإكمال التلقائي في مواجهة أمان الأنواع الشامل

توفر DefineLocaleMessage اقتراحات بناءً على ملف اللغة الأساسية. لكنها تعجز عن رصد النقص في بقية اللغات. فغياب مفتاح من ar.json لن يعرقل بناء TypeScript.

في Intlayer، تخضع القواميس لتدقيق حازم. وتفعيل strictMode يوقف البناء فوراً إذا كانت هناك ترجمة ناقصة في أي لغة مستهدفة.

أدوات المحررات والذكاء الاصطناعي

إدارة الترجمات

لا توفر vue-i18n أوامر داخلية لإنشاء أو ملء الترجمات. وعادة ما يضطر الفريق لتصدير الملفات إلى منصات مثل Crowdin أو Phrase.

تأتي Intlayer بهذه المزايا مدمجة:

الإكمال الآلي بالذكاء الاصطناعي محلياً (intlayer fill):

يترجم المفاتيح الناقصة باستخدام مفاتيح API الخاصة بك من OpenAI أو Anthropic أو Mistral أو Gemini.

نظام إدارة محتوى مرئي ذاتي الاستضافة:

شغّل Intlayer CMS لتمكين كتاب المحتوى من تعديل العبارات برؤية حية مع الحفظ المباشر في Git.

ترخيص مفتوح:

كافة الأدوات والمكونات متاحة تحت رخصة Apache 2.0.

متى تظل vue-i18n ملائمة؟

كيف أطور إعدادات vue-i18n الحالية في مشروعي؟

توفر Intlayer حزم توافق مباشرة تحتفظ بنفس تواقيع دوال مكتبات vue-i18n و@nuxtjs/i18n مثل useI18n و$t و<i18n-t>. لن تحتاج إلى إعادة كتابة القوالب أو الدوال التركيبية (composables) للاستفادة من مزايا البنية الخفيفة المعتمدة على المترجم.

يتم الإعداد عبر أمر واحد فقط:

npx 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 أو @nuxtjs/i18n.
• أدلة النقل والتحويل: حول ملفات JSON الحالية إلى قواميس منظمة بمساعدة أدلتنا: من vue-i18n أو من @nuxtjs/i18n.
• الدمج المرحلي: يمكنك ترك vue-i18n في وقت التشغيل، مع استخدام Intlayer مع vue-i18n لإدخال تدقيق الأنواع الصارم والترجمة بالذكاء الاصطناعي محلياً.

افحص حمولة وتوافق موقعك عبر ماسح SEO للتدويل المجاني:

مقالات مقترحة

• مقارنة أداء تدويل Vue وVite: دراسة معمقة
• مقارنة تفصيلية بين vue-i18n و Intlayer
• هل أصبحت مكتبة next-intl قديمة في 2026؟
• التدويل المعتمد على المترجم في مقابل النموذج الإعلاني