Optimiziraj

Lean Sass uvozi

Ko uporabljate Sass v svojem cevovodu sredstev, se prepričajte, da optimizirate Bootstrap tako, da vključite samo @importkomponente, ki jih potrebujete. Vaše največje optimizacije bodo verjetno prišle iz Layout & Componentsrazdelka našega 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";

Če komponente ne uporabljate, jo komentirajte ali v celoti izbrišite. Če na primer ne uporabljate vrtiljaka, odstranite ta uvoz, da shranite nekaj velikosti datoteke v svoj prevedeni CSS. Upoštevajte, da je med uvozi Sass nekaj odvisnosti, zaradi katerih je morda težje izpustiti datoteko.

Lean JavaScript

Bootstrapov JavaScript vključuje vsako komponento v naših primarnih datotekah dist ( bootstrap.jsin bootstrap.min.js) in celo našo primarno odvisnost (Popper) z našimi datotekami svežnja ( bootstrap.bundle.jsin bootstrap.bundle.min.js). Medtem ko prilagajate prek Sass, ne pozabite odstraniti povezanega JavaScripta.

Na primer, ob predpostavki, da uporabljate svoj lastni povezovalnik JavaScript, kot je Webpack ali Rollup, bi uvozili samo JavaScript, ki ga nameravate uporabiti. V spodnjem primeru prikazujemo, kako samo vključ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 ta način ne vključite JavaScripta, ki ga ne nameravate uporabiti za komponente, kot so gumbi, vrtiljaki in namigi orodij. Če uvažate spustne menije, namige orodij ali pojavna okna, obvezno navedite odvisnost Popperja v svoji package.jsondatoteki.

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

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

Samodejna predpona .browserslistrc

Bootstrap je odvisen od Autoprefixer za samodejno dodajanje predpon brskalnika določenim lastnostim CSS. Predpone narekuje naša .browserslistrcdatoteka, ki jo najdete v korenu Bootstrap repoja. Prilagajanje tega seznama brskalnikov in ponovno prevajanje Sass bo samodejno odstranilo nekaj CSS iz vašega prevedenega CSS, če obstajajo predpone prodajalca, edinstvene za ta brskalnik ali različico.

Neuporabljen CSS

Potrebujem pomoč pri tem razdelku, razmislite o odprtju PR-ja. hvala

Čeprav nimamo vnaprej izdelanega primera za uporabo PurgeCSS z Bootstrapom, obstaja nekaj koristnih člankov in navodil, ki jih je napisala skupnost. Tukaj je nekaj možnosti:

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

Nazadnje, ta članek CSS Tricks o neuporabljenem CSS prikazuje, kako uporabljati PurgeCSS in druga podobna orodja.

Pomanjšaj in gzip

Če je le mogoče, stisnite vso kodo, ki jo strežete svojim obiskovalcem. Če uporabljate datoteke Bootstrap dist, se poskusite držati pomanjšanih različic (označenih z razširitvami .min.cssin ). .min.jsČe gradite Bootstrap iz vira z lastnim gradbenim sistemom, ne pozabite implementirati lastnih minifikatorjev za HTML, CSS in JS.

Datoteke brez blokiranja

Medtem ko se zdi, da je zmanjševanje in uporaba stiskanja dovolj, je tudi to, da vaše datoteke neblokirajo, velik korak k temu, da bo vaše spletno mesto dobro optimizirano in dovolj hitro.

Če v brskalniku Google Chrome uporabljate vtičnik Lighthouse , ste morda naleteli na FCP. Meritev First Contentful Paint meri čas od trenutka, ko se stran začne nalagati, do trenutka, ko je kateri koli del vsebine strani upodobljen na zaslonu.

FCP lahko izboljšate tako, da odložite nekritični JavaScript ali CSS. Kaj to pomeni? Preprosto, JavaScript ali slogovne tabele, za katere ni treba, da so prisotni na prvi barvi vaše strani, morajo biti označeni z asyncali deferatributi.

To zagotavlja, da se manj pomembni viri naložijo pozneje in ne blokirajo prvega barvanja. Po drugi strani pa so kritični viri lahko vključeni kot vgrajeni skripti ali slogi.

Če želite izvedeti več o tem, obstaja že veliko odličnih člankov o tem:

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

Vedno uporabljajte HTTPS

Vaše spletno mesto bi moralo biti na voljo samo prek povezav HTTPS v produkciji. HTTPS izboljšuje varnost, zasebnost in razpoložljivost vseh spletnih mest in ne obstaja neobčutljiv spletni promet . Koraki za konfiguracijo vašega spletnega mesta za izključno uporabo HTTPS se zelo razlikujejo glede na vašo arhitekturo in ponudnika spletnega gostovanja, zato presegajo obseg teh dokumentov.

Spletna mesta, ki delujejo prek HTTPS, morajo prav tako dostopati do vseh slogovnih listov, skriptov in drugih sredstev prek povezav HTTPS. V nasprotnem primeru boste uporabnikom pošiljali mešano aktivno vsebino , kar bo vodilo do morebitnih ranljivosti, kjer bo spletno mesto lahko ogroženo s spreminjanjem odvisnosti. To lahko povzroči varnostne težave in opozorila v brskalniku, prikazana uporabnikom. Ne glede na to, ali pridobivate Bootstrap iz CDN ali ga strežete sami, zagotovite, da do njega dostopate samo prek povezav HTTPS.