ما هو الـ Cache Busting؟
الـ Cache Busting هو وسيلة للتخلص من تأثير الذاكرة المخبأة القديمة عند عمل تحديثات على الملفات الثابته بحيث تظهر نتيجة التغيير دون الحاجة لتفريغ الذاكرة المخبأة Website Cache.
فجميعنا من خلال المعرفة بفكرة عمل الذاكرة المخبأة نعرف أن مهمتها هو الإحتفاظ بنسخة مؤقته من الملفات الثابته لفترة زمنية يحددها المبرمج، وذلك لتقليل الضغط على الخادم وزيادة سرعة الموقع.
لكن ماذا إذا قمت بتحديث ملف من هذه الملفات وليكن ملف الاستايل الخاص بالموقع؟
في الحقيقة لن تظهر هذه التحديثات لمستخدمي الموقع إلا في حالتين:
إنتهت مدة صلاحية الذاكرة المخبأة فيقوم المتصفح بطلب المعلومات مجدداً من الخادم Web Server وبالتالي إرسال التحديثات قام المستخدم بتفريغ الذاكرة المخبأة يدوياً من إعدادات المتصفحوبالطبع هذا ليس عملياً خاصة أن الذاكرة المخبأة للملفات الثابتة غالباً تكون مدة صلاحيتها قرابة العام وهذا ليس في صالح التحديثات التي قمت بإضافتها على الملفات. لذلك كان يجب وجود طريقة لإبلاغ المتصفحات بأنه يوجد تحديثات، وهنا تأتي أهمية الـ Cache Busting.
كيفية عمل Cache Bustingفكرة عمل الـ Cache Busting هي إبلاغ المتصفح بأنه يوجد إصدار جديد من الملف فيقوم المتصفح بتجاهل الملف القديم وطلب الملف الجديد من الخادم. وهناك عدة طرق تساعد في القايام بذلك:
عمل إصدارات لأسماءالملفات (مثل: style.v2.css) عمل إصدارات لمسارات الملفات (مثل: v2/style.css/) استخدام متغيرات الإستعلام Query String (مثل: style.css?ver=2) : حيث أن أغلب المتصفحات تعتبره ملف جديد لكن بعضها لا لذا ستحتاج إلى الطريقتين الأولتين.ويمكننا تطبيق ذلك كالآتي:
<link rel="stylesheet" href="style.v1.css"> <link rel="stylesheet" href="/v1/style.css"> <link rel="stylesheet" href="style.css?v=1">فكل ما عليك هو أن تقوم بتحديث رقم الإصدار في كل مرة تقوم بعمل تحديث في الملف. لكن هناك مشكلة!!
تخيل انك قمت بعمل ملف اسمه style.v1.css ثم قمت بعمل تحديث بداخله وقمت بتغييره إلى style.v2.css، هنا ستظهر لك مشكلة شخصياً تسبب لي إزعاج وهي أن موقعك سنتج عنه العديد من الروابط التي لايمكن الوصول إليها، حيث ان محركات البحث تقوم بأرشفة ملفات CSS and JS، وهي بالفعل قامت بأرشفت الملف style.v1.css ودائماً ما ستقوم بفحص هذا الرابط وفي كل مرة سيظهر خطأ 404 نتيجة لأنك قمت بتغيير إسم الملف، وينطبق ذلك أيضاً إذا اعتمدت على الأسلوب الثاني لأنك ستحتاج لتغير v1/style.css/ إلى v2/style.css/ أي أن المجلد v1 أيضاً لن يصبح موجوداً، لذلك فالحل هنا هو الإعتماد على السيرفر لجلب الملف الصحيح بغض النظر عن المسميات وهذا ما سنتحدث عنه في الأسطر القادمة.
أما الطريقة الثالثة فهي أسهل ولا تولد أخطاء حيث أن مسار واسم الملف ثابتين لكن ما تغير هو Query String وهذا طبيعي في عالم الويب ولا يسبب مشاكل. مع العلم أن هناك بعض المتصفحات لا ترى Query String على أنه ملف جديد وبالتالي سوف تلجأ إلى تعديل الأسماء إن اضطررت لذلك.
لكن تعتمد جميع الطرق على أنك ستقوم بتغيير الإصدار في كل عملية تحديث وبالطبع عمل ذلك يديوياً هو أمر مزعج لذا سنحتاج إلى طريقة لعمل ذلك تلقائياً، وهنا يأتي دو الدوال التي تقوم بجلب وقت تحديث الملف (حسب اللغة المستخدمة في برمجة الموقع) ويكون هو رقم الإصدار، وبما أنني أستخدم PHP فهناك الدالة filemtime وهي اختصار لـ File Modification Time أو وقت التعديل على الملف.
ويمكننا عمل ذلك كالتالي:
<?php $time = filemtime('style.css');?> <link rel="stylesheet" href="style.css?v=<?php echo $time ;?>">ومن خلال الكود السابق ففي كل مرة يتم تحديث ملف style.css يقوم الخادم بتحديث وقت التعديل فتقوم الدالة filemtime بجلب الوقت ثم تخزينه في المتغير time$، ثم نقوم بطباعة قيمة المتغير كقيمة لـ Query String.
وبالطبع يجب الأخذ في الإعتبار أن الدالة filemtime تأخذ مسار Paths الملف وليس الربط URL لذا يجب الإنتباه إلى وضع المسار الصحيح للملف.
ماذا عن تغيير اسم الملف تلقائياً بنفس الطريقة السابقة؟
تخيل معي أنك قمت بتطبيق الكود التالي:
<?php $time = filemtime('style.css');?> <head> <link rel="stylesheet" href="<?php echo 'style.'.$time.'.css' ;?>"> </head>استخدام الكود التالي سيجعل الخادم يقو بالبحث عن ملف يحمل اسم style.1498548597.css (على اعتبار أن 1498548597 هو وقت تعديل الملف بالثواني) وهو غير موجود بينما الموجود هو style.css وهنا لن يتم تحميل استايلات الموقع لأنك طلب ملف غير موجود.
وهنا يمكننا استخدام الطريقة التالية:
قم بوضع الكود التالي في ملف htaccess RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.+)\.(\d+)\.(js|css)$ $1.$3 [NC,L]وما يحدث هنا: عند فتح الموقع يقوم المتصفح بطلب الملف style.15458689.css من الخادم الخادم يحتوي فقط على style.css الكود السابق يخبر السيرفر بتجاهل الأرقام وإرسال الملف style.css يقوم المتصفح بعمل نسخة مؤقته من الملف style.css ثم تقوم بعمل تحديثات على الملف فيتغير وقت آخر تعديل عند فتح الموقع مرة أخرى يجد المتصفح أن هناك طلب لملف يسمى style.254789625.css وهو ملف جديد فيقوم بطلب الملف من السيرفر فيقوم السيرفر بتجاهل الملف وارسال style.css مرة أخرى وبالتالي تظهر التحديثات
ولفهم الكود السابق يجب أن تكون لديك خلفية عن التعابير النظامية Regular Expressions وقواعد التعامل مع سيرفر الأباتشي Apache Rules
[highlight background=”” color=””]إن كان ملف htaccess داخل مجلد وليكن blog يجب التعديل على RewriteBase لتصبح RewriteBase /blog[/highlight]
الـ Cache Busting في ووردبريسبالنسبة لمستخدمي ووردبريس فإن ووردبريس يستخدم نظام الـ Query String لتحديث الذاكرة المخبأة لذلك تكون الطريقة الصحيحة لعمل ذلك في ووردبريس هي محاكاة الكود التالي في ملف functions.php أو الإضافة Plugin
function your_styles() { wp_enqueue_style( 'main-style', get_template_directory_uri() .'/style.css', array(), filemtime(get_template_directory() .'/style.css'), 'all' ); } add_action( 'wp_enqueue_scripts', 'your_styles' );مع الأخذ في الإعتبار تغيير الدالة get_template_directory و get_template_directory_uri إن كنت تستخدم قالب إبن Child Theme بالدالة get_stylesheet_directory و get_stylesheet_directory_uri.