شرح ضغط ملفات JS و CSS لتسريع الموقع

السلام عليكم مرحبا بالجميع , سوف اشرح الاداة الجميلة التي تمكننا من ربط العديد صفحات js و css الى صفحة واحدة و بالتالي ..




14-12-2016 03:46 صباحا
Dzkhalwi
عضو فعال
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 24-08-2013
رقم العضوية : 4130
المشاركات : 242
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 9-1-1992
الدعوات : 1
يتابعهم : 2
يتابعونه : 25
قوة السمعة : 2160
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
السلام عليكم
مرحبا بالجميع , سوف اشرح الاداة الجميلة التي تمكننا من ربط العديد صفحات js و css الى صفحة واحدة 
و بالتالي تقليل من حجم js و css , تقليل الضغط , تسريع الموقع
كل هذا في اداة بسيطة و جميلة

اولا رابط الاداة 
https://github.com/mrclay/minify">https://github.com/mrclay/minify

كيفية التحميل
ندخل الى الموقع و نضغط على clone or download ثم نحتار download ZIP

file_2016-12-14_005953

تم التحميل

file_2016-12-14_005951

الان نقوم برفع ملف min الى جذر الموقع و ليس داخل مجلد forum

يعني يصبح www.example.com/min

عن طريق مدير ملفات الموجود في cpanel او نستخدم برنامج المشهور Filezilla

نحن سوف نستخدم برنامج filezilla لانه احسن

للتحميل البرنامج : https://filezilla-project.org/
شرح نقل ملفات من جهاز المستخدم الى موقعك :  إجراء التحديثات ببرنامج FTP

بعدل النقل الملف اصبحت الاداة جاهزة و للتاكد من عمل الاداة عليك تجريب ملفات التالية

 
example.org غيره باسم موقع و اذا شاهدت اكواد js و css يعني كل شىء تمام

الان مرحلة دمج ملفات css و js

سوف اقوم بشرح كيفية دمج ملفات css و هو نفس المعمول به لدمج ملفات js

لنفترض اننا نقوم لدمج 3 ملفات css 

www.example.com/forums/styles/default/css/style.css
www.example.com/forums/styles/default/css/fonts.css
www.example.com/forums/styles/default/css/mobile.css

سوف نربط هذه الملفات مع بعضها بهذه الطريقة

نقوم باضافة  min/?f=  في رابط الاول فقط قبل مسار ستايل  حيث يصبح بهذا الشكل

www.example.com/min/?f=forums/styles/default/css/mobile.css

و بعدها نقوم باضافة ستايلات اخرى مع فصل بينها بفاصلة , مع مسار ستايل

حيث يصبح لدينا 


www.example.com/min/?f=forums/styles/default/css/mobile.css,/forums/styles/default/css/style.css,/forums/styles/default/css/fonts.css

و نقوم بتجريب هذا الرابط في المتصفح 

الان سوف يقول البعض ان رابط طويل و غير ذلك سهل سوف نقضي على الامر  smile

شرح ربط مع اختصار الرابط


يجب جميع ملفات css تكون موجودة في نفس مسار اذا لم يكونا في نفس المسار لن تنجح العملية

سوف نقوم تغيير قليلا في رابط السابق 

حيث نغير حرف f بحرف b

يعني سابقا قمنا باضافة min/?f= الان سوف نعتمد على min/?b=

نبدا في التعديل

امثلة السابقة 

www.example.com/forums/styles/default/css/style.css
www.example.com/forums/styles/default/css/fonts.css
www.example.com/forums/styles/default/css/mobile.css

نقوم باضافة  min/?b=  في رابط الاول فقط قبل مسار ستايل و نضيف ايضا في نهاية السمار &f=  حيث يصبح بهذا الشكل

www.example.com/min/?b=forums/styles/default/css/&f=mobile.css

الان كل شىء تمام , نقوم باضافة ستايلات الاخرى الرابط بدون مسار و تفريق بينهم فقط بفاصلة

يعني تصبح بهذا الشكل 

www.example.com/min/?f=forums/styles/default/css/&f=mobile.css,style.css,fonts.css

و نقوم بتجريب هذا الرابط في المتصفح 


بخصوص ملفات جافاسكربت js هى نفس العملية نغير روابط css بروابط js مع تغيير مسار الى مسار js


ملاحظة مهمة :  قمت بتجريب دمج ملفات js خاصة بمنتدى لاكن كان هناك تعارض في الاكواد
 تم دمج فقط ملفين jquery-3.1.1.min.js,jquery-ui.min.js الذي لم يتعارضا

فائدة هذه العملية
-تقليل روابط
-تقليل حجم ملفات js , css
-تقليل الضغط
-تسريع التصفح


الى هنا انتهينا من شرح2flw5
اى استفسار فلا تتردد
وفقنا الله











17-12-2016 01:54 صباحا
مشاهدة مشاركة منفردة [1]
ali2014
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 14-01-2014
رقم العضوية : 4839
المشاركات : 73
الدولة : المغرب
الجنس : ذكر
يتابعهم : 1
يتابعونه : 2
قوة السمعة : 740
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح ضغط ملفات JS و CSS لتسريع الموقع
السلام عليكم
بارك الله فيكم الأخ الكريم  Dzkhalwi على الافادة والتقاسم.
هل تم قياس أثر العملية على سرعة المنتدى قبل وبعد اعتماد ماتمت الاشارة اليه ، من خلال مثلا
https://gtmetrix.com
https://tools.pingdom.com
 


تم تحرير المشاركة بواسطة :ali2014
بتاريخ:17-12-2016 01:54 صباحا



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
شرح طريقة إضافة الكلاسات وتعديلها وحذفها في ستايل شييت add / edit / remove class in CSS Mr King
0 644 Mr King
شرح طريقة تعديل ستايل شييت edit css من لوحة إدارة المنتدى Mr King
0 502 Mr King
شرح كلاسات الـ css للنسخة [2.1.4] كنتارو
29 12893 matree
[مجابه] طلب شرح css المتقدم elhanafy
5 430 ezzeldean
طلب شرح طريقة ايجاد كلاسات css مكانها داخل القوالب !! ashraf
1 367 ashraf

الكلمات الدلالية
تسريع التصفح ، ضغط ملفات جافاسكربت ، ضغط ستايل ، تسريع موقع ، ضغط js ، ضغط css ، دمج ملفات جافاسكربت ، دمج css ، دمج ملفات css ، ملفات ، لتسريع ، الموقع ،







الساعة الآن 03:31 مساء