Optimaliseren

Lean Sass-import

Wanneer u Sass in uw activapijplijn gebruikt, moet u ervoor zorgen dat u Bootstrap optimaliseert door alleen @importde componenten te gebruiken die u nodig hebt. Uw grootste optimalisaties komen waarschijnlijk uit het Layout & Componentsgedeelte van onze 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";

Als u een onderdeel niet gebruikt, kunt u er commentaar op geven of het geheel verwijderen. Als u bijvoorbeeld de carrousel niet gebruikt, verwijdert u die import om een ​​bepaalde bestandsgrootte op te slaan in uw gecompileerde CSS. Houd er rekening mee dat er enkele afhankelijkheden zijn tussen Sass-imports die het moeilijker kunnen maken om een ​​bestand weg te laten.

Lean JavaScript

JavaScript van Bootstrap bevat elk onderdeel in onze primaire dist-bestanden ( bootstrap.jsen bootstrap.min.js), en zelfs onze primaire afhankelijkheid (Popper) met onze bundelbestanden ( bootstrap.bundle.jsen bootstrap.bundle.min.js). Zorg er tijdens het aanpassen via Sass voor dat u het bijbehorende JavaScript verwijdert.

Als u er bijvoorbeeld van uitgaat dat u uw eigen JavaScript-bundelprogramma zoals Webpack of Rollup gebruikt, importeert u alleen het JavaScript dat u van plan bent te gebruiken. In het onderstaande voorbeeld laten we zien hoe u ons modale JavaScript kunt opnemen:

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

Op deze manier neemt u geen JavaScript op dat u niet van plan bent te gebruiken voor componenten zoals knoppen, carrousels en tooltips. Als je dropdowns, tooltips of popovers importeert, zorg er dan voor dat je de Popper-afhankelijkheid in je package.jsonbestand vermeldt.

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

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

Autoprefixer .browserslistrc

Bootstrap is afhankelijk van Autoprefixer om automatisch browservoorvoegsels toe te voegen aan bepaalde CSS-eigenschappen. Voorvoegsels worden bepaald door ons .browserslistrcbestand, te vinden in de hoofdmap van de Bootstrap-repo. Door deze lijst met browsers aan te passen en de Sass opnieuw te compileren, wordt automatisch wat CSS uit uw gecompileerde CSS verwijderd, als er leveranciersvoorvoegsels zijn die uniek zijn voor die browser of versie.

Ongebruikte CSS

Hulp gezocht bij deze sectie, overweeg om een ​​PR te openen. Bedankt!

Hoewel we geen vooraf gebouwd voorbeeld hebben voor het gebruik van PurgeCSS met Bootstrap, zijn er enkele nuttige artikelen en walkthroughs die de community heeft geschreven. Hier zijn enkele opties:

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

Ten slotte laat dit CSS-trucs-artikel over ongebruikte CSS zien hoe u PurgeCSS en andere vergelijkbare tools kunt gebruiken.

Verkleinen en gzip

Zorg er waar mogelijk voor dat u alle code die u aan uw bezoekers aanbiedt, comprimeert. Als je Bootstrap dist-bestanden gebruikt, probeer je dan aan de verkleinde versies te houden (aangegeven door de .min.cssen .min.jsextensies). Als je Bootstrap vanaf de bron bouwt met je eigen bouwsysteem, zorg er dan voor dat je je eigen minifiers voor HTML, CSS en JS implementeert.

Niet-blokkerende bestanden

Hoewel verkleinen en compressie gebruiken misschien voldoende lijkt, is het niet-blokkeren van uw bestanden ook een grote stap om uw site goed geoptimaliseerd en snel genoeg te maken.

Als u een Lighthouse -plug-in in Google Chrome gebruikt, bent u mogelijk over FCP gestruikeld. De metriek First Contentful Paint meet de tijd vanaf het moment dat de pagina begint te laden tot het moment waarop een deel van de inhoud van de pagina op het scherm wordt weergegeven.

U kunt FCP verbeteren door niet-kritieke JavaScript of CSS uit te stellen. Wat betekent dat? Simpel gezegd, JavaScript of stylesheets die niet aanwezig hoeven te zijn op de eerste verf van uw pagina, moeten worden gemarkeerd met asyncof deferattributen.

Dit zorgt ervoor dat de minder belangrijke middelen later worden geladen en de eerste verf niet blokkeert. Aan de andere kant kunnen kritieke bronnen worden opgenomen als inline scripts of stijlen.

Als je hier meer over wilt weten, zijn er al veel geweldige artikelen over:

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

Altijd HTTPS gebruiken

Uw website zou alleen beschikbaar moeten zijn via HTTPS-verbindingen in productie. HTTPS verbetert de beveiliging, privacy en beschikbaarheid van alle sites, en niet-gevoelig webverkeer bestaat niet . De stappen om uw website te configureren om uitsluitend via HTTPS te worden bediend, variëren sterk, afhankelijk van uw architectuur en webhostingprovider, en vallen dus buiten het bestek van deze documenten.

Sites die via HTTPS worden aangeboden, moeten ook toegang hebben tot alle stylesheets, scripts en andere middelen via HTTPS-verbindingen. Anders stuurt u gebruikers gemengde actieve inhoud , wat leidt tot potentiële kwetsbaarheden waarbij een site kan worden gecompromitteerd door een afhankelijkheid te wijzigen. Dit kan leiden tot beveiligingsproblemen en waarschuwingen in de browser die aan gebruikers worden weergegeven. Of je Bootstrap nu van een CDN haalt of het zelf bedient, zorg ervoor dat je het alleen opent via HTTPS-verbindingen.