Optimizați

Importurile Lean Sass

Când utilizați Sass în pipeline-ul dvs. de active, asigurați-vă că optimizați Bootstrap utilizând numai @importcomponentele de care aveți nevoie. Cele mai mari optimizări ale dvs. vor veni probabil din Layout & Componentssecțiunea 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";

Dacă nu utilizați o componentă, comentați-o sau ștergeți-o complet. De exemplu, dacă nu utilizați caruselul, eliminați acel import pentru a salva o dimensiune a fișierului în CSS compilat. Rețineți că există unele dependențe între importurile Sass care pot face mai dificilă omiterea unui fișier.

Lean JavaScript

JavaScript Bootstrap include fiecare componentă din fișierele noastre dist primare ( bootstrap.jsși bootstrap.min.js) și chiar dependența noastră principală (Popper) cu fișierele noastre pachet ( bootstrap.bundle.jsși bootstrap.bundle.min.js). În timp ce personalizați prin Sass, asigurați-vă că eliminați JavaScript aferent.

De exemplu, presupunând că utilizați propriul pachet JavaScript, cum ar fi Webpack, Parcel sau Vite, veți importa doar JavaScript pe care intenționați să îl utilizați. În exemplul de mai jos, arătăm cum să includem doar JavaScript-ul nostru modal:

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

În acest fel, nu includeți niciun JavaScript pe care nu intenționați să îl utilizați pentru componente precum butoanele, caruselele și sfaturile instrumente. Dacă importați meniuri derulante, sfaturi cu instrumente sau popover, asigurați-vă că enumerați dependența Popper în package.jsonfișierul dvs.

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

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

Autoprefixer .browserslistrc

Bootstrap depinde de Autoprefixer pentru a adăuga automat prefixe de browser la anumite proprietăți CSS. Prefixele sunt dictate de .browserslistrcfișierul nostru, găsit în rădăcina depozitului Bootstrap. Personalizarea acestei liste de browsere și recompilarea Sass vor elimina automat unele CSS din CSS-ul dvs. compilat, dacă există prefixe de furnizor unice pentru acel browser sau versiune.

CSS neutilizat

Ajutor dorit cu această secțiune, vă rugăm să luați în considerare deschiderea unui PR. Mulțumiri!

Deși nu avem un exemplu predefinit pentru utilizarea PurgeCSS cu Bootstrap, există câteva articole utile și explicații pe care comunitatea le-a scris. Iată câteva opțiuni:

• 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/

În cele din urmă, acest articol CSS Tricks despre CSS neutilizat arată cum să utilizați PurgeCSS și alte instrumente similare.

Minimizează și gzip

Ori de câte ori este posibil, asigurați-vă că comprimați tot codul pe care îl furnizați vizitatorilor. Dacă utilizați fișiere Bootstrap dist, încercați să rămâneți la versiunile minimizate (indicate de extensii .min.cssși ). .min.jsDacă construiți Bootstrap din sursă cu propriul sistem de compilare, asigurați-vă că implementați propriile dvs. minificatoare pentru HTML, CSS și JS.

Fișiere neblocante

În timp ce minimizarea și utilizarea compresiei ar putea părea suficiente, a face fișierele dvs. care nu blochează este, de asemenea, un pas important în a face site-ul dvs. bine optimizat și suficient de rapid.

Dacă utilizați un plugin Lighthouse în Google Chrome, este posibil să fi dat peste FCP. Valoarea First Contentful Paint măsoară timpul de la momentul în care pagina începe să se încarce până la momentul în care orice parte a conținutului paginii este redată pe ecran.

Puteți îmbunătăți FCP amânând JavaScript sau CSS necritici. Ce inseamna asta? Pur și simplu, JavaScript sau foile de stil care nu trebuie să fie prezente pe prima vopsea a paginii dvs. ar trebui să fie marcate cu asyncsau cu deferatribute.

Acest lucru asigură că resursele mai puțin importante sunt încărcate mai târziu și nu blochează prima vopsea. Pe de altă parte, resursele critice pot fi incluse ca scripturi sau stiluri inline.

Dacă doriți să aflați mai multe despre acest lucru, există deja o mulțime de articole grozave despre asta:

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

Utilizați întotdeauna HTTPS

Site-ul dvs. ar trebui să fie disponibil numai prin conexiuni HTTPS în producție. HTTPS îmbunătățește securitatea, confidențialitatea și disponibilitatea tuturor site-urilor și nu există trafic web nesensibil . Pașii pentru configurarea site-ului dvs. web pentru a fi servit exclusiv prin HTTPS variază foarte mult în funcție de arhitectura și furnizorul dvs. de găzduire web și, prin urmare, depășesc domeniul de aplicare al acestor documente.

Site-urile difuzate prin HTTPS ar trebui să acceseze, de asemenea, toate foile de stil, scripturile și alte materiale prin conexiuni HTTPS. În caz contrar, veți trimite utilizatorilor conținut activ mixt , ceea ce duce la potențiale vulnerabilități în care un site poate fi compromis prin modificarea unei dependențe. Acest lucru poate duce la probleme de securitate și avertismente în browser afișate utilizatorilor. Indiferent dacă obțineți Bootstrap de la un CDN sau îl serviți singur, asigurați-vă că îl accesați numai prin conexiuni HTTPS.