Optimizirajte

Lean Sass uvozi

Kada koristite Sass u svom cjevovodu imovine, pobrinite se da optimizirate Bootstrap tako da unesete samo @importone komponente koje su vam potrebne. Vaše najveće optimizacije vjerojatno će doći iz Layout & Componentsodjeljka naše 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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Ako ne koristite komponentu, ostavite je u komentaru ili je potpuno izbrišite. Na primjer, ako ne koristite vrtuljak, uklonite taj uvoz da biste spremili određenu veličinu datoteke u svoj kompilirani CSS. Imajte na umu da postoje neke ovisnosti u Sass uvozima koje mogu otežati izostavljanje datoteke.

Lean JavaScript

Bootstrapov JavaScript uključuje svaku komponentu u našim primarnim dist datotekama ( bootstrap.jsi bootstrap.min.js), pa čak i našu primarnu ovisnost (Popper) s našim paketnim datotekama ( bootstrap.bundle.jsi bootstrap.bundle.min.js). Dok prilagođavate putem Sass-a, svakako uklonite povezani JavaScript.

Na primjer, pod pretpostavkom da koristite vlastiti JavaScript bundler kao što je Webpack ili Rollup, uvezli biste samo JavaScript koji planirate koristiti. U donjem primjeru pokazujemo kako jednostavno 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/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 gumbi, vrtuljci i opisi alata. Ako uvozite padajuće izbornike, opise alata ili skočne prozore, obavezno navedite Popper ovisnost u svojoj package.jsondatoteci.

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

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

Automatski prefiks .browserslistrc

Bootstrap ovisi o Autoprefixer-u za automatsko dodavanje prefiksa preglednika u određena CSS svojstva. Prefikse diktira naša .browserslistrcdatoteka, koja se nalazi u korijenu Bootstrap repoa. Prilagođavanje ovog popisa preglednika i ponovno kompajliranje Sass-a automatski će ukloniti dio CSS-a iz vašeg kompajliranog CSS-a, ako postoje prefiksi dobavljača jedinstveni za taj preglednik ili verziju.

Neiskorišteni CSS

Potrebna je pomoć za ovaj odjeljak, razmislite o otvaranju PR-a. Hvala!

Iako nemamo unaprijed izrađen primjer za korištenje PurgeCSS- a s Bootstrapom, postoji nekoliko korisnih članaka i uputa koje je napisala zajednica. 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 neiskorištenom CSS -u pokazuje kako koristiti PurgeCSS i druge slične alate.

Miniziraj i gzip

Kad god je to moguće, svakako komprimirajte sav kod koji poslužujete posjetiteljima. Ako koristite Bootstrap dist datoteke, pokušajte se držati umanjenih verzija (označenih ekstenzijama .min.cssi ). .min.jsAko gradite Bootstrap iz izvora s vlastitim sustavom izrade, svakako implementirajte vlastite minifikatore za HTML, CSS i JS.

Neblokirajuće datoteke

Iako se minimiziranje 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 Chromeu, možda ste naletjeli na FCP. Mjerni podatak First Contentful Paint mjeri vrijeme od trenutka kada se stranica počne učitavati do trenutka kada se bilo koji dio sadržaja stranice prikazuje na zaslonu.

Možete poboljšati FCP odgodom nekritičnog JavaScripta ili CSS-a. Što to znači? Jednostavno, JavaScript ili stilske tablice koje ne moraju biti prisutne na prvoj slici vaše stranice trebaju biti označene atributima asyncili .defer

To osigurava da se manje važni resursi učitavaju kasnije i da ne blokiraju prvo bojanje. S druge strane, kritični resursi mogu biti uključeni kao ugrađene 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 bi web stranica trebala biti dostupna samo putem HTTPS veza u produkciji. HTTPS poboljšava sigurnost, privatnost i dostupnost svih web-mjesta, a ne postoji neosjetljivi web-promet . Koraci za konfiguriranje vaše web stranice tako da se poslužuje isključivo putem HTTPS-a uvelike se razlikuju ovisno o vašoj arhitekturi i pružatelju web hostinga, pa su stoga izvan opsega ovih dokumenata.

Web-lokacije koje se poslužuju putem HTTPS-a također bi trebale pristupati svim tablicama stilova, skriptama i drugim sredstvima putem HTTPS veza. U protivnom ćete korisnicima slati mješoviti aktivni sadržaj , što će dovesti do potencijalnih ranjivosti gdje web-mjesto može biti ugroženo mijenjanjem ovisnosti. To može dovesti do sigurnosnih problema i upozorenja u pregledniku prikazanih korisnicima. Bez obzira dobivate li Bootstrap s CDN-a ili ga sami poslužujete, pobrinite se da mu pristupate samo putem HTTPS veza.