Ngoptimalake

Lean Sass impor

Nalika nggunakake Sass ing pipa aset, priksa manawa sampeyan ngoptimalake Bootstrap kanthi mung @importing komponen sing dibutuhake. Optimisasi paling gedhe sampeyan bakal teka saka Layout & Componentsbagean kita bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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";

Yen sampeyan ora nggunakake komponen, komentar utawa mbusak kabeh. Contone, yen sampeyan ora nggunakake carousel, mbusak impor kasebut kanggo nyimpen sawetara ukuran file ing CSS sing dikompilasi. Elinga yen ana sawetara dependensi ing impor Sass sing bisa nggawe luwih angel ngilangi file.

Lean JavaScript

JavaScript Bootstrap nyakup saben komponen ing file dist utami kita ( bootstrap.jslan bootstrap.min.js), malah ketergantungan utami kita (Popper) karo file bundel kita ( bootstrap.bundle.jslan bootstrap.bundle.min.js). Nalika sampeyan ngatur liwat Sass, manawa kanggo mbusak JavaScript sing gegandhengan.

Umpamane, yen sampeyan nggunakake bundler JavaScript dhewe kaya Webpack, Parcel, utawa Vite, sampeyan mung bakal ngimpor JavaScript sing arep digunakake. Ing conto ing ngisor iki, kita nuduhake carane mung nyakup JavaScript modal kita:

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

Kanthi cara iki, sampeyan ora kalebu JavaScript sing ora arep digunakake kanggo komponen kaya tombol, carousel, lan tooltips. Yen sampeyan ngimpor dropdowns, tooltips utawa popovers, priksa manawa sampeyan nemtokake ketergantungan Popper ing package.jsonfile sampeyan.

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

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

Autoprefixer .browserslistrc

Bootstrap gumantung ing Autoprefixer kanggo nambahake awalan browser kanthi otomatis menyang properti CSS tartamtu. Ater-ater didikte dening .browserslistrcfile kita, ditemokake ing root repo Bootstrap. Ngatur dhaptar browser iki lan ngumpulake maneh Sass bakal mbusak sawetara CSS kanthi otomatis saka CSS sing dikompilasi, yen ana prefiks vendor sing unik kanggo browser utawa versi kasebut.

CSS sing ora digunakake

Dibutuhake bantuan babagan bagean iki, nimbang mbukak PR. Matur nuwun!

Nalika kita ora duwe conto prebuilt kanggo nggunakake PurgeCSS karo Bootstrap, ana sawetara artikel migunani lan walkthroughs sing masyarakat wis ditulis. Ing ngisor iki sawetara opsi:

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

Pungkasan, artikel Trik CSS iki babagan CSS sing ora digunakake nuduhake carane nggunakake PurgeCSS lan alat liyane sing padha.

Minify lan gzip

Yen bisa, manawa kanggo ngompres kabeh kode sing sampeyan gunakake kanggo pengunjung. Yen sampeyan nggunakake file Bootstrap dist, nyoba kanggo tetep ing versi minified (dituduhake dening .min.csslan .min.jsekstensi). Yen sampeyan lagi mbangun Bootstrap saka sumber kanthi sistem mbangun dhewe, manawa sampeyan kudu ngetrapake minifier sampeyan dhewe kanggo HTML, CSS, lan JS.

File non-blocking

Nalika nyilikake lan nggunakake kompresi bisa uga katon cukup, nggawe file sing ora diblokir uga minangka langkah gedhe kanggo nggawe situs sampeyan dioptimalake kanthi cepet lan cukup cepet.

Yen sampeyan nggunakake plugin Mercusuar ing Google Chrome, sampeyan bisa uga kesandhung FCP. Metrik First Contentful Paint ngukur wektu saka nalika kaca wiwit dimuat nganti ana bagean saka isi kaca ditampilake ing layar.

Sampeyan bisa nambah FCP kanthi nundha JavaScript utawa CSS sing ora kritis. Apa tegese? Cukup, JavaScript utawa stylesheets sing ora perlu ana ing cat pisanan kaca sampeyan kudu ditandhani asyncutawa deferatribut.

Iki mesthekake yen sumber daya sing kurang penting dimuat mengko lan ora ngalangi cat pisanan. Ing sisih liya, sumber daya kritis bisa dilebokake minangka skrip utawa gaya inline.

Yen sampeyan pengin sinau luwih lengkap babagan iki, wis ana akeh artikel sing apik babagan iki:

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

Tansah nggunakake HTTPS

Situs web sampeyan mung kudu kasedhiya liwat sambungan HTTPS ing produksi. HTTPS nambah keamanan, privasi, lan kasedhiyan kabeh situs, lan ora ana lalu lintas web sing ora sensitif . Langkah-langkah kanggo ngatur situs web sampeyan supaya bisa dilayani sacara eksklusif liwat HTTPS beda-beda gumantung saka arsitektur lan panyedhiya hosting web, lan kanthi mangkono ngluwihi ruang lingkup dokumen kasebut.

Situs sing dilayani liwat HTTPS uga kudu ngakses kabeh stylesheet, skrip, lan aset liyane liwat sambungan HTTPS. Yen ora, sampeyan bakal ngirim pangguna campuran konten aktif , sing nyebabake kerentanan potensial ing ngendi situs bisa dikompromi kanthi ngganti dependensi. Iki bisa nyebabake masalah keamanan lan bebaya ing browser sing ditampilake kanggo pangguna. Apa sampeyan entuk Bootstrap saka CDN utawa ngladeni dhewe, priksa manawa sampeyan mung ngakses liwat sambungan HTTPS.