Optimizirajte

Lean Sass uvoz

Kada koristite Sass u svom kanalu sredstava, pobrinite se da optimizirate Bootstrap tako što ćete koristiti samo @importkomponente koje su vam potrebne. Vaše najveće optimizacije će vjerovatno doći iz Layout & Componentsodjeljka našeg 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";

Ako ne koristite komponentu, komentirajte je ili je izbrišite u potpunosti. Na primjer, ako ne koristite vrtuljak, uklonite taj uvoz da biste sačuvali neku veličinu datoteke u prevedenom CSS-u. Imajte na umu da postoje neke zavisnosti u Sass uvozu koje mogu otežati izostavljanje datoteke.

Lean JavaScript

Bootstrap-ov JavaScript uključuje svaku komponentu u našim primarnim dist datotekama ( bootstrap.jsi bootstrap.min.js), pa čak i našu primarnu zavisnost (Popper) sa našim bundle datotekama ( bootstrap.bundle.jsi bootstrap.bundle.min.js). Dok prilagođavate putem Sass-a, obavezno uklonite povezani JavaScript.

Na primjer, pod pretpostavkom da koristite vlastiti JavaScript paket kao što je Webpack, Parcel ili Vite, uvezli biste samo JavaScript koji planirate koristiti. U primjeru ispod pokazujemo kako samo uključiti naš modalni 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';

Na ovaj način ne uključujete JavaScript koji ne namjeravate koristiti za komponente kao što su dugmad, vrtuljke i opisi alata. Ako uvozite padajuće menije, opise alata ili iskačuće stranice, obavezno navedite Popper ovisnost u svojoj package.jsondatoteci.

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

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

Autoprefixer .browserslistrc

Bootstrap zavisi od Autoprefixer-a za automatsko dodavanje prefiksa pretraživača određenim CSS svojstvima. Prefikse diktira naš .browserslistrcfajl, koji se nalazi u korenu Bootstrap repo. Prilagođavanje ove liste pretraživača i ponovno kompajliranje Sass-a će automatski ukloniti neki CSS iz vašeg prevedenog CSS-a, ako postoje prefiksi dobavljača jedinstveni za taj pretraživač ili verziju.

Nekorišten CSS

Potrebna je pomoć oko ovog odjeljka, razmislite o otvaranju PR-a. Hvala!

Iako nemamo unaprijed napravljen primjer za korištenje PurgeCSS- a s Bootstrapom, postoje neki korisni članci i vodiči koje je zajednica napisala. Evo nekoliko opcija:

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

Na kraju, ovaj članak o CSS trikovima o nekorištenom CSS- u pokazuje kako koristiti PurgeCSS i druge slične alate.

Umanjite i gzip

Kad god je moguće, obavezno komprimirajte sav kod koji servirate svojim posjetiteljima. Ako koristite Bootstrap dist datoteke, pokušajte se držati minimiziranih verzija (označenih ekstenzijama .min.cssi ). .min.jsAko gradite Bootstrap iz izvora sa vlastitim sistemom gradnje, obavezno implementirajte vlastite minififikatore za HTML, CSS i JS.

Fajlovi koji ne blokiraju

Iako se umanjivanje i korištenje kompresije može činiti dovoljnim, stvaranje datoteka koje ne blokiraju također je veliki korak u tome da vaša web stranica bude dobro optimizirana i dovoljno brza.

Ako koristite Lighthouse dodatak u Google Chrome-u, možda ste naišli na FCP. metrika First Contentful Paint mjeri vrijeme od početka učitavanja stranice do trenutka kada se bilo koji dio sadržaja stranice prikaže na ekranu.

Možete poboljšati FCP odlaganjem nekritičnog JavaScripta ili CSS-a. Sta to znaci? Jednostavno, JavaScript ili stilovi koji ne moraju biti prisutni na prvoj boji vaše stranice trebaju biti označeni sa asyncili deferatributima.

Ovo osigurava da se manje važni resursi učitavaju kasnije i da ne blokiraju prvu boju. S druge strane, kritični resursi mogu biti uključeni kao inline skripte ili stilovi.

Ako želite saznati više o tome, već postoji mnogo sjajnih članaka o tome:

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

Uvijek koristite HTTPS

Vaša web stranica bi trebala biti dostupna samo preko HTTPS veza u produkciji. HTTPS poboljšava sigurnost, privatnost i dostupnost svih web lokacija i ne postoji nešto poput neosjetljivog web prometa . Koraci za konfiguriranje vaše web stranice da se poslužuje isključivo preko HTTPS-a uvelike variraju ovisno o vašoj arhitekturi i web hosting provajderu i stoga su izvan dosega ovih dokumenata.

Web lokacije koje se poslužuju preko HTTPS-a također trebaju pristupiti svim stilovima, skriptama i drugim sredstvima preko HTTPS veza. U suprotnom, korisnicima ćete slati mješoviti aktivni sadržaj , što će dovesti do potencijalnih ranjivosti gdje se web lokacija može kompromitovati promjenom zavisnosti. To može dovesti do sigurnosnih problema i upozorenja u pretraživaču koja se prikazuju korisnicima. Bilo da preuzimate Bootstrap sa CDN-a ili ga sami servirate, osigurajte da mu pristupate samo preko HTTPS veza.