אָפּטימיזע

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 ימפּאָרץ וואָס קען מאַכן עס מער שווער צו פאַרלאָזן אַ טעקע.

דאַר דזשאַוואַסקריפּט

באָאָטסטראַפּ ס דזשאַוואַסקריפּט ינקלודז יעדער קאָמפּאָנענט אין אונדזער ערשטיק דיסט טעקעס ( bootstrap.jsאון bootstrap.min.js), און אפילו אונדזער ערשטיק דעפּענדענסי (פּאַפּער) מיט אונדזער פּעקל טעקעס ( bootstrap.bundle.jsאון bootstrap.bundle.min.js). בשעת איר קאַסטאַמייז דורך Sass, זיין זיכער צו באַזייַטיקן פֿאַרבונדענע דזשאַוואַסקריפּט.

פֿאַר בייַשפּיל, אויב איר נוצן דיין אייגענע דזשאַוואַסקריפּט בונדלער ווי וועבפּאַקק אָדער ראָללופּ, איר וואָלט נאָר אַרייַנפיר די דזשאַוואַסקריפּט איר פּלאַן צו נוצן. אין דעם בייַשפּיל אונטן, מיר ווייַזן ווי צו אַרייַננעמען אונדזער מאָדאַל דזשאַוואַסקריפּט:

// 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';

אויף דעם וועג, איר זענט נישט אַרייַנגערעכנט קיין דזשאַוואַסקריפּט וואָס איר טאָן ניט בדעה צו נוצן פֿאַר קאַמפּאָונאַנץ ווי קנעפּלעך, קעראַסאַלז און מכשירים. אויב איר ימפּאָרטינג דראָפּדאָוונס, טאָאָלטיפּס אָדער פּאָפּאָווערס, זיין זיכער צו רשימה די פּאָפּער דעפּענדענסי אין דיין package.jsonטעקע.

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

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

אַוטאָפּרעפיקסער .browserslistrc

Bootstrap דעפּענדס אויף Autoprefixer צו אויטאָמאַטיש לייגן בלעטערער פּרעפיקס צו זיכער קסס פּראָפּערטיעס. פּרעפיקסעס זענען דיקטייטיד דורך אונדזער .browserslistrcטעקע, געפֿונען אין די וואָרצל פון די באָאָטסטראַפּ רעפּאָ. קאַסטאַמייזינג דעם רשימה פון בראַוזערז און ריקאָמפּיילינג די 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 טריקס אַרטיקל אויף אַניוזד CSS ווייזט ווי צו נוצן PurgeCSS און אנדערע ענלעך מכשירים.

מיניפי און gzip

ווען מעגלעך, זיין זיכער צו קאָמפּרעס אַלע די קאָד איר דינען צו דיין וויזאַטערז. אויב איר נוצן Bootstrap דיסט טעקעס, פּרובירן צו האַלטן זיך צו די מיניפיעד ווערסיעס (ינדיקאַטעד דורך די .min.cssאון .min.jsיקסטענשאַנז). אויב איר בויען Bootstrap פֿון דער מקור מיט דיין אייגענע בויען סיסטעם, זיין זיכער צו ינסטרומענט דיין אייגענע מיניפיערס פֿאַר HTML, CSS און JS.

ניט-בלאַקינג טעקעס

בשעת מיניפיינג און ניצן קאַמפּרעשאַן קען ויסקומען ווי גענוג, מאכן דיין טעקעס ניט-בלאַקינג אָנעס איז אויך אַ גרויס שריט אין מאכן דיין פּלאַץ געזונט-אָפּטימיזעד און שנעל גענוג.

אויב איר נוצן אַ ליגהטהאָוסע פּלוגין אין Google קראָום, איר קען האָבן סטאַמבאַלד איבער FCP. דער ערשטער אינהאַלטפול פּיינט מעטריק מעסטן די צייט פון ווען די בלאַט סטאַרץ לאָודינג צו ווען קיין טייל פון די אינהאַלט פון די בלאַט איז רענדערד אויף דעם עקראַן.

איר קענען פֿאַרבעסערן FCP דורך דיפערינג ניט-קריטיש דזשאַוואַסקריפּט אָדער CSS. וואס מיינט דאס? סימפּלי, דזשאַוואַסקריפּט אָדער סטילעשעעץ וואָס טאָן ניט דאַרפֿן צו זיין פאָרשטעלן אויף דער ערשטער פּיינט פון דיין בלאַט זאָל זיין אנגעצייכנט מיט asyncאָדער deferאַטריביוץ.

דאָס ינשורז אַז די ווייניקער וויכטיק רעסורסן זענען לאָודיד שפּעטער און נישט בלאַקינג דער ערשטער פאַרב. אויף די אנדערע האַנט, קריטיש רעסורסן קענען זיין אַרייַנגערעכנט ווי ינלינע סקריפּס אָדער סטיילז.

אויב איר ווילן צו לערנען מער וועגן דעם, עס זענען שוין אַ פּלאַץ פון גרויס אַרטיקלען וועגן אים:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

שטענדיק נוצן HTTPS

דיין וועבזייטל זאָל זיין בארעכטיגט בלויז איבער HTTPS קאַנעקשאַנז אין פּראָדוקציע. HTTPS ימפּרוווז די זיכערהייט, פּריוואַטקייט און אַוויילאַבילאַטי פון אַלע זייטלעך, און עס איז ניט אַזאַ זאַך ווי ניט-שפּירעוודיק וועב פאַרקער . די סטעפּס צו קאַנפיגיער דיין וועבזייטל צו זיין סערווירט אויסשליסלעך איבער הטטפּס זענען וויידלי דיפּענדינג אויף דיין אַרקאַטעקטשער און וועב האָסטינג שפּייַזער, און אַזוי זענען ווייַטער פון די פאַרנעם פון די דאָקומענטן.

זייטלעך געדינט איבער הטטפּס זאָל אויך אַקסעס אַלע סטילעשעעץ, סקריפּס און אנדערע אַסעץ איבער הטטפּס קאַנעקשאַנז. אַנדערש, איר וועט שיקן יוזערז געמישט אַקטיוו אינהאַלט , וואָס פירן צו פּאָטענציעל וואַלנעראַביליטיז ווו אַ פּלאַץ קענען זיין קאַמפּראַמייזד דורך ענדערן אַ דעפּענדענסי. דאָס קען פירן צו זיכערהייט ישוז און וואָרנינגז אין בלעטערער געוויזן צו יוזערז. צי איר באַקומען Bootstrap פֿון אַ CDN אָדער דינען עס זיך, ענשור אַז איר אַקסעס עס בלויז דורך HTTPS קאַנעקשאַנז.