Optimeerige

Hoidke oma projektid lahjad, tundlikud ja hooldatavad, et saaksite pakkuda parimat kogemust ja keskenduda olulisematele töödele.

Sellel lehel

Lean Sass impordib

Kui kasutate Sassi oma varade konveieris, veenduge, et optimeeriksite Bootstrapi, lisades ainult @importvajalikud komponendid. Teie suurimad optimeerimised tulevad tõenäoliselt Layout & Componentsmeie jaotisest 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";

Kui te komponenti ei kasuta, kommenteerige see või kustutage see täielikult. Näiteks kui te karusselli ei kasuta, eemaldage see import, et salvestada teatud failisuurus oma kompileeritud CSS-i. Pidage meeles, et Sassi importimisel on mõned sõltuvused, mis võivad faili väljajätmise keerulisemaks muuta.

Lahja JavaScript

Bootstrapi JavaScript sisaldab kõiki meie peamiste dist-failide komponente ( bootstrap.jsja bootstrap.min.js) ja isegi meie peamist sõltuvust (Popper) koos meie pakettfailidega ( bootstrap.bundle.jsja bootstrap.bundle.min.js). Kui kohandate Sassi kaudu, eemaldage kindlasti seotud JavaScript.

Näiteks eeldades, et kasutate oma JavaScripti komplekteerijat (nt Webpack, Parcel või Vite), impordiksite ainult JavaScripti, mida kavatsete kasutada. Allolevas näites näitame, kuidas lisada meie modaalne 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';

Nii ei lisa te ühtegi JavaScripti, mida te ei kavatse kasutada selliste komponentide jaoks nagu nupud, karussellid ja tööriistaspikrid. Kui impordite rippmenüüd, tööriistavihjeid või hüpikaknaid, lisage failis kindlasti Popperi sõltuvus package.json.

Vaikeekspordid

Failid bootstrap/js/distkasutavad vaikeeksporti , nii et kui soovite mõnda neist kasutada, peate tegema järgmist.

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

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

Autoprefikser .browserslistrc

Bootstrap sõltub Autoprefixerist, et lisada teatud CSS-i atribuutidele automaatselt brauseri eesliited. Eesliited dikteerib meie .browserslistrcfail, mis asub Bootstrapi repo juurtes. Selle brauserite loendi kohandamine ja Sassi uuesti kompileerimine eemaldab teie kompileeritud CSS-ist automaatselt osa CSS-i, kui sellel brauseril või versioonil on unikaalsed müüja eesliited.

Kasutamata CSS

Soovime selle jaotisega abi, palun kaaluge suhtekorralduse avamist. Aitäh!

Kuigi meil pole eelehitatud näidet PurgeCSS -i kasutamiseks koos Bootstrapiga, on kogukonna kirjutatud kasulikke artikleid ja juhiseid. Siin on mõned valikud.

Lõpuks näitab see CSS-i trikkide artikkel kasutamata CSS -i kohta , kuidas kasutada PurgeCSS-i ja muid sarnaseid tööriistu.

Minimeeri ja gzip

Kui võimalik, tihendage kindlasti kogu kood, mida oma külastajatele esitate. Kui kasutate Bootstrap dist-faile, proovige jääda minimeeritud versioonide juurde (näidatud laienditega .min.cssja ). .min.jsKui loote Bootstrapi allikast oma ehitussüsteemiga, rakendage HTML-i, CSS-i ja JS-i jaoks kindlasti oma minimeerijad.

Mitteblokeerivad failid

Kuigi minimeerimine ja tihendamise kasutamine võib tunduda piisav, on failide mitteblokeerivateks muutmine samuti suur samm saidi optimeerimiseks ja piisavalt kiireks muutmisel.

Kui kasutate Google Chrome'is Lighthouse'i pistikprogrammi, võisite FCP-le komistada. Mõõdik First Contentful Paint mõõdab aega lehe laadimise alustamisest kuni lehe sisu mis tahes osa ekraanil kuvamiseni.

Saate FCP-d täiustada, lükates edasi mittekriitilise JavaScripti või CSS-i. Mida see tähendab? Lihtsalt JavaScript või laaditabelid, mis ei pea teie lehe esimesel värvimisel olema, tuleks tähistada atribuudiga asyncvõi .defer

See tagab, et vähem olulised ressursid laaditakse hiljem ja ei blokeeri esimest värvi. Teisest küljest saab kriitilisi ressursse kaasata tekstisiseste skriptide või stiilidena.

Kui soovite selle kohta rohkem teada saada, on selle kohta juba palju suurepäraseid artikleid:

Kasutage alati HTTPS-i

Teie veebisait peaks tootmisrežiimis olema saadaval ainult HTTPS-ühenduste kaudu. HTTPS parandab kõigi saitide turvalisust, privaatsust ja kättesaadavust ning pole olemas sellist asja nagu mittetundlik veebiliiklus . Toimingud veebisaidi ainult HTTPS-i kaudu esitamiseks konfigureerimiseks erinevad olenevalt teie arhitektuurist ja veebimajutusteenuse pakkujast suuresti ning ei kuulu seega nende dokumentide reguleerimisalasse.

HTTPS-i kaudu teenindatavad saidid peaksid samuti HTTPS-ühenduse kaudu pääsema juurde kõikidele stiilitabelitele, skriptidele ja muudele varadele. Vastasel juhul saadate kasutajatele erinevat aktiivset sisu , mis toob kaasa võimalikud haavatavused, kus saiti võib sõltuvuse muutmine ohustada. See võib põhjustada turvaprobleeme ja kasutajatele kuvada brauseris hoiatusi. Olenemata sellest, kas hankite Bootstrapi CDN-ist või teenindate seda ise, veenduge, et pääsete sellele juurde ainult HTTPS-ühenduste kaudu.