Endla leswaku swi va leswinene

Hlayisa tiphurojeke ta wena ti olova, ti hlamula, naswona ti hlayisiwa leswaku u ta kota ku tisa ntokoto lowunene na ku kongomisa eka mintirho ya nkoka swinene.

Eka tluka leri

Lean Sass yi nghenisa swilo leswi humaka ematikweni mambe

Loko u tirhisa Sass eka phayiphi ya wena ya nhundzu, tiyisisa leswaku u antswisa Bootstrap hi ku @importing ntsena swiphemu leswi u swi lavaka. Swi nga ha endleka leswaku ku antswisiwa ka wena lokukulu ku ta huma eka Layout & Componentsxiyenge xa hina 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";

Loko u nga tirhisi xiphemu xo karhi, xi hlamusele kutani u xi susa hi ku helela. Hi xikombiso, loko u nga tirhisi carousel, susa ku nghenisa koloko leswaku u hlayisa mpimo wo karhi wa fayili eka CSS ya wena leyi hlengeletiweke. Hlayisa emiehleketweni ku na swin’wana leswi titshegeke eka ku nghenisiwa hinkwako ka Sass leswi nga endlaka leswaku swi tika swinene ku tshika fayili.

Titshege hi JavaScript

JavaScript ya Bootstrap yi katsa xiphemu xin’wana ni xin’wana eka tifayela ta hina ta dist ta le henhla ( bootstrap.jsna bootstrap.min.js), hambi ku ri ku titshega ka hina ka le henhla (Popper) ni tifayela ta hina ta bundle ( bootstrap.bundle.jsna bootstrap.bundle.min.js). Loko u ri karhi u lulamisa hi ku tirhisa Sass, tiyiseka leswaku u susa JavaScript leyi fambisanaka na yona.

Xikombiso, hi ku ehleketa leswaku u tirhisa xihlanganisi xa wena xa JavaScript xo fana na Webpack kumbe Rollup, u ta nghenisa ntsena JavaScript leyi u kunguhataka ku yi tirhisa. Eka xikombiso lexi nga laha hansi, hi kombisa ndlela yo katsa ntsena JavaScript ya hina 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';

Hi ndlela leyi, a wu katsi JavaScript yihi na yihi leyi u nga kunguhatiki ku yi tirhisa eka swiphemu swo tanihi swikomba-nkarhi, ti- carousel ni switsundzuxo swa switirhisiwa. Loko u nghenisa swilo leswi nga ehansi, switsundzuxo swa switirhisiwa kumbe ti-popover, tiyisisa leswaku u xaxameta ku titshega ka Popper eka package.jsonfayili ya wena.

Ku Rhumeriwa eMatikweni mambe ka Xiviri

Tifayili leti bootstrap/js/disttirhisiwaka i default export , kutani loko u lava ku tirhisa yin’wana ya tona u fanele ku endla leswi landzelaka:

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

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

Xivulavulelo xa xihatla .browserslistrc

Bootstrap yi titshege hi Autoprefixer ku engetela hi ku tisungulela swirhangi swa browser eka swihlawulekisi swo karhi swa CSS. Swihlawulekisi swi lerisiwe hi .browserslistrcfayili ya hina, leyi kumekaka eka rimitsu ra Bootstrap repo. Ku lulamisa nxaxamelo lowu wa swihlamusela-marito na ku hlengeleta nakambe Sass swi ta susa hi ku tisungulela CSS yin’wana eka CSS ya wena leyi hlengeletiweke, loko ku ri na swirhangi swa vaxavisi leswi hlawulekeke eka xihlamusela-marito xexo kumbe vuhundzuluxeri.

CSS leyi nga tirhisiwangiki

Mpfuneto wu laviwa hi xiyenge lexi, hi kombela u ehleketa ku pfula PR. Inkomu!

Hambi leswi hi nga riki na xikombiso lexi akiweke ka ha ri emahlweni xo tirhisa PurgeCSS na Bootstrap, ku na swihloko swo pfuna na ku famba-famba leswi vaaki va swi tsaleke. Hi leswi swin’wana leswi u nga swi hlawulaka:

