Optimaliser

Lean Sass importerer

Når du bruker Sass i eiendelpipelinen din, sørg for at du optimaliserer Bootstrap ved kun @importå bruke komponentene du trenger. Dine største optimaliseringer vil sannsynligvis komme fra Layout & Componentsdelen av vår 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";

Hvis du ikke bruker en komponent, kommenter den eller slett den helt. Hvis du for eksempel ikke bruker karusellen, fjern den importen for å lagre en filstørrelse i den kompilerte CSS-en. Husk at det er noen avhengigheter på tvers av Sass-importer som kan gjøre det vanskeligere å utelate en fil.

Lean JavaScript

Bootstraps JavaScript inkluderer hver komponent i våre primære dist-filer ( bootstrap.jsog bootstrap.min.js), og til og med vår primære avhengighet (Popper) med pakkefilene våre ( bootstrap.bundle.jsog bootstrap.bundle.min.js). Mens du tilpasser via Sass, sørg for å fjerne relatert JavaScript.

For eksempel, forutsatt at du bruker din egen JavaScript-bunter som Webpack, Parcel eller Vite, vil du bare importere JavaScript-en du planlegger å bruke. I eksemplet nedenfor viser vi hvordan du bare inkluderer vår modale 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';

På denne måten inkluderer du ikke JavaScript du ikke har tenkt å bruke for komponenter som knapper, karuseller og verktøytips. Hvis du importerer rullegardiner, verktøytips eller popovers, må du huske å liste Popper-avhengigheten i package.jsonfilen din.

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

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

Autoprefixer .browserslistrc

Bootstrap er avhengig av Autoprefixer for automatisk å legge til nettleserprefikser til visse CSS-egenskaper. Prefikser er diktert av .browserslistrcfilen vår, som finnes i roten til Bootstrap-repoen. Ved å tilpasse denne listen over nettlesere og kompilere Sass på nytt, vil noen CSS automatisk fjernes fra den kompilerte CSS-en, hvis det er leverandørprefikser som er unike for den nettleseren eller versjonen.

Ubrukt CSS

Ønskes hjelp med denne delen, vurder å åpne en PR. Takk!

Selv om vi ikke har et forhåndsbygget eksempel for bruk av PurgeCSS med Bootstrap, er det noen nyttige artikler og gjennomganger som fellesskapet har skrevet. Her er noen alternativer:

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

Til slutt viser denne CSS Tricks-artikkelen om ubrukt CSS hvordan du bruker PurgeCSS og andre lignende verktøy.

Forminsk og gzip

Når det er mulig, sørg for å komprimere all koden du viser til de besøkende. Hvis du bruker Bootstrap dist-filer, prøv å holde deg til de minifiserte versjonene (indikert med utvidelsene .min.cssog ). .min.jsHvis du bygger Bootstrap fra kilden med ditt eget byggesystem, sørg for å implementere dine egne minifiers for HTML, CSS og JS.

Ikke-blokkerende filer

Selv om minifisering og bruk av komprimering kan virke som nok, er det å gjøre filene dine til ikke-blokkerende filer også et stort skritt for å gjøre nettstedet ditt godt optimalisert og raskt nok.

Hvis du bruker en Lighthouse -plugin i Google Chrome, kan det hende du har snublet over FCP. First Contentful Paint- beregningen måler tiden fra siden begynner å lastes til en del av sidens innhold gjengis på skjermen.

Du kan forbedre FCP ved å utsette ikke-kritisk JavaScript eller CSS. Hva betyr det? Ganske enkelt, JavaScript eller stilark som ikke trenger å være tilstede på den første malingen av siden din, bør merkes med asynceller deferattributter.

Dette sikrer at de mindre viktige ressursene lastes inn senere og ikke blokkerer den første malingen. På den annen side kan kritiske ressurser inkluderes som innebygde skript eller stiler.

Hvis du vil lære mer om dette, finnes det allerede mange gode artikler om det:

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

Bruk alltid HTTPS

Nettstedet ditt skal kun være tilgjengelig over HTTPS-tilkoblinger i produksjon. HTTPS forbedrer sikkerheten, personvernet og tilgjengeligheten til alle nettsteder, og det finnes ikke noe som heter ikke-sensitiv nettrafikk . Trinnene for å konfigurere nettstedet ditt til å bli servert eksklusivt over HTTPS varierer mye avhengig av arkitekturen og webhotellleverandøren din, og er derfor utenfor omfanget av disse dokumentene.

Nettsteder som serveres over HTTPS bør også få tilgang til alle stilark, skript og andre ressurser via HTTPS-tilkoblinger. Ellers vil du sende brukere blandet aktivt innhold , noe som fører til potensielle sårbarheter der et nettsted kan bli kompromittert ved å endre en avhengighet. Dette kan føre til sikkerhetsproblemer og advarsler i nettleseren som vises til brukere. Enten du får Bootstrap fra et CDN eller serverer det selv, sørg for at du bare får tilgang til det via HTTPS-tilkoblinger.