Optimera

Lean Sass importerar

När du använder Sass i din tillgångspipeline, se till att du optimerar Bootstrap genom att bara @importanvända de komponenter du behöver. Dina största optimeringar kommer sannolikt från Layout & Componentsavsnittet i vår 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";

Om du inte använder en komponent, kommentera den eller ta bort den helt. Om du till exempel inte använder karusellen, ta bort den importen för att spara en viss filstorlek i din kompilerade CSS. Tänk på att det finns vissa beroenden mellan Sass-importer som kan göra det svårare att utelämna en fil.

Lean JavaScript

Bootstraps JavaScript inkluderar varje komponent i våra primära dist-filer ( bootstrap.jsoch bootstrap.min.js), och till och med vårt primära beroende (Popper) med våra paketfiler ( bootstrap.bundle.jsoch bootstrap.bundle.min.js). När du anpassar dig via Sass, se till att ta bort relaterat JavaScript.

Om du till exempel antar att du använder ditt eget JavaScript-paket, som Webpack eller Rollup, skulle du bara importera det JavaScript du planerar att använda. I exemplet nedan visar vi hur du bara inkluderar vår modala JavaScript:

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

På så sätt inkluderar du inte JavaScript som du inte tänker använda för komponenter som knappar, karuseller och verktygstips. Om du importerar rullgardinsmenyer, verktygstips eller popovers, se till att lista Popper-beroendet i din package.jsonfil.

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

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

Autoprefixer .browserslistrc

Bootstrap är beroende av Autoprefixer för att automatiskt lägga till webbläsarprefix till vissa CSS-egenskaper. Prefix dikteras av vår .browserslistrcfil, som finns i roten av Bootstrap-repo. Om du anpassar den här listan över webbläsare och kompilerar om Sass kommer vissa CSS automatiskt att tas bort från din kompilerade CSS, om det finns leverantörsprefix som är unika för den webbläsaren eller versionen.

Oanvänd CSS

Hjälp önskas med detta avsnitt, överväg att öppna en PR. Tack!

Även om vi inte har ett förbyggt exempel för att använda PurgeCSS med Bootstrap, finns det några användbara artiklar och genomgångar som communityn har skrivit. Här är några alternativ:

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

Slutligen visar denna CSS Tricks-artikel om oanvänd CSS hur man använder PurgeCSS och andra liknande verktyg.

Minifiera och gzip

När det är möjligt, se till att komprimera all kod du visar till dina besökare. Om du använder Bootstrap dist-filer, försök att hålla dig till de minifierade versionerna (anges av tilläggen .min.cssoch ). .min.jsOm du bygger Bootstrap från källan med ditt eget byggsystem, se till att implementera dina egna minifierare för HTML, CSS och JS.

Icke-blockerande filer

Även om minifiering och användning av komprimering kan tyckas vara tillräckligt, är att göra dina filer icke-blockerande sådana också ett stort steg för att göra din webbplats väloptimerad och tillräckligt snabb.

Om du använder ett Lighthouse -plugin i Google Chrome kan du ha snubblat över FCP. Mätvärdet First Contentful Paint mäter tiden från det att sidan börjar laddas tills någon del av sidans innehåll renderas på skärmen.

Du kan förbättra FCP genom att skjuta upp icke-kritisk JavaScript eller CSS. Vad betyder det? Helt enkelt, JavaScript eller stilmallar som inte behöver finnas på den första färgen på din sida ska markeras med asynceller deferattribut.

Detta säkerställer att de mindre viktiga resurserna laddas senare och inte blockerar den första färgen. Å andra sidan kan kritiska resurser inkluderas som inline-skript eller stilar.

Om du vill lära dig mer om detta finns det redan många bra artiklar om det:

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

Använd alltid HTTPS

Din webbplats ska endast vara tillgänglig via HTTPS-anslutningar i produktion. HTTPS förbättrar säkerheten, integriteten och tillgängligheten för alla webbplatser, och det finns inget sådant som okänslig webbtrafik . Stegen för att konfigurera din webbplats så att den endast serveras över HTTPS varierar mycket beroende på din arkitektur och webbhotellleverantör, och ligger därför utanför ramen för dessa dokument.

Webbplatser som serveras över HTTPS bör också komma åt alla stilmallar, skript och andra tillgångar via HTTPS-anslutningar. Annars kommer du att skicka blandat aktivt innehåll till användarna , vilket leder till potentiella sårbarheter där en webbplats kan äventyras genom att ändra ett beroende. Detta kan leda till säkerhetsproblem och varningar i webbläsaren som visas för användare. Oavsett om du skaffar Bootstrap från ett CDN eller serverar det själv, se till att du bara kommer åt det via HTTPS-anslutningar.