Optimaliser
Hold prosjektene dine slanke, responsive og vedlikeholdbare, slik at du kan levere den beste opplevelsen og fokusere på viktigere jobber.
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 & Components
delen av vår 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";
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.js
og bootstrap.min.js
), og til og med vår primære avhengighet (Popper) med pakkefilene våre ( bootstrap.bundle.js
og 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 eller Rollup, 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/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.json
filen din.
Standard eksporter
Filer som bootstrap/js/dist
bruker standard eksport , så hvis du vil bruke en av dem må du gjøre følgende:
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 .browserslistrc
filen 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.css
og ). .min.js
Hvis 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 async
eller defer
attributter.
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:
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.