Optimaliseer

Lean Sass invoere

As u Sass in u batepyplyn gebruik, maak seker dat u Bootstrap optimeer deur slegs @importdie komponente wat u benodig, in te voer. Jou grootste optimaliserings sal waarskynlik uit die Layout & Componentsafdeling van ons kom 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";

As jy nie 'n komponent gebruik nie, maak kommentaar daarop of vee dit heeltemal uit. Byvoorbeeld, as jy nie die karrousel gebruik nie, verwyder daardie invoer om 'n lêergrootte in jou saamgestelde CSS te stoor. Hou in gedagte dat daar 'n paar afhanklikhede oor Sass-invoere is wat dit moeiliker kan maak om 'n lêer weg te laat.

Leun JavaScript

Bootstrap se JavaScript bevat elke komponent in ons primêre dist-lêers ( bootstrap.jsen bootstrap.min.js), en selfs ons primêre afhanklikheid (Popper) met ons bondellêers ( bootstrap.bundle.jsen bootstrap.bundle.min.js). Terwyl jy pasmaak via Sass, maak seker dat jy verwante JavaScript verwyder.

As u byvoorbeeld aanvaar dat u u eie JavaScript-bundelaar soos Webpack of Rollup gebruik, sal u slegs die JavaScript invoer wat u beplan om te gebruik. In die voorbeeld hieronder wys ons hoe om net ons modale JavaScript in te sluit:

// 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';

Op hierdie manier sluit jy nie enige JavaScript in wat jy nie van plan is om te gebruik vir komponente soos knoppies, karrousels en gereedskapwenke nie. As jy dropdowns, tooltips of popovers invoer, maak seker dat jy die Popper-afhanklikheid in jou package.jsonlêer lys.

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

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

Autoprefixer .browserslistrc

Bootstrap is afhanklik van Autoprefixer om outomaties blaaiervoorvoegsels by sekere CSS-eienskappe te voeg. Voorvoegsels word bepaal deur ons .browserslistrclêer, gevind in die wortel van die Bootstrap repo. Deur hierdie lys blaaiers aan te pas en die Sass weer saam te stel, sal sommige CSS outomaties van jou saamgestelde CSS verwyder word, as daar verskaffervoorvoegsels uniek aan daardie blaaier of weergawe is.

Ongebruikte CSS

Hulp gesoek met hierdie afdeling, oorweeg dit asseblief om 'n PR te open. Dankie!

Alhoewel ons nie 'n voorafgeboude voorbeeld het vir die gebruik van PurgeCSS met Bootstrap nie, is daar 'n paar nuttige artikels en deurlees wat die gemeenskap geskryf het. Hier is 'n paar opsies:

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

Laastens wys hierdie CSS Tricks-artikel oor ongebruikte CSS hoe om PurgeCSS en ander soortgelyke instrumente te gebruik.

Verklein en gzip

Waar moontlik, maak seker dat jy al die kode wat jy aan jou besoekers bedien, saamdruk. As jy Bootstrap dist-lêers gebruik, probeer om by die verkleinde weergawes te hou (aangedui deur die .min.cssen .min.jsuitbreidings). As jy Bootstrap vanaf die bron met jou eie boustelsel bou, moet jy seker maak dat jy jou eie verkleiners vir HTML, CSS en JS implementeer.

Nie-blokkerende lêers

Alhoewel die verkleinering en gebruik van kompressie dalk genoeg lyk, is dit ook 'n groot stap om u werf goed geoptimaliseer en vinnig genoeg te maak om u lêers nie te blokkeer nie.

As jy 'n Lighthouse- inprop in Google Chrome gebruik, het jy dalk oor FCP gestruikel. Die First Contentful Paint- metriek meet die tyd vanaf wanneer die bladsy begin laai tot wanneer enige deel van die bladsy se inhoud op die skerm weergegee word.

U kan FCP verbeter deur nie-kritiese JavaScript of CSS uit te stel. Wat beteken dit? Eenvoudig, JavaScript of stylblaaie wat nie op die eerste verf van jou bladsy hoef te wees nie, moet gemerk word met asyncof deferkenmerke.

Dit verseker dat die minder belangrike hulpbronne later gelaai word en nie die eerste verf blokkeer nie. Aan die ander kant kan kritieke hulpbronne ingesluit word as inlyn skrifte of style.

As jy meer hieroor wil leer, is daar reeds baie goeie artikels daaroor:

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

Gebruik altyd HTTPS

Jou webwerf behoort slegs beskikbaar te wees oor HTTPS-verbindings in produksie. HTTPS verbeter die sekuriteit, privaatheid en beskikbaarheid van alle werwe, en daar is nie iets soos nie-sensitiewe webverkeer nie . Die stappe om u webwerf op te stel om uitsluitlik oor HTTPS bedien te word, verskil baie na gelang van u argitektuur en webgasheerverskaffer, en is dus buite die bestek van hierdie dokumente.

Werwe wat oor HTTPS bedien word, moet ook toegang verkry tot alle stylblaaie, skrifte en ander bates oor HTTPS-verbindings. Andersins sal jy vir gebruikers gemengde aktiewe inhoud stuur , wat lei tot potensiële kwesbaarhede waar 'n werf gekompromitteer kan word deur 'n afhanklikheid te verander. Dit kan lei tot sekuriteitskwessies en waarskuwings in die blaaier wat aan gebruikers vertoon word. Of u nou Bootstrap vanaf 'n CDN kry of dit self bedien, maak seker dat u dit slegs via HTTPS-verbindings verkry.