Hindura neza

Ibicuruzwa bitumizwa mu mahanga

Mugihe ukoresheje Sass mumuyoboro wawe wumutungo, menya neza ko uhindura Bootstrap ukoresheje gusa @importibice ukeneye. Ibyifuzo byawe binini birashoboka ko biva Layout & Componentsmubice byacu 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";

Niba udakoresha ibice, tanga ibisobanuro cyangwa ubisibe burundu. Kurugero, niba udakoresha karuseli, kura ibyo bitumizwa kugirango ubike ingano ya dosiye muri CSS yawe. Wibuke ko hari ibyo biterwa na Sass itumizwa hanze bishobora kugorana gusiba dosiye.

Shyira JavaScript

JavaScript ya Bootstrap ikubiyemo buri kintu cyose muri dosiye zacu za mbere ( bootstrap.jsna bootstrap.min.js), ndetse no kwishingikiriza kwacu kwambere (Popper) hamwe namadosiye yacu ya bundle ( bootstrap.bundle.jsna bootstrap.bundle.min.js). Mugihe urimo gukora ukoresheje Sass, menya neza gukuraho JavaScript.

Kurugero, ukeka ko ukoresha bundler yawe ya JavaScript nka Webpack cyangwa Rollup, winjiza gusa JavaScript uteganya gukoresha. Murugero rukurikira, twerekana uburyo twashyiramo gusa JavaScript yacu:

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

Ubu buryo, ntabwo urimo JavaScript iyo ari yo yose udashaka gukoresha mubice nka buto, karuseli, hamwe nibikoresho. Niba utumiza ibitonyanga, ibikoresho cyangwa popovers, menya neza urutonde rwa Popper biterwa na package.jsondosiye yawe.

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

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

Autoprefixer .browserslistrc

Bootstrap iterwa na Autoprefixer kugirango ihite yongeramo amashusho ya mushakisha kumiterere ya CSS. Ibisobanuro byateganijwe na .browserslistrcdosiye yacu, iboneka mumuzi ya Bootstrap repo. Guhindura urutonde rwa mushakisha no gusubiramo Sass bizahita bivanaho CSS muri CSS yawe yakusanyije, niba hari ibicuruzwa byabacuruzi byihariye kuri iyo mushakisha cyangwa verisiyo.

CSS idakoreshwa

Ubufasha bushakishwa niki gice, nyamuneka tekereza gufungura PR. Murakoze!

Mugihe tudafite urugero rwibanze rwo gukoresha PurgeCSS hamwe na Bootstrap, hari ingingo zingirakamaro hamwe nintambwe abaturage banditse. Dore inzira zimwe:

• https:
• https: //lukelowrey.com

Ubwanyuma, iyi ngingo ya CSS Amayeri kuri CSS idakoreshwa yerekana uburyo wakoresha PurgeCSS nibindi bikoresho bisa.

Gabanya na gzip

Igihe cyose bishoboka, menya neza guhuza kode zose ukorera abashyitsi bawe. Niba ukoresha Bootstrap dist dosiye, gerageza gukomera kuri verisiyo yagabanijwe (byerekanwa .min.cssniyagurwa .min.js). Niba wubaka Bootstrap uhereye kumasoko hamwe na sisitemu yawe yo kubaka, menya neza gushyira mubikorwa minifiers yawe kuri HTML, CSS, na JS.

Kutabuza dosiye

Mugihe kugabanya no gukoresha compression bishobora gusa nkibihagije, gukora dosiye zawe zidahagarika nabyo nintambwe nini yo gutuma urubuga rwawe ruba rwiza kandi rwihuse bihagije.

Niba ukoresha plugin ya Lighthouse muri Google Chrome, ushobora kuba waratsitaye kuri FCP. Ibipimo Byambere Byuzuye Ibipimo bipima igihe uhereye igihe page itangiye gupakira kugeza igihe igice icyo aricyo cyose cyurupapuro cyatanzwe kuri ecran.

Urashobora kunoza FCP mugutinza JavaScript cyangwa CSS idakomeye. Ibyo bivuze iki? Byoroheje, JavaScript cyangwa imisusire idakeneye kuboneka kumarangi yambere yurupapuro rwawe igomba gushyirwaho ibimenyetso asynccyangwa deferibiranga.

Ibi byemeza ko ibikoresho bike byingenzi byapakiwe nyuma kandi ntibibuza irangi ryambere. Kurundi ruhande, ibikoresho byingenzi birashobora gushyirwamo nkumurongo winyandiko cyangwa imiterere.

Niba ushaka kumenya byinshi kuriyi ngingo, hari ingingo nyinshi zingenzi kubyerekeye:

• https://web.dev/render-buza-amakuru-
• https://web.dev/defer-nta-cyaha-css/

Buri gihe ukoreshe HTTPS

Urubuga rwawe rugomba kuboneka gusa kuri HTTPS ihuza mubikorwa. HTTPS itezimbere umutekano, ubuzima bwite, no kuboneka kwimbuga zose, kandi ntakintu nkurugendo rwurubuga rutumva . Intambwe zo gushiraho urubuga rwawe kugirango rutangwe gusa kuri HTTPS ziratandukanye cyane bitewe nubwubatsi bwawe hamwe nuwitanga urubuga, bityo bikaba birenze urugero rwizi nyandiko.

Imbuga zitangwa hejuru ya HTTPS zigomba kandi kugera kumpapuro zose, inyandiko, nundi mutungo hejuru ya HTTPS. Bitabaye ibyo, uzohereza abakoresha kuvanga ibintu bifatika , biganisha ku ntege nke zishobora kuba aho urubuga rushobora guhungabana muguhindura kwishingikiriza. Ibi birashobora kugushikana kubibazo byumutekano no kuburira-mushakisha kwerekanwa kubakoresha. Waba ubona Bootstrap muri CDN cyangwa uyikorera wenyine, menya neza ko uyigeraho hejuru ya HTTPS.