Hagaajin

Soo dejinta Lean Sass

Markaad isticmaalayso Sass dhuunta hantidaada, iska hubi inaad sare u qaaddo Bootstrap adiga oo keliya @importqaybaha aad u baahan tahay. Hagaajintaada ugu weyn waxay u badan tahay inay ka iman doonto Layout & Componentsqaybtayada bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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";

Haddii aanad isticmaalin qayb, faallo bixi ama tirtir gebi ahaanba. Tusaale ahaan, haddii aadan isticmaalin carousel-ka, ka saar soo dejinta si aad u badbaadiso cabbirka faylka qaar ka mid ah CSS-gaaga la soo ururiyey. Maskaxda ku hay inay jiraan qaar ku tiirsanaanta soo dejinta Sass oo laga yaabo inay aad u adag tahay in faylka laga tago.

JavaScript caato ah

Bootstrap's JavaScript waxaa ku jira qayb kasta oo ka mid ah faylalkayaga aasaasiga ah ( bootstrap.jsiyo bootstrap.min.js), iyo xataa ku tiirsanaantayada aasaasiga ah (Popper) ee leh faylalka xidhmooyinkeena ( bootstrap.bundle.jsiyo bootstrap.bundle.min.js). Inta aad wax ku samaynayso Sass, iska hubi in aad ka saarto JavaScript ee la xidhiidha.

Tusaale ahaan, adigoo u malaynaya inaad isticmaalayso xidhmadahaaga JavaScript sida Webpack, Parcel, ama Vite, kaliya waxaad soo dejin lahayd JavaScript-ka aad qorshaynayso inaad isticmaasho. Tusaalaha hoose, waxaan ku tuseynaa sida loogu daro JavaScript-ka qaabkeena:

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

Sidan, kuma darto JavaScript kasta oo aadan doonayn inaad u isticmaasho qaybaha sida badhamada, carousels, iyo qalabyada. Haddii aad soo dejinayso hoos-u-dhacyo, qalab-tips ama popovers, hubi inaad liis garayso ku-tiirsanaanta Popper ee package.jsonfaylkaaga.

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

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

Autoprefixer .browserslistrc

Bootstrap waxay kuxirantahay Autoprefixer inuu si toos ah ugu daro horgalayaasha browserka guryaha CSS qaarkood. Horgalayaasha waxaa lagu tiriyaa faylkayaga .browserslistrc, oo laga helay xididka Bootstrap repo. Habaynta liiska daalacashada iyo dib-u-ururinta Sass waxay si toos ah uga saari doontaa qaar ka mid ah CSS-gaaga CSS-gaaga, haddii ay jiraan horgalayaal iibiye u gaar ah browserkaas ama nooca.

CSS aan la adeegsan

Caawinta laga rabo qaybtan, fadlan tixgeli inaad furto PR. Mahadsanid!

In kasta oo aynaan haysan tusaale hore loo dhisay oo ah adeegsiga PurgeCSS oo wata Bootstrap, waxa jira maqaallo waxtar leh iyo socod-marineed oo ay bulshadu qortay. Waa kuwan doorarka qaar:

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

Ugu dambeyntii, maqaalkan CSS Tricks ee CSS aan la isticmaalin wuxuu muujinayaa sida loo isticmaalo PurgeCSS iyo qalabyada kale ee la midka ah.

Yaree oo gzip

Mar kasta oo ay suurtagal tahay, hubi inaad cadaadiso dhammaan koodka aad u adeegto booqdayaashaada. Haddii aad isticmaalayso Bootstrap dist files, isku day in aad ku dheggan noocyada la yareeyey (oo ay muujiyeen .min.cssiyo .min.jskordhinta). Haddii aad ka dhisayso Bootstrap isha oo leh nidaamkaaga wax-dhis, hubi inaad hirgeliso wax-yarahaaga HTML, CSS, iyo JS.

Faylasha aan xannibin

Iyadoo yaraynta iyo isticmaalka cadaadisku ay u ekaan karto mid ku filan, samaynta faylashaada kuwa aan xannibin sidoo kale waa tallaabo weyn oo ka dhigista goobtaada mid si fiican loo hagaajiyay oo degdeg ah.

Haddii aad Google Chrome ku isticmaalayso plugin Lighthouse ah, waxa laga yaabaa inaad ka turunturootay FCP. Halbeegga Rinjiga Koobaad ee Koobaad waxa uu cabbiraa wakhtiga laga bilaabo marka boggu bilaabmo rarista ilaa marka qayb ka mid ah boggaga ku jira lagu soo bandhigo shaashadda.

Waxaad hagaajin kartaa FCP adiga oo dib u dhigaya JavaScript ama CSS aan muhiim ahayn. Taasi micneheedu waa maxay? Si fudud, JavaScript ama xaashida qaab-dhismeedka ee aan u baahnayn inay ku jiraan rinjiga koowaad ee boggaaga waa in lagu calaamadiyaa asyncama defersifo.

Tani waxay hubinaysaa in kheyraadka yar ee muhiimka ah la raro mar dambe oo aan xannibin rinjiga ugu horreeya. Dhanka kale, agabyada muhiimka ah waxaa lagu dari karaa sida xarfaha xariiqda ama qaababka.

Haddii aad rabto inaad wax badan ka barato tan, waxaa horeba u jiray maqaallo aad u wanaagsan oo ku saabsan:

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

Had iyo jeer isticmaal HTTPS

Websaydhkaaga waa in laga helaa oo keliya xidhiidhada HTTPS ee wax soo saarka. HTTPS waxay wanaajisaa amniga, sirta, iyo helitaanka dhammaan bogagga, mana jiraan wax la yiraahdo taraafikada shabakadda ee aan xasaasi ahayn . Tallaabooyinka lagu habeeyo degelkaaga in loogu adeego si gaar ah HTTPS aad ayey u kala duwan yihiin iyadoo ku xiran qaab-dhismeedkaaga iyo bixiyahaaga martigelinta webka, oo sidaas awgeed waa ka baxsan yihiin xadka dukumiintiyadan.

Goobaha loo adeego HTTPS waa inay sidoo kale galaan dhammaan xaashiyaha qaab-qorista, qoraallada, iyo hantida kale ee ku xiran HTTPS. Haddii kale, waxaad u soo diri doontaa isticmaalayaasha waxyaabaha firfircoon ee isku dhafan , taasoo horseedaysa nuglaanta iman karta halkaas oo goobta ay wax u dhimi karto iyadoo la beddelayo ku tiirsanaanta. Tani waxay u horseedi kartaa arrimo amni iyo digniinaha browserka oo loo soo bandhigo isticmaalayaasha. Haddi aad ka qaadanayso Bootstrap CDN ama aad adigu u adeegayso, hubi inaad kaliya ka gasho isku xidhka HTTPS.