Boresha

Uagizaji wa Lean Sass

Unapotumia Sass kwenye bomba la kipengee chako, hakikisha unaboresha Bootstrap kwa kuweka tu @importvipengele unavyohitaji. Uboreshaji wako mkubwa zaidi utatoka kwa Layout & Componentssehemu ya yetu 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";

Ikiwa hutumii kijenzi, kitoe maoni au ukifute kabisa. Kwa mfano, ikiwa hutumii jukwa, ondoa uletaji huo ili kuhifadhi saizi fulani ya faili katika CSS yako iliyokusanywa. Kumbuka kuna baadhi ya vitegemezi katika uagizaji wa Sass ambavyo vinaweza kufanya iwe vigumu zaidi kuacha faili.

Lean JavaScript

JavaScript ya Bootstrap inajumuisha kila sehemu katika faili zetu za msingi za dist ( bootstrap.jsna bootstrap.min.js), na hata utegemezi wetu wa msingi (Popper) na faili zetu za kifungu ( bootstrap.bundle.jsna bootstrap.bundle.min.js). Unapofanya mapendeleo kupitia Sass, hakikisha kuwa umeondoa JavaScript inayohusiana.

Kwa mfano, ukichukulia kuwa unatumia kifurushi chako cha JavaScript kama Webpack au Rollup, utaleta tu JavaScript unayopanga kutumia. Katika mfano ulio hapa chini, tunaonyesha jinsi ya kujumuisha tu JavaScript yetu ya 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Kwa njia hii, haujumuishi JavaScript yoyote ambayo hukukusudia kutumia kwa vipengee kama vile vitufe, jukwa na vidokezo. Ikiwa unaleta menyu kunjuzi, vidokezo vya zana au popover, hakikisha umeorodhesha utegemezi wa Popper katika package.jsonfaili yako.

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

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

Kiambishi kiotomatiki .browserslistrc

Bootstrap inategemea Autoprefixer ili kuongeza viambishi awali vya kivinjari kiotomatiki kwa sifa fulani za CSS. Viambishi awali vinaamuriwa na .browserslistrcfaili yetu, inayopatikana kwenye mzizi wa repo ya Bootstrap. Kuweka mapendeleo kwenye orodha hii ya vivinjari na kurejesha Sass kutaondoa kiotomatiki baadhi ya CSS kutoka kwa CSS yako iliyokusanywa, ikiwa kuna viambishi awali vya wauzaji wa kipekee kwa kivinjari au toleo hilo.

CSS isiyotumika

Usaidizi unaohitajika na sehemu hii, tafadhali zingatia kufungua PR. Asante!

Ingawa hatuna mfano ulioundwa awali wa kutumia PurgeCSS na Bootstrap, kuna makala na mapitio muhimu ambayo jumuiya imeandika. Hapa kuna baadhi ya chaguzi:

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

Mwishowe, nakala hii ya Mbinu za CSS kwenye CSS isiyotumika inaonyesha jinsi ya kutumia PurgeCSS na zana zingine zinazofanana.

Minify na gzip

Wakati wowote inapowezekana, hakikisha kuwa umebana msimbo wote unaotoa kwa wageni wako. Ikiwa unatumia faili za Bootstrap dist, jaribu kushikamana na matoleo madogo (yaliyoonyeshwa na .min.cssna .min.jsviendelezi). Ikiwa unaunda Bootstrap kutoka kwa chanzo na mfumo wako wa ujenzi, hakikisha kuwa umetekelezea viunzi vyako vya HTML, CSS, na JS.

Faili zisizozuia

Ingawa kupunguza na kutumia mbano kunaweza kuonekana kuwa ya kutosha, kufanya faili zako ziwe zisizozuia pia ni hatua kubwa katika kufanya tovuti yako kuboreshwa vyema na kwa haraka vya kutosha.

Ikiwa unatumia programu-jalizi ya Lighthouse katika Google Chrome, huenda umejikwaa na FCP. Kipimo cha Kwanza cha Rangi ya Kuridhika hupima muda kutoka ukurasa unapoanza kupakiwa hadi sehemu yoyote ya maudhui ya ukurasa inapoonyeshwa kwenye skrini.

Unaweza kuboresha FCP kwa kuahirisha JavaScript au CSS isiyo muhimu. Hiyo ina maana gani? Kwa urahisi, JavaScript au laha za mitindo ambazo hazihitaji kuwepo kwenye rangi ya kwanza ya ukurasa wako zinapaswa kuwekewa alama asyncau defersifa.

Hii inahakikisha kwamba rasilimali zisizo muhimu zinapakiwa baadaye na sio kuzuia rangi ya kwanza. Kwa upande mwingine, rasilimali muhimu zinaweza kujumuishwa kama hati za ndani au mitindo.

Ikiwa unataka kujifunza zaidi kuhusu hili, tayari kuna makala nyingi nzuri kuhusu hilo:

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

Tumia HTTPS kila wakati

Tovuti yako inapaswa kupatikana tu kupitia miunganisho ya HTTPS katika toleo la umma. HTTPS huboresha usalama, faragha, na upatikanaji wa tovuti zote, na hakuna kitu kama trafiki isiyo nyeti kwenye wavuti . Hatua za kusanidi tovuti yako ili zitumike kwa njia ya HTTPS pekee hutofautiana sana kulingana na usanifu wako na mtoa huduma wa kupangisha wavuti, na kwa hivyo ziko nje ya upeo wa hati hizi.

Tovuti zinazotolewa kupitia HTTPS zinapaswa pia kufikia laha za mitindo, hati na vipengee vingine kupitia miunganisho ya HTTPS. Vinginevyo, utakuwa unatuma watumiaji mchanganyiko wa maudhui amilifu , na kusababisha athari zinazoweza kutokea ambapo tovuti inaweza kuathiriwa kwa kubadilisha utegemezi. Hii inaweza kusababisha matatizo ya usalama na maonyo ya ndani ya kivinjari kuonyeshwa kwa watumiaji. Iwe unapata Bootstrap kutoka CDN au unaihudumia mwenyewe, hakikisha kwamba unaifikia kupitia miunganisho ya HTTPS pekee.