Hagræða

Lean Sass innflutningur

Þegar þú notar Sass í eignapípunni þinni skaltu ganga úr skugga um að þú fínstillir Bootstrap með því að nota aðeins @importþá íhluti sem þú þarft. Stærstu hagræðingarnar þínar munu líklega koma frá Layout & Componentshlutanum okkar 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";

Ef þú ert ekki að nota íhlut skaltu skrifa athugasemd við hann eða eyða honum alveg. Til dæmis, ef þú ert ekki að nota hringekjuna, fjarlægðu þann innflutning til að vista einhverja skráarstærð í samansettu CSS. Hafðu í huga að það eru nokkur ósjálfstæði milli Sass innflutnings sem getur gert það erfiðara að sleppa skrá.

Lean JavaScript

JavaScript Bootstrap inniheldur alla hluti í aðal dist skránum okkar ( bootstrap.jsog bootstrap.min.js), og jafnvel aðal ósjálfstæði okkar (Popper) með búntskránum okkar ( bootstrap.bundle.jsog bootstrap.bundle.min.js). Á meðan þú ert að sérsníða í gegnum Sass, vertu viss um að fjarlægja tengt JavaScript.

Til dæmis, að því gefnu að þú sért að nota þinn eigin JavaScript-búnt eins og Webpack eða Rollup, myndir þú aðeins flytja inn JavaScript sem þú ætlar að nota. Í dæminu hér að neðan sýnum við hvernig á að innihalda bara módelið JavaScript okkar:

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

Þannig ertu ekki með JavaScript sem þú ætlar ekki að nota fyrir íhluti eins og hnappa, hringekjur og verkfæraábendingar. Ef þú ert að flytja inn fellilista, verkfæraábendingar eða sprettiglugga, vertu viss um að skrá Popper-háð í package.jsonskrána þína.

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

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

Autoprefixer .browserslistrc

Bootstrap er háð Autoprefixer til að bæta sjálfkrafa forskeytum vafra við ákveðnar CSS eiginleika. Forskeyti ráðast af skránni okkar .browserslistrc, sem finnast í rót Bootstrap endurhverfunnar. Að sérsníða þennan lista yfir vafra og endursamsetja Sass mun sjálfkrafa fjarlægja einhvern CSS úr samsettum CSS, ef það eru söluforskeyti einstök fyrir þann vafra eða útgáfu.

Ónotaður CSS

Hjálp óskast við þennan hluta, vinsamlegast íhugaðu að opna PR. Takk!

Þó að við höfum ekki forsmíðað dæmi til að nota PurgeCSS með Bootstrap, þá eru nokkrar gagnlegar greinar og leiðbeiningar sem samfélagið hefur skrifað. Hér eru nokkrir valkostir:

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

Að lokum sýnir þessi CSS Tricks grein um ónotað CSS hvernig á að nota PurgeCSS og önnur svipuð verkfæri.

Minify og gzip

Þegar mögulegt er, vertu viss um að þjappa öllum kóðanum sem þú þjónar gestum þínum. Ef þú ert að nota Bootstrap dist skrár, reyndu að halda þig við smækkuðu útgáfurnar (gefin til kynna með .min.cssog .min.jsviðbótunum). Ef þú ert að byggja Bootstrap frá upprunanum með þínu eigin byggingarkerfi, vertu viss um að innleiða þína eigin minifiers fyrir HTML, CSS og JS.

Skrár sem ekki eru læstar

Þó að minnka og nota þjöppun gæti virst nóg, þá er það líka stórt skref í að gera síðuna þína vel fínstillta og nógu hraða að gera skrárnar þínar sem eru ekki læstar.

Ef þú ert að nota Lighthouse viðbót í Google Chrome gætirðu hafa lent í FCP. First Contentful Paint mæligildið mælir tímann frá því að síðan byrjar að hlaðast þar til einhver hluti af innihaldi síðunnar er birtur á skjánum.

Þú getur bætt FCP með því að fresta ekki mikilvægu JavaScript eða CSS. Hvað þýðir það? Einfaldlega, JavaScript eða stílblöð sem þurfa ekki að vera til staðar á fyrstu málningu síðunnar þinnar ætti að vera merkt með asynceða defereiginleikum.

Þetta tryggir að minna mikilvægu auðlindirnar séu hlaðnar síðar og hindrar ekki fyrstu málningu. Á hinn bóginn geta mikilvægar auðlindir verið innifalinn sem inline forskriftir eða stíll.

Ef þú vilt læra meira um þetta, þá eru nú þegar margar frábærar greinar um það:

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

Notaðu alltaf HTTPS

Vefsíðan þín ætti aðeins að vera tiltæk í gegnum HTTPS tengingar í framleiðslu. HTTPS bætir öryggi, friðhelgi og aðgengi allra vefsvæða og það er ekkert til sem heitir óviðkvæm vefumferð . Skrefin til að stilla vefsíðuna þína þannig að hún sé eingöngu birt yfir HTTPS eru mjög mismunandi eftir arkitektúr þínum og vefhýsingaraðila og eru því utan gildissviðs þessara skjala.

Vefsvæði sem þjónað er yfir HTTPS ættu einnig að fá aðgang að öllum stílblöðum, forskriftum og öðrum eignum yfir HTTPS tengingar. Annars muntu senda notendum blandað virkt efni , sem leiðir til hugsanlegra veikleika þar sem vefsvæði getur verið í hættu með því að breyta ósjálfstæði. Þetta getur leitt til öryggisvandamála og viðvarana í vafra sem birtast notendum. Hvort sem þú ert að fá Bootstrap frá CDN eða þjóna því sjálfur, vertu viss um að þú hafir aðeins aðgang að því í gegnum HTTPS tengingar.