Optimieren

Lean Sass-Importe

Stellen Sie bei der Verwendung von Sass in Ihrer Asset-Pipeline sicher, dass Sie Bootstrap optimieren, indem Sie nur @importdie Komponenten verwenden, die Sie benötigen. Ihre größten Optimierungen kommen wahrscheinlich aus dem Layout & ComponentsAbschnitt unserer 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";

Wenn Sie eine Komponente nicht verwenden, kommentieren Sie sie aus oder löschen Sie sie vollständig. Wenn Sie beispielsweise das Karussell nicht verwenden, entfernen Sie diesen Import, um etwas Dateigröße in Ihrem kompilierten CSS zu sparen. Denken Sie daran, dass es einige Abhängigkeiten zwischen Sass-Importen gibt, die es schwieriger machen können, eine Datei wegzulassen.

Schlankes JavaScript

Das JavaScript von Bootstrap enthält jede Komponente in unseren primären dist-Dateien ( bootstrap.jsund bootstrap.min.js) und sogar unsere primäre Abhängigkeit (Popper) mit unseren Bundle-Dateien ( bootstrap.bundle.jsund bootstrap.bundle.min.js). Achten Sie beim Anpassen über Sass darauf, das zugehörige JavaScript zu entfernen.

Angenommen, Sie verwenden beispielsweise Ihren eigenen JavaScript-Bundler wie Webpack, Parcel oder Vite, importieren Sie nur das JavaScript, das Sie verwenden möchten. Im folgenden Beispiel zeigen wir, wie Sie einfach unser modales JavaScript einbinden:

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

Auf diese Weise schließen Sie kein JavaScript ein, das Sie nicht für Komponenten wie Schaltflächen, Karussells und QuickInfos verwenden möchten. Wenn Sie Dropdowns, QuickInfos oder Popovers importieren, achten Sie darauf, die Popper-Abhängigkeit in Ihrer package.jsonDatei aufzulisten.

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

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

Autoprefixer .browserslistrc

Bootstrap hängt von Autoprefixer ab, um bestimmten CSS-Eigenschaften automatisch Browserpräfixe hinzuzufügen. Präfixe werden von unserer Datei vorgegeben .browserslistrc, die sich im Stammverzeichnis des Bootstrap-Repos befindet. Das Anpassen dieser Liste von Browsern und das Neukompilieren von Sass entfernt automatisch einige CSS aus Ihrem kompilierten CSS, wenn es für diesen Browser oder diese Version eindeutige Anbieterpräfixe gibt.

Unbenutztes CSS

Hilfe für diesen Abschnitt gesucht, bitte erwägen Sie, eine PR zu eröffnen. Vielen Dank!

Obwohl wir kein vorgefertigtes Beispiel für die Verwendung von PurgeCSS mit Bootstrap haben, gibt es einige hilfreiche Artikel und exemplarische Vorgehensweisen, die die Community geschrieben hat. Hier sind einige Optionen:

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

Schließlich zeigt dieser CSS-Tricks-Artikel über ungenutztes CSS , wie man PurgeCSS und andere ähnliche Tools verwendet.

Minimieren und gzip

Komprimieren Sie nach Möglichkeit den gesamten Code, den Sie Ihren Besuchern zur Verfügung stellen. Wenn Sie Bootstrap dist-Dateien verwenden, versuchen Sie, sich an die minimierten Versionen zu halten (gekennzeichnet durch die Erweiterungen .min.cssund ). .min.jsWenn Sie Bootstrap aus der Quelle mit Ihrem eigenen Build-System erstellen, stellen Sie sicher, dass Sie Ihre eigenen Minifier für HTML, CSS und JS implementieren.

Nicht blockierende Dateien

Während das Minimieren und Verwenden der Komprimierung ausreichend erscheint, ist es auch ein großer Schritt, Ihre Website gut zu optimieren und schnell genug zu machen, wenn Sie Ihre Dateien nicht blockieren.

Wenn Sie ein Lighthouse -Plugin in Google Chrome verwenden, sind Sie möglicherweise über FCP gestolpert. Die Metrik First Contentful Paint misst die Zeit vom Beginn des Ladens der Seite bis zur Wiedergabe eines beliebigen Teils des Seiteninhalts auf dem Bildschirm.

Sie können FCP verbessern, indem Sie unkritisches JavaScript oder CSS zurückstellen. Was bedeutet das? Einfach gesagt, JavaScript oder Stylesheets, die beim ersten Malen Ihrer Seite nicht vorhanden sein müssen, sollten mit asyncoder defer-Attributen gekennzeichnet werden.

Dadurch wird sichergestellt, dass die weniger wichtigen Ressourcen später geladen werden und nicht den ersten Lack blockieren. Andererseits können kritische Ressourcen als Inline-Skripte oder -Stile eingebunden werden.

Wenn Sie mehr darüber erfahren möchten, gibt es bereits viele tolle Artikel darüber:

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

Verwenden Sie immer HTTPS

Ihre Website sollte in der Produktion nur über HTTPS-Verbindungen verfügbar sein. HTTPS verbessert die Sicherheit, den Datenschutz und die Verfügbarkeit aller Websites, und es gibt keinen unsensiblen Webverkehr . Die Schritte zum Konfigurieren Ihrer Website für die ausschließliche Bereitstellung über HTTPS sind je nach Architektur und Webhostinganbieter sehr unterschiedlich und würden daher den Rahmen dieser Dokumente sprengen.

Über HTTPS bereitgestellte Websites sollten auch über HTTPS-Verbindungen auf alle Stylesheets, Skripts und andere Assets zugreifen. Andernfalls senden Sie Benutzern gemischte aktive Inhalte , was zu potenziellen Schwachstellen führt, bei denen eine Website durch Ändern einer Abhängigkeit kompromittiert werden kann. Dies kann zu Sicherheitsproblemen und Warnungen im Browser führen, die Benutzern angezeigt werden. Unabhängig davon, ob Sie Bootstrap von einem CDN beziehen oder selbst bereitstellen, stellen Sie sicher, dass Sie nur über HTTPS-Verbindungen darauf zugreifen.