בצע אופטימיזציה

שמור על הפרויקטים שלך רזים, מגיבים וניתנים לתחזוקה כדי שתוכל לספק את החוויה הטובה ביותר ולהתמקד בעבודות חשובות יותר.

בעמוד זה

Lean Sass מייבאת

כאשר אתה משתמש ב-Sass בצינור הנכסים שלך, ודא שאתה מייעל את Bootstrap על ידי שימוש רק @importברכיבים שאתה צריך. האופטימיזציות הגדולות ביותר שלך יבואו ככל הנראה Layout & Componentsמהקטע של bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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 רזה

ה-JavaScript של Bootstrap כולל כל רכיב בקבצי הדיסט הראשיים שלנו ( bootstrap.jsו bootstrap.min.js), ואפילו את התלות העיקרית שלנו (Popper) עם קבצי החבילה שלנו ( bootstrap.bundle.jsו bootstrap.bundle.min.js). בזמן שאתה עושה התאמה אישית דרך Sass, הקפד להסיר JavaScript קשור.

לדוגמה, בהנחה שאתה משתמש ב-JavaScript משלך כמו Webpack, Parcel או Vite, אתה מייבא רק את 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 שאינך מתכוון להשתמש בו עבור רכיבים כמו לחצנים, קרוסלות וטיפים לכלים. אם אתה מייבא תפריטים נפתחים, עצות כלים או popovers, הקפד לרשום את התלות של Popper package.jsonבקובץ שלך.

ברירת מחדל לייצוא

קבצים שנמצאים bootstrap/js/distבשימוש בייצוא ברירת המחדל , כך שאם ברצונך להשתמש באחד מהם, עליך לבצע את הפעולות הבאות:

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

Autoprefixer .browserslistrc

Bootstrap תלוי ב-Autoprefixer כדי להוסיף אוטומטית קידומות דפדפן למאפייני CSS מסוימים. הקידומות מוכתבות על ידי .browserslistrcהקובץ שלנו, שנמצא בשורש ריפו של Bootstrap. התאמה אישית של רשימת הדפדפנים הזו והידור מחדש של ה-Sass יסיר אוטומטית חלק מה-CSS מה-CSS המהודר שלך, אם יש קידומות ספק ייחודיות לאותו דפדפן או גרסה.

CSS לא בשימוש

דרושה עזרה בסעיף זה, אנא שקול לפתוח יח"צ. תודה!

אמנם אין לנו דוגמה בנויה מראש לשימוש ב- PurgeCSS עם Bootstrap, אבל יש כמה מאמרים והליכים מועילים שהקהילה כתבה. הנה כמה אפשרויות:

לבסוף, מאמר 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.