تحسين أداء Yii2: تحميل مكتبة jQuery بشكل منفصل في رأس الصفحة

في تطبيق Yii2 الخاص بي، واجهت تحدياً يتعلق بتحميل مكتبة jQuery في رأس الصفحة. أدركت أن هناك معلمة في ملف AppAssets.php يمكن ضبطها لتحديد مكان تحميل الملفات الجافا سكريبت، وهي public $jsOptions:

phpCopy code
public $jsOptions = [
    'position' => \yii\web\View::POS_HEAD
];

ومن خلال هذا الإعداد، سيتم تحميل جميع ملفات الجافا سكريبت في رأس الصفحة. ولكن هل هناك طريقة لتحميل مكتبة jQuery فقط في رأس الصفحة دون أن تتأثر ببقية الملفات؟

تحققت من الخيارات المتاحة واكتشفت أنه يمكننا استخدام yii\web\JqueryAsset بشكل منفصل لتحقيق هذا الهدف. يمكننا إزالة التأثير العام لـ POS_HEAD وبدلاً من ذلك، نقوم بتحميل مكتبة jQuery بشكل فردي في رأس الصفحة.

للقيام بذلك، يمكننا تعديل ملف AppAssets.php على النحو التالي:

phpCopy code
use yii\web\JqueryAsset;

class AppAsset extends AssetBundle
{
    // ... المحتوى الحالي للصنف ...

    public $jsOptions = [
        // ازالة تأثير العام للجافا سكريبت في رأس الصفحة
    ];

    public function init()
    {
        // تحميل مكتبة jQuery فقط في رأس الصفحة
        $this->js[] = 'https://code.jquery.com/jquery-3.6.0.min.js';
        Yii::$app->getView()->registerAssetBundle(JqueryAsset::class);

        parent::init();
    }
}

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

أتمنى أن يكون هذا الحلا مفيدًا لك وأن تتمكن من تحقيق متطلبات تحميل jQuery في رأس الصفحة بنجاح. في حالة وجود أي استفسارات إضافية، فلا تتردد في طرحها.

للتفصيل أكثر حول العملية التي تمثل في تحميل مكتبة jQuery في رأس صفحة تطبيق Yii2، يجب أن نفهم بعض النقاط الأساسية في الشرح.

أولاً وقبل كل شيء، نستخدم Yii2 Asset Bundles لإدارة وتنظيم الملفات الثابتة (مثل الجافا سكريبت والأنماط) في تطبيقنا. في حالتنا، يتم تعريف Asset Bundle عبر فئة AppAsset وتحديد الملفات الثابتة التي يجب تضمينها.

في الكود السابق، تم استخدام JqueryAsset لتحديد مكتبة jQuery. إلا أن الأمر لم يقتصر على ذلك، بل تم أيضًا إضافة رابط خاص بتحميل نسخة منفصلة من مكتبة jQuery من الموقع الرسمي (https://code.jquery.com/)، بنسخة معينة (في هذه الحالة، 3.6.0.min.js).

بمجرد أن نقوم بتحديد $jsOptions بدون قيم، يتم تعطيل تأثير تحميل جميع الملفات الجافا سكريبت في رأس الصفحة، مما يتيح لنا التحكم الكامل في تحميل الملفات بشكل منفصل.

داخل الدالة init()، تم إضافة الرابط الخاص بمكتبة jQuery إلى قائمة $js في AppAsset. بالإضافة إلى ذلك، تم استخدام Yii::$app->getView()->registerAssetBundle(JqueryAsset::class); للتأكيد على أن الـ Asset Bundle لمكتبة jQuery تم تسجيلها وتحميلها.

هذا التحديث يؤكد تحميل مكتبة jQuery بشكل مستقل في رأس الصفحة دون تأثير على باقي ملفات الجافا سكريبت المتاحة في التطبيق.

بهذا الشكل، يمكنك تحقيق هدفك في تحميل jQuery في رأس الصفحة بشكل منفصل وفعّال في تطبيق Yii2 الخاص بك.