عزيييييزي .. ❤️❤️
تعالا أقولك على أشهر 3 أسباب لبطئ موقعك الالكتروني
وأديك حلول حذرية ليهم (غالباً محدش اتكلم فيهم وخصوصاً أول واحدة)
من أهم عوامل سرعة الموقع اللي كنت نزلتلك بوست بيهم
------
أحب أعرفك الأول على بطل البوست بتاعنا النهاردة وهو Laravel Mix ..
دا يا سيدي حاجة كدا حبايبنا مطورين لارافيل عملوها بتخليك تتعامل مع ملفات ال js و ال css في الموقع بتاعك .. عن طريق انها بتقدملك بعض الأدوات والتركات اللي بتظبطهملك مع بعض ..
-----
خلينا ندخل في الموضوع ع طول بدون رغي ..
? المشكلة:
1- أول حاجة انك تكون مستدعي كلاسات css انت أساساً مش مستخدمها في النظام عندك ومتقله النظام ع الفاضي ..
تخيل مثلا لو بتعمل موقع الكتروني وبتستدعي ملف css جاهز يا عزيزي .. وليكن مثلاً ملف ال bootstrap.css .. مين قالك انك مستخدم الملف دا كله ؟؟
أنا عايز أقولك انك ممكن متكونش مستخدم ولا حتى 20% منه .. وال 80% الباقيين جايين مع النظام ..
✅ الحل:
فيه plugin يا عزيزي في laravel-mix اسمها PostCSS
دي وظيفتها بكل بساطة يا عزيزي .. انها تاخد كل ملفات ال css بتاعتك اللي انت مستدعيها في النظام وتاخد ملفات ال blade بتاعتك يا عزيزي .. وتقارن وتطلعلك الكلاسات اللي انت مستخدمها بس وتقولك اتفضل يا باشا .. دول ال 10% من الكلاسات اللي النظام بتاعك بيستخدمهم ودا الملف بتاعهم الجديد .. استدعيه وسيبك من الباقي وانت كل اللي عليك انك بتستدعي الملف اللي انت اخدته من ال PostCSS وكدا انت وفرت 80% من حجم ملفات ال css
? المشكلة:
2- تاني حاجة يا عزيزي بتسبب بطئ في الموقع عندك هيا انك يكون عندك ملفات css كتييير
يعني مثلا تكون بالشكل دا
'public/css/bootstrap.css'
'public/js/bootstrap.js'
'public/js/selictize.js',
'public/css/owl.carousel.css'
'public/css/toastr.css'
'public/css/croppie.css'
'public/css/cust-fonts.css'
'public/css/responsive-font.css'
'public/css/flag-icons.css'
'public/css/main-css.css'
تعدد الملفات دا يا عزيزي بيعمل عندك في الموقع مشكلتين رئيسيتين
1- عملية الاتصال مع السيرفر بتاعك بتاخد وقت ..
تعلا اديك مثال ..
لو رايح تجيب تفاح من بلد جنبكم ومصاريف التاكسي رايح 10 جنيه ..
ومصاريف التاكسي جاي 10 جنيه ..
والتفاح نفسه الكيلو ب 20 جنيه ..
يبقى انت دفعت كام ؟ 40 جنيه علشان تجيب كيلو تفاح ..
طيب لو انت اول م رجعت افتكرت انك عايز موز وخدت تاكسي تاني ..
وبعد م جبت الموز افتكرت انك عايز جوافه ورحت خدت تاكسي تالت ..
مش كان أحسن ليك وأوفر ليك انك تجمع كل الطلبات دي مع بعضها وتجيبهم في نفس التاكسي ؟
2- انت بتعمل Load على السيرفر نفسه .. بإنك تعمل اتصالات عليه كتييير على شوية ملفات تافين كان ممكن تدمجهم مع بعض ..
✅ الحل:
البطل laravel mix بيقولك ولااا تشغل دماغك .. اديني كل الملفات دي كلها يا كبير وأنا هجمعهالك مع بعض وأدمجهالك في ملف واحد وأقولك خد يا باشا ملف واحد بس أهو استدعيه عندك في النظام من غير م تشغل السيرفر معاك .. (بدل م تاخد تاكسي في كل مرة .. لا جمع اللي انت عايز تجيبه وأنا أجيبهملك في تاكسي واحد ووفر الفلوس بتاع التاكسي .. لحسن الفترة دي بقت صعبة أوي)
? المشكلة:
3- فيه شوية مسافات حلوين بين ال classes على شوية مسافات حلوين في ال javascript ..
المسافات دي لما بتتجمع مع بعض عايز أقولك انها تقريباً بتديك ضعف حجم الملف سواء css أو js ..
✅ الحل:
عمنا وعم عيالنا laravel mix بيقولك ولاااا تشغل بالك يا كبير .. انا هديك الملفات دي بدون أي مسافات وهدمجهالك مع بعضها وهشيللك ال css اللي انت مش بتستخدمها وبدل م كان عندم ملف 2 ميجا ولا حاجة .. هديك ملف 200 كيلو بايت . وشكراً ع كدا ..
دا يا عزيزي مثال عملي وحاططلك علامة على السطور اللي عايزك تشوفها .
https://github.com/peter-tharwat/dashboard/blob/master/webpack.mix.js#L16-L35
وهنا يا عزيزي تقدر تعرف ال postcss هيا هتبحث ف أي ملفات علشان تطلع ال css classes
https://github.com/peter-tharwat/dashboard/blob/master/webpack.mix.js#L29-L34
متنساش تستدعي ال plugin زي كدا
https://github.com/peter-tharwat/dashboard/blob/master/webpack.mix.js#L2
كمان تقدر تعمل ignore لبعض ال css classes بحيث انك تقدر تخلي postcss تتجاهلهم وتستدعيهم زي م هما زي كدا
https://github.com/peter-tharwat/dashboard/blob/master/resources/css/app.css#L8
https://github.com/peter-tharwat/dashboard/blob/master/resources/css/app.css#L157
وتقدر تستدعي الملفات داخل ال postcss علشان تشتغل عليهم وتنضفهم بالشكل دا
https://github.com/peter-tharwat/dashboard/blob/master/resources/css/app.css#L1-L6
ملخص البوست يا عزيزي .. لارافيل ميكس بيديك شوية ميزات حلوين يتلخصوا في
1- بينضف ال css classess اللي انت مش محتاجها
2- بيدمج ملفات ال css مع بعضها وال js طبعاً .
3- بيصغر حجمهم ويشيل المسافات اللي بينهم ..
متنساش تشوف باقي المقالات على هاش تاج #نصائح_مطوري_الويب
أو تقدر حتى تتابعني من خلال المقالات على مدونتي
https://peterayoub.me/blog
مع السلامو عليكو
