Lungiselela

I-Lean Sass engenisa ngaphandle

Xa usebenzisa i-Sass kumbhobho we-asethi yakho, qiniseka ukuba uyengeza i-Bootstrap ngokufaka kuphela @importamacandelo owafunayo. Olona lungiselelo lwakho lukhulu luya kuvela Layout & Componentskwicandelo lethu 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";

Ukuba awusebenzisi inxalenye, phawula ngayo okanye uyicime ngokupheleleyo. Umzekelo, ukuba awusebenzisi i-carousel, susa loo nto ngaphandle ukugcina isayizi yefayile kwi-CSS yakho ehlanganisiweyo. Gcina ukhumbula ukuba kukho uxhomekeko kulo lonke urhwebo ngaphandle kwe-Sass olunokwenza kube nzima ukushiya ifayile.

IJavaScript engasebenziyo

IJavaScript yeBootstrap ibandakanya onke amacandelo kwiifayile zethu eziphambili ze-dist ( bootstrap.jskunye bootstrap.min.js), kunye nokuxhomekeka kwethu okuphambili (iPopper) kunye neefayile zethu zenqwaba ( bootstrap.bundle.jskunye bootstrap.bundle.min.js). Ngelixa usenza ngokweSass, qiniseka ukuba uyayisusa iJavaScript enxulumeneyo.

Umzekelo, ucinga ukuba usebenzisa eyakho iJavaScript bundler njengeWebpack okanye iRollup, ungangenisa kuphela iJavaScript oceba ukuyisebenzisa. Kulo mzekelo ungezantsi, sibonisa indlela yokubandakanya iJavaScript yethu yemodali:

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

Ngale ndlela, awubandakanyi nayiphi na iJavaScript ongafuniyo ukuyisebenzisa kumacandelo afana namaqhosha, iicarousels, kunye neengcebiso zesixhobo. Ukuba ungenisa ukwehla, iingcebiso zesixhobo okanye iipopovers, qiniseka ukuba uludwelisa ukuxhomekeka kwePopper package.jsonkwifayile yakho.

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

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

Autoprefixer .browserslistrc

I-Bootstrap ixhomekeke kwi-Autoprefixer ukongeza ngokuzenzekelayo izimaphambili zesikhangeli kwiipropati ezithile zeCSS. Izimaphambili zichazwa .browserslistrcyifayile yethu, efunyenwe kwingcambu ye Bootstrap repo. Ukwenza olu luhlu lwabakhangeli zincwadi kunye nokubuyisela kwakhona i-Sass kuya kuyisusa ngokuzenzekelayo enye i-CSS kwi-CSS yakho eqokelelweyo, ukuba kukho izimaphambili zomthengisi ezizodwa kweso sikhangeli okanye uguqulelo.

I-CSS engasetyenziswanga

Uncedo olufunwayo ngeli candelo, nceda ucinge ngokuvula iPR. Enkosi!

Ngelixa singenawo umzekelo owakhelwe ngaphambili wokusebenzisa iPurgeCSS ngeBootstrap , kukho amanqaku aluncedo kunye neendlela ezibhalileyo luluntu. Nazi ezinye iindlela onokukhetha kuzo:

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

Okokugqibela, eli nqaku leCSS Tricks kwiCSS engasetyenziswanga libonisa indlela yokusebenzisa iPurgeCSS kunye nezinye izixhobo ezifanayo.

Minify kwaye gzip

Nanini na xa kunokwenzeka, qiniseka ukuba uyayicinezela yonke ikhowudi oyinikela kwiindwendwe zakho. Ukuba usebenzisa iifayile zeBootstrap dist, zama ukuncamathela kwiinguqulelo ezincinci (ezibonakaliswe yi .min.csskunye .min.jsnezandiso). Ukuba wakha iBootstrap ukusuka kumthombo ngenkqubo yakho yokwakha, qiniseka ukuba uphumeza abakho abancinci beHTML, CSS, kunye neJS.

Iifayile ezingavalwanga

Ngelixa ukunciphisa kunye nokusebenzisa ucinezelo kunokubonakala ngathi kwanele, ukwenza iifayile zakho zingavalwanga ikwalinyathelo elikhulu ekwenzeni indawo yakho ilungiswe kakuhle kwaye ikhawuleze ngokwaneleyo.

Ukuba usebenzisa iplagi yeLighthouse kwiGoogle Chrome, usenokuba ukhubekile kwiFCP. Ipeyinti yokuQala eQukayo ilinganisa ixesha ukusuka xa iphepha liqala ukulayisha ukuya xa nayiphi na inxalenye yesiqulatho sephepha inikezelwa kwisikrini.

Ungayiphucula i-FCP ngokurhoxisa iJavaScript engabalulekanga okanye iCSS. Ithetha ntoni le nto? Ngokulula, iJavaScript okanye amaphepha esitayile angafunekiyo ukuba abekhona kwipeyinti yokuqala yephepha lakho kufuneka aphawulwe ngawo asyncokanye deferiimpawu.

Oku kuqinisekisa ukuba izibonelelo ezingabalulekanga zilayishwa kamva kwaye zingathinteli ipeyinti yokuqala. Kwelinye icala, izixhobo ezibalulekileyo zinokubandakanywa njengezikripthi ezingaphakathi okanye izitayile.

Ukuba ufuna ukufunda ngakumbi malunga noku, sele kukho amanqaku amaninzi malunga nayo:

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

Hlala usebenzisa i-HTTPS

Iwebhusayithi yakho kufuneka ifumaneke kuphela kuqhagamshelo lwe-HTTPS kwimveliso. I-HTTPS iphucula ukhuseleko, ubumfihlo, kunye nokufumaneka kwazo zonke iisayithi, kwaye akukho nto injenge-non-sensitive web traffic . Amanyathelo okulungisa iwebhusayithi yakho ukuba inikezelwe ngokukodwa kwi-HTTPS iyahluka ngokubanzi ngokuxhomekeke kulwakhiwo lwakho kunye nomboneleli wokubamba iwebhu, kwaye ke angaphaya komda wala maxwebhu.

IiSayithi ezinikezelwa ngaphezulu kwe-HTTPS kufuneka zifikelele kuwo onke amashiti esitayile, izikripthi, kunye nezinye ii-asethi ngaphezulu koqhagamshelo lwe-HTTPS. Kungenjalo, uya kube uthumela abasebenzisi okuxutyiweyo umxholo osebenzayo , okukhokelela kubuthathaka obunokubakho apho isayithi inokubekwa esichengeni ngokutshintsha ukuxhomekeka. Oku kunokukhokelela kwimicimbi yokhuseleko kunye nezilumkiso zebhrawuza eziboniswa kubasebenzisi. Nokuba ufumana i-Bootstrap kwi-CDN okanye ukhonza yona ngokwakho, qinisekisa ukuba ufikelela kuyo kuphela ngoqhagamshelo lwe-HTTPS.