تحسين
حافظ على مشاريعك ضعيفة وسريعة الاستجابة وقابلة للصيانة حتى تتمكن من تقديم أفضل تجربة والتركيز على الوظائف الأكثر أهمية.
واردات Lean Sass
عند استخدام Sass في خط أنابيب الأصول ، تأكد من تحسين Bootstrap عن طريق @importإدخال المكونات التي تحتاجها فقط. من المحتمل أن تأتي أكبر التحسينات الخاصة بك من Layout & Componentsقسم bootstrap.scss.
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
إذا كنت لا تستخدم أحد المكونات ، فعلق عليه أو احذفه بالكامل. على سبيل المثال ، إذا كنت لا تستخدم الرف الدائري ، فقم بإزالة هذا الاستيراد لحفظ بعض حجم الملف في CSS المترجم. ضع في اعتبارك أن هناك بعض التبعيات عبر عمليات استيراد Sass التي قد تزيد من صعوبة حذف ملف.
جافا سكريبت العجاف
تتضمن JavaScript في Bootstrap كل مكون في ملفات dist الأساسية ( bootstrap.jsو bootstrap.min.js) ، وحتى التبعية الأساسية (Popper) مع ملفات الحزمة ( bootstrap.bundle.jsو bootstrap.bundle.min.js). أثناء قيامك بالتخصيص عبر Sass ، تأكد من إزالة JavaScript ذات الصلة.
على سبيل المثال ، بافتراض أنك تستخدم حزمة JavaScript الخاصة بك مثل Webpack أو Rollup ، فإنك ستستورد فقط JavaScript الذي تخطط لاستخدامه. في المثال أدناه ، نوضح كيفية تضمين JavaScript النموذجي فقط:
// Import just what we need
// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';
بهذه الطريقة ، لن تقوم بتضمين أي JavaScript لا تنوي استخدامه لمكونات مثل الأزرار ، الدوارات ، وتلميحات الأدوات. إذا كنت تقوم باستيراد القوائم المنسدلة أو تلميحات الأدوات أو العناصر المنبثقة ، فتأكد من إدراج تبعية Popper في ملفك package.json.
الصادرات الافتراضية
الملفات قيد bootstrap/js/distاستخدام التصدير الافتراضي ، لذلك إذا كنت تريد استخدام أحدها ، فعليك القيام بما يلي:
import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))
المصفف التلقائي .browserslistrc
يعتمد Bootstrap على Autoprefixer لإضافة بادئات المستعرض تلقائيًا إلى خصائص CSS معينة. يتم إملاء البادئات بواسطة ملفنا .browserslistrcالموجود في جذر Bootstrap repo. سيؤدي تخصيص قائمة المتصفحات هذه وإعادة تجميع Sass إلى إزالة بعض CSS تلقائيًا من CSS المترجمة ، إذا كانت هناك بادئات بائع فريدة لهذا المتصفح أو الإصدار.
CSS غير مستخدمة
مطلوب مساعدة في هذا القسم ، يرجى النظر في فتح العلاقات العامة. شكرًا!
على الرغم من عدم وجود مثال تم إنشاؤه مسبقًا لاستخدام PurgeCSS مع Bootstrap ، إلا أن هناك بعض المقالات والإرشادات المفيدة التي كتبها المجتمع. فيما يلي بعض الخيارات:
- https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
- https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/
أخيرًا ، توضح مقالة CSS Tricks هذه حول CSS غير المستخدمة كيفية استخدام PurgeCSS والأدوات المماثلة الأخرى.
تصغير و gzip
كلما كان ذلك ممكنًا ، تأكد من ضغط جميع الشفرات التي تخدمها للزائرين. إذا كنت تستخدم ملفات Bootstrap dist ، فحاول التمسك بالإصدارات المصغرة (المشار إليها بواسطة الامتدادات .min.cssوالامتدادات .min.js). إذا كنت تقوم ببناء Bootstrap من المصدر باستخدام نظام الإنشاء الخاص بك ، فتأكد من تنفيذ المصغرات الخاصة بك لـ HTML و CSS و JS.
عدم حظر الملفات
في حين أن التصغير واستخدام الضغط قد يبدو كافياً ، فإن جعل ملفاتك غير محظورة يعد أيضًا خطوة كبيرة في جعل موقعك محسنًا وسريعًا بدرجة كافية.
إذا كنت تستخدم مكون Lighthouse الإضافي في Google Chrome ، فربما تكون قد تعثرت في FCP. يقيس مقياس First Contentful Paint الوقت من بدء تحميل الصفحة إلى وقت عرض أي جزء من محتوى الصفحة على الشاشة.
يمكنك تحسين FCP عن طريق تأجيل JavaScript أو CSS غير الهام. ماذا يعني ذلك؟ ببساطة ، يجب تمييز JavaScript أو أوراق الأنماط التي لا تحتاج إلى أن تكون موجودة في اللوحة الأولى لصفحتك بعلامة asyncأو deferسمات.
يضمن ذلك تحميل الموارد الأقل أهمية لاحقًا وعدم إعاقة الطلاء الأول. من ناحية أخرى ، يمكن تضمين الموارد الهامة كنصوص أو أنماط مضمنة.
إذا كنت تريد معرفة المزيد حول هذا الموضوع ، فهناك بالفعل الكثير من المقالات الرائعة حول هذا الموضوع:
استخدم HTTPS دائمًا
يجب أن يكون موقع الويب الخاص بك متاحًا فقط عبر اتصالات HTTPS في الإنتاج. يعمل HTTPS على تحسين الأمان والخصوصية وتوافر جميع المواقع ، ولا يوجد شيء مثل حركة مرور الويب غير الحساسة . تختلف خطوات تكوين موقع الويب الخاص بك ليتم تقديمه حصريًا عبر HTTPS بشكل كبير اعتمادًا على بنيتك ومزود استضافة الويب ، وبالتالي فهي خارج نطاق هذه المستندات.
يجب أن تصل المواقع التي يتم عرضها عبر HTTPS أيضًا إلى جميع أوراق الأنماط والنصوص البرمجية والأصول الأخرى عبر اتصالات HTTPS. بخلاف ذلك ، سترسل للمستخدمين محتوى نشطًا مختلطًا ، مما يؤدي إلى وجود ثغرات أمنية محتملة حيث يمكن اختراق الموقع عن طريق تغيير التبعية. يمكن أن يؤدي ذلك إلى ظهور مشكلات أمنية وتحذيرات في المتصفح للمستخدمين. سواء كنت تحصل على Bootstrap من CDN أو تخدمه بنفسك ، تأكد من أنك تصل إليه فقط عبر اتصالات HTTPS.