Optimizà

Lean Sass importa

Quandu aduprate Sass in u vostru pipeline di asset, assicuratevi di ottimisà Bootstrap solu cù @importi cumpunenti chì avete bisognu. I vostri ottimisazioni più grande prubabilmente venenu da a Layout & Componentssezione di u nostru 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";

Se ùn avete micca aduprà un cumpunente, cummentate o sguassate completamente. Per esempiu, sè ùn avete micca utilizatu u carrusel, sguassate l'impurtazione per salvà qualchì dimensione di u schedariu in u vostru CSS compilatu. Tenite in mente chì ci sò alcune dipendenze à traversu l'impurtazioni Sass chì ponu rende più difficiuli di omette un schedariu.

Lean JavaScript

U JavaScript di Bootstrap include ogni cumpunente in i nostri file dist primari ( bootstrap.jsè bootstrap.min.js), è ancu a nostra dependenza primaria (Popper) cù i nostri fugliali di bundle ( bootstrap.bundle.jsè bootstrap.bundle.min.js). Mentre persunalizate via Sass, assicuratevi di sguassà JavaScript cunnessu.

Per esempiu, assumendu chì aduprate u vostru propiu bundler JavaScript cum'è Webpack, Parcel, o Vite, importate solu u JavaScript chì pensa à aduprà. In l'esempiu quì sottu, mostramu cumu include solu u nostru JavaScript modale:

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

In questu modu, ùn site micca include JavaScript chì ùn avete micca intenzione di utilizà per cumpunenti cum'è i buttoni, carrusels è tooltips. Sè importate dropdown, tooltips o popovers, assicuratevi di listà a dependenza Popper in u vostru package.jsonschedariu.

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

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

Autoprefixer .browserslistrc

Bootstrap dipende da Autoprefixer per aghjunghje automaticamente prefissi di navigatore à certe proprietà CSS. I prefissi sò dettati da u nostru .browserslistrcschedariu, truvati in a radica di u repo Bootstrap. A persunalizazione di sta lista di navigatori è a ricompilazione di u Sass sguassate automaticamente alcuni CSS da u vostru CSS compilatu, se ci sò prefissi di venditore unichi per quellu navigatore o versione.

CSS inutilizatu

Aiutu vulsutu cù sta sezione, per piacè cunsiderà l'apertura di un PR. Grazie!

Mentre ùn avemu micca un esempiu prebuilt per aduprà PurgeCSS cù Bootstrap, ci sò qualchi articuli utili è passaghji chì a cumunità hà scrittu. Eccu alcune opzioni:

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

Infine, questu articulu di CSS Tricks nantu à CSS inutilizatu mostra cumu utilizà PurgeCSS è altri strumenti simili.

Minify è gzip

Sempre chì hè pussibule, assicuratevi di cumpressà tuttu u codice chì serve à i vostri visitatori. Sè vo aduprate i schedarii dist Bootstrap, pruvate à aderisce à e versioni minificate (indicate da .min.csse .min.jsestensioni). Se custruite Bootstrap da a fonte cù u vostru propiu sistema di creazione, assicuratevi di implementà i vostri propri minifiers per HTML, CSS è JS.

I schedari chì ùn sò micca bluccati

Mentre a minifying è l'usu di a compressione pò esse abbastanza, rende i vostri fugliali chì ùn sò micca bluccati hè ancu un grande passu per fà u vostru situ bè ottimizatu è abbastanza veloce.

Sè vo aduprate un plugin Lighthouse in Google Chrome, pudete avè stumbled in FCP. A metrica First Contentful Paint misura u tempu da quandu a pagina principia a carica à quandu ogni parte di u cuntenutu di a pagina hè resa nantu à u screnu.

Pudete migliurà FCP deferendu JavaScript o CSS non criticu. Chì vole dì què? Simply, JavaScript o stylesheets chì ùn anu micca bisognu di esse presente nantu à a prima pittura di a vostra pagina deve esse marcatu cù asynco deferattributi.

Questu assicura chì e risorse menu impurtanti sò caricate più tardi è micca bluccà a prima pittura. Per d 'altra banda, risorse critiche ponu esse incluse cum'è script inline o stili.

Se vulete sapè più nantu à questu, ci sò digià assai articuli grandi nantu à questu:

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

Aduprate sempre HTTPS

U vostru situ web deve esse dispunibule solu nantu à e cunnessione HTTPS in produzzione. HTTPS migliurà a sicurità, a privacy è a dispunibilità di tutti i siti, è ùn ci hè nunda di trafficu web non sensitivu . I passi per cunfigurà u vostru situ web per esse servutu solu nantu à HTTPS varienu assai sicondu a vostra architettura è u fornitore di hosting web, è cusì sò fora di u scopu di sti documenti.

I siti serviti nantu à HTTPS duveranu ancu accede à tutti i fogli di stile, scripts è altri assi nantu à e cunnessione HTTPS. Altrimenti, manderete à l'utilizatori un cuntenutu attivu mistu , chì porta à e vulnerabilità potenziali induve un situ pò esse cumprumissu alterando una dipendenza. Questu pò purtà à prublemi di sicurezza è avvisi in-browser affissati à l'utilizatori. Sia chì uttene Bootstrap da un CDN o serve sè stessu, assicuratevi di accede solu per e cunnessione HTTPS.