شرح ضغط ملفات JS و CSS لتسريع الموقع
السلام عليكم مرحبا بالجميع , سوف اشرح الاداة الجميلة التي تمكننا من ربط العديد صفحات js و css الى صفحة واحدة و بالتالي ..
تحميل محتوى الموضوع
عرض نسخة صالحة للطباعة
أرسل هذا الموضوع إلى صديق-
14-12-2016 03:46 صباحا
.gif){kind=icon}
-
-
-
عضـو نشيط
-
- الأوسمة:1
-
الـمصـمـم الـمبـدع
-
معلومات الكاتب ▼تاريخ الإنضمام : 24-08-2013رقم العضوية : 4130المشاركات : 284الدولة : الجزائرالجنس :
تاريخ الميلاد : 9-1-1992الدعوات : 1قوة السمعة : 2470موقعي : زيارة موقعيعدد الإجابات: 1PBBoard Version : 3.0.0
-
-
السلام عليكم
مرحبا بالجميع , سوف اشرح الاداة الجميلة التي تمكننا من ربط العديد صفحات js و css الى صفحة واحدة
و بالتالي تقليل من حجم js و css , تقليل الضغط , تسريع الموقع
كل هذا في اداة بسيطة و جميلة
اولا رابط الاداة
https://github.com/mrclay/minify">https://github.com/mrclay/minify
كيفية التحميل
ندخل الى الموقع و نضغط على clone or download ثم نحتار download ZIP
تم التحميل
الان نقوم برفع ملف 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
و نقوم بتجريب هذا الرابط في المتصفح
الان سوف يقول البعض ان رابط طويل و غير ذلك سهل سوف نقضي على الامر
شرح ربط مع اختصار الرابط
يجب جميع ملفات 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
-تقليل الضغط
-تسريع التصفح
الى هنا انتهينا من شرح
اى استفسار فلا تتردد
وفقنا الله
-
17-12-2016 01:54 صباحا
[1]
-
-
-
عضو فعال
-
معلومات الكاتب ▼تاريخ الإنضمام : 14-01-2014رقم العضوية : 4839المشاركات : 100الدولة : المغربالجنس :
قوة السمعة : 810موقعي : زيارة موقعيعدد الإجابات: 1PBBoard Version : 3.0.3
-
-
شرح ضغط ملفات JS و CSS لتسريع الموقع
| المواضيع المتشابهه | ||||
| عنوان الموضوع | الكاتب | الردود | الزوار | آخر رد |
| شرح طريقة إضافة الكلاسات وتعديلها وحذفها في ستايل شييت add / edit / remove class in CSS |
Mr King |
0 | 943 | Mr King |
| شرح طريقة تعديل ستايل شييت edit css من لوحة إدارة المنتدى |
Mr King |
0 | 716 | Mr King |
| شرح كلاسات الـ css للنسخة [2.1.4] |
كنتارو |
29 | 14315 | matree |
| [مجابه] طلب شرح css المتقدم |
elhanafy |
5 | 720 | ezzeldean |
| طلب شرح طريقة ايجاد كلاسات css مكانها داخل القوالب !! |
ashraf |
1 | 529 | ashraf |
|
الكلمات الدلالية
|
| تسريع التصفح ، ضغط ملفات جافاسكربت ، ضغط ستايل ، تسريع موقع ، ضغط js ، ضغط css ، دمج ملفات جافاسكربت ، دمج css ، دمج ملفات css ، ملفات ، لتسريع ، الموقع ، |
«
طريقة تغير استايل منتدى PBBoard الجيل الثالث
|
شرح اضافة صور اعضاء بجانب اسماء في رسائل الصادرة و الواردة
»
الساعة الآن 06:42 صباحا