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 "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";

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 oder Rollup, 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/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, müssen Sie die Popper-Abhängigkeit in Ihrer package.jsonDatei auflisten.

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, einen 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, 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

Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.