Okulongoosa obulungi
Kuuma pulojekiti zo nga zigonvu, nga ziddamu, era nga zilabirira osobole okutuusa obumanyirivu obusinga obulungi n’okussa essira ku mirimu emikulu ennyo.
Lean Sass eyingiza ebintu mu ggwanga
Bw’oba okozesa Sass mu payipu yo ey’eby’obugagga, kakasa nti olongoosa Bootstrap ng’okola ebitundu byokka @import
bye weetaaga. Okulongoosa kwo okusinga obunene kuyinza okuva mu Layout & Components
kitundu kyaffe 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";
Bw’oba tokozesa kitundu, kiteeke oba kisanze ddala. Okugeza, bw’oba tokozesa carousel, ggyawo okuyingiza okwo okutereka sayizi ya fayiro ezimu mu CSS yo ekung’aanyiziddwa. Kuuma mu birowoozo waliwo ebimu ebisinziirako mu Sass imports yonna ebiyinza okukaluubiriza okulekawo fayiro.
Weesigame ku JavaScript
Bootstrap's JavaScript erimu buli kitundu mu fayiro zaffe eza dist ezisookerwako ( bootstrap.js
ne bootstrap.min.js
), era n'okwesigamira kwaffe okusookerwako (Popper) ne fayiro zaffe ez'ekibinja ( bootstrap.bundle.js
ne bootstrap.bundle.min.js
). Nga bw'olongoosa ng'oyita mu Sass, kakasa nti oggyawo JavaScript ekwatagana.
Okugeza, nga tufudde nti okozesa JavaScript bundler yo nga Webpack oba Rollup, wandiyingidde JavaScript yokka gy’oteekateeka okukozesa. Mu kyokulabirako wansi, tulaga engeri y’okumala okussaamu JavaScript yaffe eya 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';
Mu ngeri eno, tossaamu JavaScript yonna gy'otogenderera kukozesa ku bitundu nga buttons, carousels, ne tooltips. Bw'oba oyingiza ebigwa, ebikozesebwa oba ebipoover, kakasa nti owandiika okwesigamizibwa kwa Popper mu package.json
fayiro yo.
Ebifulumizibwa ebweru ebisookerwako
Fayiro bootstrap/js/dist
ezikozesebwa default export , kale bw'oba oyagala okukozesa emu ku zo olina okukola bino wammanga:
import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))
Entandikwa y’okwefuga .browserslistrc
Bootstrap esinziira ku Autoprefixer okugattako entandikwa za browser mu ngeri ey’otoma ku bintu ebimu ebya CSS. Entandikwa ziragirwa .browserslistrc
fayiro yaffe, esangibwa mu kikolo kya Bootstrap repo. Okulongoosa olukalala luno olwa bulawuzi n’okuddamu okukung’aanya Sass kijja kuggyawo CSS ezimu mu CSS yo ekung’aanyiziddwa mu ngeri ey’otoma, singa wabaawo entandikwa z’abatunzi ez’enjawulo ku bulawuzi eyo oba enkyusa eyo.
CSS etakozesebwa
Obuyambi bwagala ku kitundu kino, nsaba olowooze ku kuggulawo PR. Weebale!
Wadde nga tetulina kyakulabirako kyazimbibwa nga tetunnaba kukozesa PurgeCSS ne Bootstrap, waliwo emiko egimu egy’okuyamba n’okutambuliramu ekitundu kye kiwandiise. Wano waliwo engeri gy’oyinza okukolamu:
- https://medium.com/dwarves-foundation/ggyewo-emisono- gya-css-egitakozesebwa-ku-bootstrap-ng'okozesa-purgecss-88395a2c5772
- https://lukelowrey.com/okuggya-mu-otomatika-css-etakozesebwa-ku-bootstrap-oba-frameworks-endala/
Ekisembayo, ekiwandiiko kino ekya CSS Tricks ku CSS etakozesebwa kiraga engeri y’okukozesaamu PurgeCSS n’ebikozesebwa ebirala ebifaananako bwe bityo.
Minify ne gzip
Buli lwe kiba kisoboka, kakasa nti onyiga koodi zonna z’oweereza abagenyi bo. Bw’oba okozesa fayiro za Bootstrap dist, gezaako okunywerera ku nkyusa ezikendeezeddwa (eziragiddwa .min.css
n’ebigaziyizibwa .min.js
). Bw’oba ozimba Bootstrap okuva ku nsibuko n’enkola yo ey’okuzimba, kakasa nti ossa mu nkola ebitonotono byo ebya HTML, CSS, ne JS.
Fayiro ezitali za kuzibira
Wadde ng’okukendeeza n’okukozesa okunyigiriza kuyinza okulabika ng’ekimala, okufuula fayiro zo ezitali za kuzibira nakyo ddaala ddene mu kufuula omukutu gwo okulongoosebwa obulungi era ogw’amangu ekimala.
Bw’oba okozesa plugin ya Lighthouse mu Google Chrome, oyinza okuba nga wagwa ku FCP. Ekipimo kya First Contentful Paint kipima obudde okuva ku lupapula lwe lutandika okutikka okutuuka ku kitundu kyonna eky’ebirimu ku lupapula lwe kiweebwa ku screen.
Osobola okulongoosa FCP ng'okwongezaayo JavaScript oba CSS etali ya mugaso. Ekyo kitegeeza ki? Mu ngeri ennyangu, JavaScript oba stylesheets eziteetaaga kubeerawo ku langi esooka ey’olupapula lwo zirina okuteekebwako akabonero async
oba defer
attributes.
Kino kikakasa nti eby’obugagga ebitali bikulu nnyo bitikkibwa oluvannyuma so si kuzibira langi esooka. Ku luuyi olulala, ebikozesebwa ebikulu bisobola okuteekebwamu nga ebiwandiiko oba sitayiro eziri mu layini.
Bw’oba oyagala okumanya ebisingawo ku nsonga eno, waaliwo dda emiko mingi egy’amaanyi egikwata ku nsonga eno:
Bulijjo kozesa HTTPS
Omukutu gwo gulina okubeera ku mikutu gya HTTPS gyokka mu kukola. HTTPS erongoosa obukuumi, eby’ekyama, n’okubeerawo kw’emikutu gyonna, era tewali kintu kiyitibwa web traffic etali ya maanyi . Emitendera gy’okutegeka omukutu gwo okuweereza ku HTTPS yokka gyawukana nnyo okusinziira ku nzimba yo n’omuwa w’okukyaza omukutu, era bwe kityo gisukka mu buwanvu bw’ebiwandiiko bino.
Emikutu egiweebwa ku HTTPS nagyo girina okuyingira ku sitayiro zonna, ebiwandiiko, n'eby'obugagga ebirala ku nkolagana za HTTPS. Otherwise, you’ll be sending users mixed active content , ekivaamu obuzibu obuyinza okubaawo omukutu we guyinza okukosebwa nga okyusa okwesigamizibwa. Kino kiyinza okuvaako ensonga z’ebyokwerinda n’okulabula mu browser okulagibwa eri abakozesa. Oba ofuna Bootstrap okuva ku CDN oba okugiweereza ggwe kennyini, kakasa nti ogiyingira ku mikutu gya HTTPS gyokka.