Xo hetelela, xihloko lexi xa CSS Tricks eka CSS leyi nga tirhisiwangiki xi kombisa ndlela yo tirhisa PurgeCSS ni switirhisiwa swin’wana leswi fanaka.

Ku hunguta na ku gzip

Loko swi koteka, tiyiseka leswaku u tshikilela khodi hinkwayo leyi u yi nyikaka vaendzi va wena. Loko u tirhisa tifayela ta Bootstrap dist, ringeta ku namarhela tivhidiyo leti hungutiweke (leswi kombisiweke hi swiengetelo swa .min.cssna .min.js). Loko u aka Bootstrap ku suka eka xihlovo hi sisiteme ya wena yo aka, tiyisisa leswaku u tirhisa switsongo swa wena swa HTML, CSS, na JS.

Tifayili leti nga pfaleriwangiki

Hambileswi ku hunguta ni ku tirhisa ku tshikileriwa swi nga ha vonakaka swi enerile, ku endla leswaku tifayela ta wena ti nga siveriwi na swona i goza lerikulu ro endla leswaku sayiti ya wena yi antswisiwa kahle naswona yi hatlisa hi laha ku ringaneke.

Loko u tirhisa plugin ya Lighthouse eka Google Chrome, u nga ha va u khunguvanyekile hi FCP. Metriki ya Pende yo Sungula leyi nga ni Vuxokoxoko yi pima nkarhi ku sukela loko tluka ri sungula ku layicha ku ya eka loko xiphemu xihi na xihi xa nhundzu ya tluka xi nyikeriwa eka xikirini.

U nga antswisa FCP hi ku tlherisela endzhaku JavaScript kumbe CSS leyi nga riki ya nkoka. Xana sweswo swi vula yini? Hi ku olova, JavaScript kumbe switayele leswi nga laviki ku va kona eka pende yo sungula ya tluka ra wena swi fanele swi funghiwe hi asynckumbe deferswihlawulekisi.

Leswi switiyisisa leswaku switirhisiwa leswinga riki swa nkoka ngopfu swi layicha endzhaku naswona swinga siveli pende yosungula. Hi hala tlhelo, switirhisiwa swa nkoka swi nga katsiwa tanihi switshuriwa swa le ndzeni ka layini kumbe switayele.

Loko u lava ku dyondza swo tala hi mhaka leyi, se ku ni swihloko swo tala leswinene malunghana na swona:

Minkarhi hinkwayo tirhisa HTTPS

Webusayiti ya wena yi fanele ku kumeka ntsena hi vuhlanganisi bya HTTPS eka vuhumelerisi. HTTPS yi antswisa vuhlayiseki, vuhlayiseki bya xihundla ni ku kumeka ka tisayiti hinkwato, naswona a ku na nchumu lowu vuriwaka ku famba-famba ka webu loku nga riki na vuxiyaxiya . Magoza yo lulamisa webusayiti ya wena leswaku yi tirhisiwa ntsena hi HTTPS ya hambana swinene ku ya hi xivumbeko xa wena na muphakeri wa wena wa ku rhurhela webu, naswona xisweswo ya le handle ka xiyenge xa tidokisi leti.

Tisayiti leti tirhisiwaka hi HTTPS ti fanele ku tlhela ti fikelela switayele hinkwaswo, switshuriwa, na nhundzu yin’wana hi ku tirhisa vuhlanganisi bya HTTPS. Handle ka sweswo, u ta va u rhumela vatirhisi swilo leswi tirhaka leswi pfanganisiweke , leswi yisaka eka swiphiqo leswi nga vaka kona laha sayiti yi nga kavanyetiwaka hi ku cinca ku titshega. Leswi swi nga endla leswaku ku va ni swiphiqo swa vuhlayiseki ni switsundzuxo swa le ndzeni ka browser leswi kombisiwaka eka vatirhisi. Kunga khathariseki leswaku u kuma Bootstrap ku suka eka CDN kumbe u yi tirhela hi wexe, tiyisisa leswaku u yi fikelela ntsena hi vuhlanganisi bya HTTPS.