Optimalizovať

Dovoz Lean Sass

Keď používate Sass vo svojom asset pipeline, uistite sa, že optimalizujete Bootstrap tak, že použijete len @importkomponenty, ktoré potrebujete. Vaše najväčšie optimalizácie budú pravdepodobne pochádzať zo Layout & Componentssekcie nášho 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";

Ak komponent nepoužívate, komentujte ho alebo ho úplne odstráňte. Ak napríklad nepoužívate karusel, odstráňte tento import, aby ste ušetrili určitú veľkosť súboru v kompilovanom CSS. Majte na pamäti, že medzi importmi Sass existujú určité závislosti, ktoré môžu sťažiť vynechanie súboru.

Lean JavaScript

JavaScript Bootstrapu zahŕňa každý komponent v našich primárnych dist súboroch ( bootstrap.jsa bootstrap.min.js), a dokonca aj našu primárnu závislosť (Popper) s našimi zväzkovými súbormi ( bootstrap.bundle.jsa bootstrap.bundle.min.js). Počas prispôsobovania cez Sass nezabudnite odstrániť súvisiaci JavaScript.

Za predpokladu, že napríklad používate svoj vlastný balík JavaScript, ako je Webpack alebo Rollup, importujete iba JavaScript, ktorý plánujete použiť. V nižšie uvedenom príklade ukazujeme, ako jednoducho zahrnúť náš modálny 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';

Týmto spôsobom nezahŕňate žiadny JavaScript, ktorý nechcete použiť pre komponenty, ako sú tlačidlá, karusely a popisy. Ak importujete rozbaľovacie ponuky, popisy alebo kontextové okná, nezabudnite uviesť závislosť Popper vo svojom package.jsonsúbore.

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

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

Autoprefixer .browserslistrc

Bootstrap závisí od funkcie Autoprefixer, ktorá automaticky pridáva predpony prehliadača k určitým vlastnostiam CSS. Predpony určuje náš .browserslistrcsúbor, ktorý sa nachádza v koreňovom adresári Bootstrap repo. Prispôsobením tohto zoznamu prehliadačov a opätovnou kompiláciou Sass sa automaticky odstránia niektoré CSS z vášho skompilovaného CSS, ak existujú predpony dodávateľa jedinečné pre daný prehliadač alebo verziu.

Nepoužitý CSS

Potrebujeme pomoc s touto sekciou, zvážte otvorenie PR. Vďaka!

Aj keď nemáme vopred zostavený príklad na používanie PurgeCSS s Bootstrap, existuje niekoľko užitočných článkov a návodov, ktoré komunita napísala. Tu je niekoľko možností:

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

Nakoniec, tento článok CSS Tricks o nepoužívaných CSS ukazuje, ako používať PurgeCSS a ďalšie podobné nástroje.

Minifikujte a gzipujte

Vždy, keď je to možné, nezabudnite skomprimovať celý kód, ktorý poskytujete svojim návštevníkom. Ak používate súbory Bootstrap dist, skúste sa držať miniifikovaných verzií (označených príponami .min.cssa ). .min.jsAk vytvárate Bootstrap zo zdroja pomocou vlastného zostavovacieho systému, nezabudnite implementovať svoje vlastné minifikátory pre HTML, CSS a JS.

Neblokujúce súbory

Hoci sa miniifikácia a používanie kompresie môže zdať ako dostatočné, vytvorenie neblokovacích súborov je tiež veľkým krokom k tomu, aby bola vaša stránka dobre optimalizovaná a dostatočne rýchla.

Ak v prehliadači Google Chrome používate doplnok Lighthouse , možno ste narazili na FCP. Metrika First Contentful Paint meria čas od začiatku načítavania stránky do vykreslenia akejkoľvek časti obsahu stránky na obrazovke.

FCP môžete zlepšiť odložením nekritického JavaScriptu alebo CSS. Čo to znamená? Jednoducho, JavaScript alebo šablóny so štýlmi, ktoré nemusia byť prítomné na prvom nátere vašej stránky, by mali byť označené atribútmi asyncalebo .defer

To zaisťuje, že menej dôležité zdroje sa načítajú neskôr a neblokujú prvý náter. Na druhej strane, kritické zdroje môžu byť zahrnuté ako vložené skripty alebo štýly.

Ak sa o tom chcete dozvedieť viac, už je o tom veľa skvelých článkov:

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

Vždy používajte HTTPS

Váš web by mal byť dostupný iba cez pripojenia HTTPS vo výrobe. HTTPS zlepšuje bezpečnosť, súkromie a dostupnosť všetkých stránok a neexistuje nič také ako necitlivá webová návštevnosť . Kroky na konfiguráciu vašich webových stránok tak, aby sa zobrazovali výlučne cez HTTPS, sa značne líšia v závislosti od vašej architektúry a poskytovateľa webhostingu, a preto presahujú rozsah týchto dokumentov.

Webové stránky zobrazované cez HTTPS by tiež mali pristupovať ku všetkým šablónam so štýlmi, skriptom a ďalším aktívam cez pripojenia HTTPS. V opačnom prípade budete používateľom posielať zmiešaný aktívny obsah , čo povedie k potenciálnym zraniteľnostiam, pri ktorých môže dôjsť k ohrozeniu lokality zmenou závislosti. To môže viesť k bezpečnostným problémom a upozorneniam v prehliadači zobrazovaným používateľom. Či už získavate Bootstrap z CDN alebo ho obsluhujete sami, uistite sa, že k nemu budete pristupovať iba cez pripojenia HTTPS.