Optimitzar

Importacions de Lean Sass

Quan utilitzeu Sass al vostre pipeline d'actius, assegureu-vos d'optimitzar Bootstrap utilitzant només @importels components que necessiteu. Les vostres optimitzacions més grans probablement vindran de la Layout & Componentssecció del nostre 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";

Si no feu servir cap component, comenta-lo o suprimeix-lo completament. Per exemple, si no feu servir el carrusel, elimineu aquesta importació per desar una mica de mida de fitxer al vostre CSS compilat. Tingueu en compte que hi ha algunes dependències entre les importacions de Sass que poden dificultar l'omissió d'un fitxer.

Lean JavaScript

El JavaScript de Bootstrap inclou tots els components dels nostres fitxers dist primaris ( bootstrap.jsi bootstrap.min.js), i fins i tot la nostra dependència principal (Popper) amb els nostres fitxers de paquets ( bootstrap.bundle.jsi bootstrap.bundle.min.js). Mentre personalitzeu mitjançant Sass, assegureu-vos d'eliminar JavaScript relacionat.

Per exemple, suposant que utilitzeu el vostre propi paquet de JavaScript com Webpack o Rollup, només importaríeu el JavaScript que voleu utilitzar. A l'exemple següent, mostrem com incloure només el nostre JavaScript 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';

D'aquesta manera, no incloureu cap JavaScript que no vulgueu utilitzar per a components com ara botons, carrusels i informació sobre eines. Si esteu important menús desplegables, informació sobre eines o finestres emergents, assegureu-vos d'enumerar la dependència de Popper al vostre package.jsonfitxer.

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

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

Prefixador automàtic .browserslistrc

Bootstrap depèn de l'Autoprefixer per afegir automàticament prefixos del navegador a determinades propietats CSS. Els prefixos els dicta el nostre .browserslistrcfitxer, que es troba a l'arrel del dipòsit Bootstrap. Personalitzar aquesta llista de navegadors i recompilar el Sass eliminarà automàticament alguns CSS del vostre CSS compilat, si hi ha prefixos de proveïdor únics per a aquest navegador o versió.

CSS no utilitzat

Es demana ajuda amb aquesta secció, considereu obrir un PR. Gràcies!

Tot i que no tenim un exemple preconstruït per utilitzar PurgeCSS amb Bootstrap, hi ha alguns articles útils i explicacions que la comunitat ha escrit. Aquí hi ha algunes opcions:

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

Finalment, aquest article de CSS Tricks sobre CSS no utilitzat mostra com utilitzar PurgeCSS i altres eines similars.

Redueix i gzip

Sempre que sigui possible, assegureu-vos de comprimir tot el codi que publiqueu als vostres visitants. Si utilitzeu fitxers dist de Bootstrap, proveu de respectar les versions minificades (indicades per les extensions .min.cssi ). .min.jsSi esteu creant Bootstrap des de la font amb el vostre propi sistema de compilació, assegureu-vos d'implementar els vostres propis minificadors per a HTML, CSS i JS.

Fitxers sense bloqueig

Tot i que la minimització i l'ús de la compressió pot semblar suficient, fer que els vostres fitxers no bloquegin també és un gran pas per fer que el vostre lloc estigui ben optimitzat i prou ràpid.

Si utilitzeu un connector Lighthouse a Google Chrome, és possible que hàgiu ensopegat amb FCP. La mètrica First Contentful Paint mesura el temps des que la pàgina comença a carregar-se fins que qualsevol part del contingut de la pàgina es mostra a la pantalla.

Podeu millorar FCP ajornant JavaScript o CSS no crítics. Què vol dir això? Simplement, JavaScript o fulls d'estil que no necessiten estar presents a la primera pintura de la pàgina s'han de marcar amb asynco amb deferatributs.

D'aquesta manera s'assegura que els recursos menys importants es carreguen més tard i no bloqueja la primera pintura. D'altra banda, els recursos crítics es poden incloure com a scripts o estils en línia.

Si voleu aprendre més sobre això, ja hi ha molts articles fantàstics sobre això:

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

Feu servir sempre HTTPS

El vostre lloc web només hauria d'estar disponible mitjançant connexions HTTPS en producció. HTTPS millora la seguretat, la privadesa i la disponibilitat de tots els llocs, i no existeix el trànsit web no sensible . Els passos per configurar el vostre lloc web perquè es serveixi exclusivament a través d'HTTPS varien molt segons la vostra arquitectura i el vostre proveïdor d'allotjament web i, per tant, estan fora de l'abast d'aquests documents.

Els llocs que es publiquen mitjançant HTTPS també haurien d'accedir a tots els fulls d'estil, scripts i altres recursos mitjançant connexions HTTPS. En cas contrari, enviareu als usuaris contingut actiu mixt , la qual cosa comportarà possibles vulnerabilitats on un lloc es pot veure compromès alterant una dependència. Això pot provocar problemes de seguretat i avisos dins del navegador que es mostrin als usuaris. Tant si rebeu Bootstrap des d'un CDN com si us el poseu vosaltres mateixos, assegureu-vos que només hi accediu mitjançant connexions HTTPS.