Optimiséieren

Lean Sass importéiert

Wann Dir Sass an Ärer Asset Pipeline benotzt, vergewëssert Iech datt Dir Bootstrap optiméiert andeems Dir nëmmen @importdéi Komponenten déi Dir braucht. Är gréissten Optimisatiounen wäerte méiglecherweis aus der Layout & ComponentsSektioun vun eisem 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";

Wann Dir e Komponent net benotzt, kommentéiert se aus oder läscht se ganz. Zum Beispill, wann Dir de Karussell net benotzt, läscht dësen Import fir eng Dateigréisst an Ärem kompiléierte CSS ze späicheren. Bedenkt datt et e puer Ofhängegkeeten iwwer Sass Importer sinn, déi et méi schwéier maache kënnen eng Datei ofzeginn.

Lean JavaScript

Bootstrap's JavaScript enthält all Komponent an eise primäre dist Dateien ( bootstrap.jsan bootstrap.min.js), a souguer eis primär Ofhängegkeet (Popper) mat eise Bündeldateien ( bootstrap.bundle.jsan bootstrap.bundle.min.js). Wärend Dir personaliséiere iwwer Sass, gitt sécher verwandt JavaScript ze läschen.

Zum Beispill, unzehuelen datt Dir Ären eegene JavaScript-Bundler wéi Webpack oder Rollup benotzt, géift Dir nëmmen de JavaScript importéieren deen Dir plangt ze benotzen. Am Beispill hei drënner weisen mir wéi Dir just eise modal JavaScript enthält:

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

Op dës Manéier gitt Dir kee JavaScript mat, deen Dir net wëlles ze benotzen fir Komponenten wéi Knäppercher, Karussell an Tooltips. Wann Dir Dropdowns, Tooltipps oder Popovers importéiert, gitt sécher datt Dir d'Popper Ofhängegkeet an Ärer package.jsonDatei lëscht.

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

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

Autoprefixer .browserslistrc

Bootstrap hänkt vum Autoprefixer of fir automatesch Browser Präfixe fir bestëmmte CSS Eegeschaften ze addéieren. Präfixe ginn vun eiser .browserslistrcDatei diktéiert, an der Root vum Bootstrap Repo fonnt. Wann Dir dës Lëscht vu Browser personaliséiert an d'Sass nei kompiléiert, gëtt automatesch e puer CSS vun Ärem kompiléierte CSS ewechgeholl, wann et Verkeefer Präfixe sinn eenzegaarteg fir dee Browser oder Versioun.

Onbenotzt CSS

Hëllef gewënscht mat dëser Rubrik, betruecht w.e.g. e PR opzemaachen. Merci!

Och wa mir kee virgebaute Beispill hunn fir PurgeCSS mat Bootstrap ze benotzen, ginn et e puer hëllefräich Artikelen a Walkthroughs déi d'Gemeinschaft geschriwwen huet. Hei sinn e puer Optiounen:

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

Schlussendlech weist dësen CSS Tricks Artikel iwwer onbenotzt CSS wéi Dir PurgeCSS an aner ähnlech Tools benotzt.

Minifizéieren an gzip

Wann ëmmer méiglech, gitt sécher all de Code ze kompriméieren deen Dir fir Är Besucher servéiert. Wann Dir Bootstrap Dist-Dateien benotzt, probéiert d'minifizéiert Versiounen ze halen (gezeechent vun den .min.cssan .min.jsExtensiounen). Wann Dir Bootstrap aus der Quell mat Ärem eegene Bausystem baut, gitt sécher Är eege Minifiers fir HTML, CSS a JS ëmzesetzen.

Net-blockéierend Dateien

Wärend d'Minifizéierung an d'Benotzung vun der Kompressioun vläicht genuch schéngen, Är Dateien net blockéieren ze maachen ass och e grousse Schrëtt fir Är Site gutt optimiséiert a séier genuch ze maachen.

Wann Dir e Lighthouse Plugin am Google Chrome benotzt, hutt Dir vläicht iwwer FCP getrollt. Déi éischt Contentful Paint Metrik moosst d'Zäit vu wann d'Säit ufänkt ze lueden bis en Deel vum Inhalt vun der Säit um Bildschierm rendert.

Dir kënnt FCP verbesseren andeems Dir net-kritesch JavaScript oder CSS aussetzt. Wat bedeit dat? Einfach, JavaScript oder Stylesheets, déi net op der éischter Faarf vun Ärer Säit musse sinn, solle mat asyncoder deferAttributer markéiert ginn.

Dëst garantéiert datt déi manner wichteg Ressourcen méi spéit gelueden ginn an net déi éischt molen blockéieren. Op der anerer Säit kënne kritesch Ressourcen als Inline Scripten oder Stiler abegraff ginn.

Wann Dir méi iwwer dëst gewuer wëllt, ginn et scho vill flott Artikelen doriwwer:

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

Benotzt ëmmer HTTPS

Är Websäit sollt nëmmen iwwer HTTPS Verbindungen an der Produktioun verfügbar sinn. HTTPS verbessert d'Sécherheet, d'Privatsphär an d'Disponibilitéit vun alle Siten, an et gëtt net sou eppes wéi net-sensiblen Webverkéier . D'Schrëtt fir Är Websäit ze konfiguréieren fir exklusiv iwwer HTTPS zerwéiert ze ginn variéiere wäit ofhängeg vun Ärer Architektur a Webhosting Provider, a sinn also iwwer den Ëmfang vun dësen Dokumenter.

Siten, déi iwwer HTTPS servéiert ginn, sollten och Zougang zu all Stylesheets, Scripten an aner Verméigen iwwer HTTPS Verbindungen kréien. Soss schéckt Dir Benotzer gemëschten aktiven Inhalt , wat zu potenzielle Schwachstelle féiert, wou e Site kompromittéiert ka ginn andeems eng Ofhängegkeet geännert gëtt. Dëst kann zu Sécherheetsprobleemer an In-Browser Warnungen féieren, déi de Benotzer ugewise ginn. Egal ob Dir Bootstrap vun engem CDN kritt oder et selwer servéiert, gitt sécher datt Dir et nëmmen iwwer HTTPS Verbindungen zougitt.