Importations Lean Sass

Lorsque vous utilisez Sass dans votre pipeline d'actifs, assurez-vous d'optimiser Bootstrap en @import uniquement les composants dont vous avez besoin. Vos plus grandes optimisations proviendront probablement du Layout & Section Composants de notre 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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Si vous n'utilisez pas un composant, commentez-le ou supprimez-le entièrement. Par exemple, si vous n'utilisez pas le carrousel, supprimez cette importation pour économiser de la taille de fichier dans votre CSS compilé. Gardez à l'esprit qu'il existe certaines dépendances entre les importations Sass qui peuvent rendre plus difficile l'omission d'un fichier.

Javascript simplifié

Le JavaScript de Bootstrap inclut tous les composants de nos fichiers de distribution principaux (bootstrap.js et bootstrap.min.js), et même notre dépendance principale (Popper) avec nos fichiers bundle (bootstrap.bundle.js et bootstrap.bundle.min.js). Pendant que vous personnalisez via Sass, assurez-vous de supprimer le JavaScript associé.

Par exemple, en supposant que vous utilisez votre propre bundle JavaScript comme Webpack ou Rollup, vous n'importerez que le JavaScript que vous prévoyez d'utiliser. Dans l'exemple ci-dessous, nous montrons comment inclure simplement notre 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/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';

De cette façon, vous n'incluez aucun code JavaScript que vous n'avez pas l'intention d'utiliser pour des composants tels que des boutons, des carrousels et des info-bulles. Si vous importez des listes déroulantes, des info-bulles ou des popovers, veillez à répertorier la dépendance Popper dans votre fichier package.json.

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

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

Préfixe automatique .browserslistrc

Bootstrap dépend d'Autoprefixer pour ajouter automatiquement des préfixes de navigateur à certaines propriétés CSS. Les préfixes sont dictés par notre fichier .browserslistrc, trouvé à la racine du référentiel Bootstrap. La personnalisation de cette liste de navigateurs et la recompilation de Sass supprimeront automatiquement certains CSS de votre CSS compilé, s'il existe des préfixes de fournisseur uniques à ce navigateur ou à cette version.

CSS inutilisé

Vous avez besoin d'aide pour cette section, veuillez envisager d'ouvrir un PR. Merci !

Bien que nous n'ayons pas d'exemple prédéfini pour utiliser PurgeCSS avec Bootstrap, il existe des articles utiles et des procédures pas à pas que la communauté a écrit. Voici quelques options :

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

Enfin, cet article CSS Tricks sur les CSS inutilisés montre comment utiliser PurgeCSS et d'autres outils similaires.

Minifier et gzip

Dans la mesure du possible, assurez-vous de compresser tout le code que vous fournissez à vos visiteurs. Si vous utilisez des fichiers dist Bootstrap, essayez de vous en tenir aux versions minifiées (indiquées par les extensions .min.css et .min.js). Si vous construisez Bootstrap à partir de la source avec votre propre système de construction, assurez-vous d'implémenter vos propres minificateurs pour HTML, CSS et JS.

Fichiers non bloquants

Bien que la réduction et l'utilisation de la compression puissent sembler suffisantes, rendre vos fichiers non bloquants est également un grand pas en avant pour rendre votre site bien optimisé et assez rapide.

Si vous utilisez un plugin Lighthouse dans Google Chrome, vous êtes peut-être tombé sur FCP. La métrique La première peinture de contenu mesure le temps entre le début du chargement de la page et le moment où une partie du contenu de la page est rendue à l'écran .

Vous pouvez améliorer le FCP en différant les JavaScript ou CSS non critiques. Qu'est-ce que ça veut dire? Simplement, JavaScript ou les feuilles de style qui n'ont pas besoin d'être présents sur la première peinture de votre page doivent être marqués avec les attributs async ou defer.

Cela garantit que les ressources les moins importantes sont chargées plus tard et ne bloquent pas la première peinture. D'autre part, les ressources critiques peuvent être incluses sous forme de scripts ou de styles en ligne.

Si vous souhaitez en savoir plus à ce sujet, il existe déjà de nombreux articles intéressants à ce sujet :

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

Utilisez toujours HTTPS

Votre site Web ne doit être disponible que via des connexions HTTPS en production. HTTPS améliore la sécurité, la confidentialité et la disponibilité de tous les sites, et le trafic Web non sensible n'existe pas. Les étapes de configuration de votre site Web pour qu'il soit servi exclusivement via HTTPS varient considérablement en fonction de votre architecture et de votre fournisseur d'hébergement Web, et sortent donc du cadre de ces documents.

Les sites servis via HTTPS doivent également accéder à toutes les feuilles de style, scripts et autres éléments via des connexions HTTPS. Sinon, vous enverrez aux utilisateurs du contenu actif mixte, ce qui entraînera des vulnérabilités potentielles lorsqu'un site peut être compromis en modifiant une dépendance. Cela peut entraîner des problèmes de sécurité et des avertissements dans le navigateur affichés aux utilisateurs. Que vous obteniez Bootstrap à partir d'un CDN ou que vous le serviez vous-même, assurez-vous de n'y accéder que via des connexions HTTPS.