Ottimizzare

Lean Sass importa

Quando utilizzi Sass nella tua pipeline di asset, assicurati di ottimizzare Bootstrap inserendo solo @importi componenti di cui hai bisogno. Le tue ottimizzazioni maggiori proverranno probabilmente dalla Layout & Componentssezione del nostro 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";

Se non stai utilizzando un componente, commentalo o eliminalo completamente. Ad esempio, se non stai utilizzando il carosello, rimuovi l'importazione per salvare alcune dimensioni del file nel CSS compilato. Tieni presente che ci sono alcune dipendenze tra le importazioni Sass che potrebbero rendere più difficile l'omissione di un file.

JavaScript snello

JavaScript di Bootstrap include ogni componente nei nostri file dist primari ( bootstrap.jse bootstrap.min.js) e persino la nostra dipendenza primaria (Popper) con i nostri file bundle ( bootstrap.bundle.jse bootstrap.bundle.min.js). Durante la personalizzazione tramite Sass, assicurati di rimuovere il relativo JavaScript.

Ad esempio, supponendo che tu stia utilizzando il tuo bundler JavaScript come Webpack o Rollup, importerai solo il JavaScript che prevedi di utilizzare. Nell'esempio seguente, mostriamo come includere solo il nostro 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

In questo modo, non includi alcun JavaScript che non intendi utilizzare per componenti come pulsanti, caroselli e descrizioni comandi. Se stai importando menu a discesa, descrizioni comandi o popover, assicurati di elencare la dipendenza Popper nel tuo package.jsonfile.

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

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

Prefisso automatico .browserslistrc

Bootstrap dipende da Autoprefixer per aggiungere automaticamente i prefissi del browser a determinate proprietà CSS. I prefissi sono dettati dal nostro .browserslistrcfile, che si trova nella radice del repository Bootstrap. La personalizzazione di questo elenco di browser e la ricompilazione di Sass rimuoveranno automaticamente alcuni CSS dal CSS compilato, se sono presenti prefissi del fornitore univoci per quel browser o versione.

CSS inutilizzato

Se hai bisogno di aiuto con questa sezione, ti preghiamo di considerare l'apertura di un PR. Grazie!

Sebbene non disponiamo di un esempio predefinito per l'utilizzo di PurgeCSS con Bootstrap, ci sono alcuni articoli utili e procedure dettagliate che la community ha scritto. Ecco 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, questo articolo CSS Tricks sui CSS inutilizzati mostra come utilizzare PurgeCSS e altri strumenti simili.

Riduci a icona e gzip

Quando possibile, assicurati di comprimere tutto il codice che offri ai tuoi visitatori. Se stai utilizzando i file dist di Bootstrap, prova ad attenerti alle versioni ridotte (indicate dalle estensioni .min.csse ). .min.jsSe stai creando Bootstrap dal sorgente con il tuo sistema di build, assicurati di implementare i tuoi minificatori per HTML, CSS e JS.

File non bloccanti

Sebbene la riduzione e l'utilizzo della compressione possano sembrare sufficienti, rendere i tuoi file non bloccanti è anche un grande passo per rendere il tuo sito ben ottimizzato e abbastanza veloce.

Se stai utilizzando un plug-in Lighthouse in Google Chrome, potresti esserti imbattuto in FCP. La metrica First Contentful Paint misura il tempo che intercorre tra l'inizio del caricamento della pagina e il rendering di qualsiasi parte del contenuto della pagina sullo schermo.

Puoi migliorare FCP rinviando JavaScript o CSS non critici. Che cosa significa? Semplicemente, JavaScript o fogli di stile che non devono essere presenti nel primo disegno della tua pagina dovrebbero essere contrassegnati con asynco deferattributi.

Ciò garantisce che le risorse meno importanti vengano caricate in un secondo momento e non blocchino la prima vernice. D'altra parte, le risorse critiche possono essere incluse come script o stili inline.

Se vuoi saperne di più su questo, ci sono già molti ottimi articoli a riguardo:

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

Usa sempre HTTPS

Il tuo sito web dovrebbe essere disponibile solo tramite connessioni HTTPS in produzione. HTTPS migliora la sicurezza, la privacy e la disponibilità di tutti i siti e non esiste traffico Web non sensibile . I passaggi per configurare il tuo sito Web in modo che venga servito esclusivamente su HTTPS variano ampiamente a seconda della tua architettura e del provider di hosting Web e quindi esulano dall'ambito di questi documenti.

I siti serviti su HTTPS dovrebbero anche accedere a tutti i fogli di stile, script e altre risorse tramite connessioni HTTPS. In caso contrario, invierai agli utenti contenuto attivo misto , portando a potenziali vulnerabilità in cui un sito può essere compromesso alterando una dipendenza. Ciò può causare problemi di sicurezza e avvisi nel browser visualizzati dagli utenti. Sia che tu stia ricevendo Bootstrap da una CDN o che lo serva tu stesso, assicurati di accedervi solo tramite connessioni HTTPS.