Okulongoosa obulungi

Lean Sass eyingiza ebintu mu ggwanga

Bw’oba ​​okozesa Sass mu payipu yo ey’eby’obugagga, kakasa nti olongoosa Bootstrap ng’okola ebitundu byokka @importbye weetaaga. Okulongoosa kwo okusinga obunene kuyinza okuva mu Layout & Componentskitundu 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";
@import "placeholders";

// 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.jsne bootstrap.min.js), era n'okwesigamira kwaffe okusookerwako (Popper) ne fayiro zaffe ez'ekibinja ( bootstrap.bundle.jsne 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/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';

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.jsonfayiro yo.

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 .browserslistrcfayiro 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.cssn’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 asyncoba deferattributes.

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:

• https://web.dev/ebikozesebwa-okuziyiza-okulaga/
• https://web.dev/okuyimirizaawo-css-etali-nkulu/

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.