Optimalkeun

impor Lean Sass

Nalika nganggo Sass dina pipa aset anjeun, pastikeun anjeun ngaoptimalkeun Bootstrap ku ngan ukur @importkomponén anu anjeun peryogikeun. Optimasi panggedena anjeun sigana bakal asalna tina Layout & Componentsbagian kami 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";

Upami anjeun henteu nganggo komponén, koméntar atanapi hapus sadayana. Salaku conto, upami anjeun henteu nganggo carousel, hapus impor éta pikeun ngahémat sababaraha ukuran file dina CSS anu anjeun susun. Émut yén aya sababaraha katergantungan dina impor Sass anu tiasa ngajantenkeun langkung sesah ngaleungitkeun file.

Lean JavaScript

JavaScript Bootstrap ngawengku unggal komponén dina file dist primér urang ( bootstrap.jsjeung bootstrap.min.js), komo kagumantungan primér urang (Popper) jeung file kebat urang ( bootstrap.bundle.jsjeung bootstrap.bundle.min.js). Nalika anjeun ngarobih via Sass, pastikeun pikeun ngahapus JavaScript anu aya hubunganana.

Salaku conto, anggap anjeun nganggo bungkusan JavaScript anjeun nyalira sapertos Webpack, Parcel, atanapi Vite, anjeun ngan ukur bakal ngimpor JavaScript anu anjeun badé dianggo. Dina conto di handap ieu, kami nunjukkeun kumaha ngan ukur ngalebetkeun JavaScript modal kami:

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

Ku cara ieu, anjeun henteu kalebet JavaScript anu anjeun henteu hoyong dianggo pikeun komponén sapertos tombol, carousels, sareng tooltip. Upami anjeun ngimpor dropdowns, tooltips atanapi popovers, pastikeun daptar kagumantungan Popper dina package.jsonfile anjeun.

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

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

Autoprefixer .browserslistrc

Bootstrap gumantung kana Autoprefixer pikeun otomatis nambahkeun awalan browser kana sipat CSS tangtu. Awalan didikte ku .browserslistrcfile kami, kapanggih dina akar repo Bootstrap. Nyaluyukeun daptar panyungsi ieu sareng recompiling Sass bakal otomatis ngahapus sababaraha CSS tina CSS anjeun anu disusun, upami aya awalan vendor anu unik pikeun browser atanapi versi éta.

CSS henteu kapake

Pitulung hayang jeung bagian ieu, mangga mertimbangkeun muka PR. hatur nuhun!

Sanaos kami henteu gaduh conto anu tos diwangun pikeun ngagunakeun PurgeCSS sareng Bootstrap, aya sababaraha tulisan anu mangpaat sareng jalan-jalan anu parantos ditulis ku masarakat. Ieu sababaraha pilihan:

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

Anu pamungkas, artikel Trik CSS ieu ngeunaan CSS anu henteu dianggo nunjukkeun kumaha ngagunakeun PurgeCSS sareng alat anu sami.

Minify sareng gzip

Sabisana, pastikeun pikeun niiskeun sadaya kode anu anjeun layankeun ka sémah anjeun. Upami anjeun nganggo file Bootstrap dist, cobian lengket kana versi anu diminified (ditunjukkeun ku .min.csssareng .min.jsekstensi). Upami anjeun nuju ngawangun Bootstrap tina sumberna nganggo sistem ngawangun anjeun nyalira, pastikeun pikeun nerapkeun minifiers anjeun nyalira pikeun HTML, CSS, sareng JS.

file non-blocking

Bari miniifying sarta ngagunakeun komprési bisa sigana kawas cukup, nyieun file Anjeun non-blocking oge hiji hambalan badag dina nyieun situs anjeun well-dioptimalkeun tur cukup gancang.

Upami anjeun nganggo plugin Mercusuar di Google Chrome, anjeun tiasa kasandung FCP. The First Contentful Paint métrik ngukur waktu ti nalika kaca mimiti dimuat nepi ka iraha wae bagian tina eusi kaca urang rendered dina layar.

Anjeun tiasa ningkatkeun FCP ku nunda JavaScript atanapi CSS non-kritis. Naon ari éta hartosna? Kantun, JavaScript atanapi stylesheets anu henteu kedah aya dina cet munggaran halaman anjeun kedah ditandaan asyncatanapi deferatribut.

Ieu ensures yén sumberdaya kirang penting dimuat engké na teu blocking cet munggaran. Di sisi séjén, sumberdaya kritis bisa kaasup salaku Aksara inline atawa gaya.

Upami anjeun hoyong diajar langkung seueur ngeunaan ieu, parantos aya seueur tulisan anu saé ngeunaan éta:

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

Sok nganggo HTTPS

Situs wéb anjeun ngan ukur sayogi dina sambungan HTTPS dina produksi. HTTPS ningkatkeun kaamanan, privasi, sareng kasadiaan sadaya situs, sareng teu aya patalimarga wéb anu henteu sénsitip . Léngkah-léngkah pikeun ngonpigurasikeun halaman wéb anjeun pikeun dilayanan sacara éksklusif dina HTTPS rupa-rupa gumantung kana arsitéktur sareng panyayogi wéb anjeun, sahingga saluareun ruang lingkup dokumén ieu.

Situs anu dilayanan dina HTTPS ogé kedah ngaksés sadaya lambar gaya, skrip, sareng aset sanés tina sambungan HTTPS. Upami teu kitu, anjeun bakal ngirim pamaké campuran eusi aktip , ngarah kana potensi kerentanan dimana situs bisa kompromi ku ngarobah hiji kagumantungan. Ieu tiasa nyababkeun masalah kaamanan sareng peringatan dina browser anu ditampilkeun ka pangguna. Naha anjeun kéngingkeun Bootstrap tina CDN atanapi ngalayanan nyalira, pastikeun yén anjeun ngan ukur ngaksés éta tina sambungan HTTPS.