Lungiselela

Ukungenisa kwe-Lean Sass

Uma usebenzisa i-Sass emgqeni wempahla yakho, qiniseka ukuthi uthuthukisa i-Bootstrap ngokufaka @importizingxenye ozidingayo kuphela. Ukulungiselela kwakho okukhulu kakhulu kuzovela Layout & Componentsesigabeni sethu 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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Uma ungasebenzisi ingxenye, yibeke amazwana noma uyisuse ngokuphelele. Isibonelo, uma ungasebenzisi i-carousel, susa lokho kungenisa ukuze ulondoloze usayizi wefayela othile ku-CSS yakho ehlanganisiwe. Khumbula ukuthi kukhona ukuncika kuyo yonke imikhiqizo yakwa-Sass engenza kube nzima kakhulu ukukhipha ifayela.

I-JavaScript engenamandla

I-JavaScript ye-Bootstrap ihlanganisa yonke ingxenye kumafayela ethu ayinhloko e-dist ( bootstrap.jskanye bootstrap.min.js), ngisho nokuncika kwethu okuyinhloko (i-Popper) namafayela ethu enqwaba ( bootstrap.bundle.jskanye bootstrap.bundle.min.js). Ngenkathi wenza ngendlela oyifisayo nge-Sass, qiniseka ukuthi uyayisusa i-JavaScript ehlobene.

Isibonelo, uma ucabanga ukuthi usebenzisa eyakho inqwaba ye-JavaScript njenge-Webpack noma i-Rollup, ungangenisa kuphela i-JavaScript ohlela ukuyisebenzisa. Esibonelweni esingezansi, sibonisa indlela yokufaka i-JavaScript yethu ye-modal:

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

Ngale ndlela, awufaki noma iyiphi i-JavaScript ongahlosile ukuyisebenzisela izingxenye ezifana nezinkinobho, ama-carousels, namathiphu. Uma ungenisa okwehliswayo, amathiphu wamathuluzi noma ama-popover, qiniseka ukuthi ubhala uhlu lokuncika kwe-Popper package.jsonkufayela lakho.

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

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

Autoprefixer .browserslistrc

I-Bootstrap incike ku-Autoprefixer ukuze wengeze ngokuzenzakalelayo iziqalo zesiphequluli kuzakhiwo ezithile ze-CSS. Iziqalo zinqunywa .browserslistrcifayela lethu, elitholakala empandeni ye-Bootstrap repo. Ukwenza ngokwezifiso lolu hlu lweziphequluli nokubuyisela i-Sass kuzosusa ngokuzenzakalelayo enye i-CSS ku-CSS yakho ehlanganisiwe, uma kukhona iziqalo zomthengisi ezihlukile kuleso siphequluli noma inguqulo.

I-CSS engasetshenzisiwe

Usizo olufunwa ngalesi sigaba, sicela ucabange ukuvula i-PR. Siyabonga!

Yize singenaso isibonelo esakhelwe ngaphambilini sokusebenzisa i- PurgeCSS nge-Bootstrap, kukhona ama-athikili awusizo kanye nemigudu ebhalwe ngumphakathi. Nazi ezinye izinketho:

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

Okokugcina, lesi sihloko se-CSS Tricks ku-CSS engasetshenzisiwe sibonisa indlela yokusebenzisa i-PurgeCSS namanye amathuluzi afanayo.

I-Minify ne-gzip

Noma nini lapho kunokwenzeka, qiniseka ukuthi ucindezela yonke ikhodi oyinikeza izivakashi zakho. Uma usebenzisa amafayela e-Bootstrap dist, zama ukunamathela ezinguqulweni ezincishisiwe (ezikhonjiswe isandiso .min.cssnezandiso .min.js). Uma wakha i-Bootstrap kusuka emthonjeni ngesistimu yakho yokwakha, qiniseka ukuthi usebenzisa izinciphisi zakho ze-HTML, CSS, ne-JS.

Amafayela angavimbeli

Nakuba ukunciphisa nokusebenzisa ukucindezela kungase kubonakale kwanele, ukwenza amafayela akho abe angavimbeli futhi kuyisinyathelo esikhulu ekwenzeni isayithi lakho lilungiswe kahle futhi lisheshe ngokwanele.

Uma usebenzisa i- plugin ye- Lighthouse ku-Google Chrome, kungenzeka ukuthi ukhubeke ku-FCP. Imethrikhi Yokupenda Okuqukethwe Yokuqala ikala isikhathi ukusuka lapho ikhasi liqala ukulayisha kuya lapho noma iyiphi ingxenye yokuqukethwe kwekhasi inikezwa esikrinini.

Ungathuthukisa i-FCP ngokuhlehlisa i-JavaScript engabalulekile noma i-CSS. Kusho ukuthini lokho? Kalula nje, i-JavaScript noma amashidi esitayela angadingi ukuthi abe khona kupende wokuqala wekhasi lakho kufanele amakwe ngawo asyncnoma deferizibaluli.

Lokhu kuqinisekisa ukuthi izinsiza ezingabalulekile kakhulu zilayishwa kamuva futhi zingavimbeli upende wokuqala. Ngakolunye uhlangothi, izinsiza ezibalulekile zingafakwa njengemibhalo esemgqeni noma izitayela.

Uma ufuna ukufunda okwengeziwe ngalokhu, sekuvele kunezihloko eziningi ezinhle ngakho:

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

Sebenzisa njalo i-HTTPS

Iwebhusayithi yakho kufanele itholakale kuphela ngoxhumo lwe-HTTPS ekukhiqizweni. I-HTTPS ithuthukisa ukuvikeleka, ubumfihlo, nokutholakala kwawo wonke amasayithi, futhi ayikho into efana nethrafikhi yewebhu engazweli . Izinyathelo zokumisa iwebhusayithi yakho ukuthi inikezwe ngokukhethekile nge-HTTPS ziyahlukahluka kakhulu kuye ngesakhiwo sakho nomhlinzeki wokuba usokhaya, futhi ngaleyo ndlela zingaphezu kobubanzi bala madokhumenti.

Amasayithi anikezwa nge-HTTPS kufanele futhi afinyelele kuwo wonke amashidi esitayela, imibhalo, namanye amafa ngoxhumo lwe-HTTPS. Uma kungenjalo, uzobe uthumela abasebenzisi okuxubile okuqukethwe okusebenzayo , okuholela ekubeni sengozini lapho isayithi lingaba sengozini ngokushintsha ukuncika. Lokhu kungaholela ezinkingeni zokuphepha kanye nezixwayiso zesiphequluli eziboniswa kubasebenzisi. Kungakhathaliseki ukuthi uthola i-Bootstrap ku-CDN noma uyazisebenzela wena, qiniseka ukuthi uyifinyelela kuphela ngoxhumo lwe-HTTPS.