Optimer

Lean Sass importerer

Når du bruger Sass i din aktivpipeline, skal du sørge for at optimere Bootstrap ved kun @importat indsætte de komponenter, du har brug for. Dine største optimeringer vil sandsynligvis komme fra Layout & Componentssektionen af ​​vores 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";

Hvis du ikke bruger en komponent, skal du kommentere den eller slette den helt. For eksempel, hvis du ikke bruger karrusellen, skal du fjerne den import for at gemme en filstørrelse i din kompilerede CSS. Husk, at der er nogle afhængigheder på tværs af Sass-importer, der kan gøre det sværere at udelade en fil.

Lean JavaScript

Bootstraps JavaScript inkluderer hver komponent i vores primære dist-filer ( bootstrap.jsog bootstrap.min.js), og endda vores primære afhængighed (Popper) med vores bundle-filer ( bootstrap.bundle.jsog bootstrap.bundle.min.js). Mens du tilpasser via Sass, skal du sørge for at fjerne relateret JavaScript.

Hvis du for eksempel antager, at du bruger din egen JavaScript-bundler som Webpack eller Rollup, vil du kun importere det JavaScript, du planlægger at bruge. I eksemplet nedenfor viser vi, hvordan du blot inkluderer vores modale 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

På denne måde inkluderer du ikke noget JavaScript, du ikke har tænkt dig at bruge til komponenter som knapper, karruseller og værktøjstip. Hvis du importerer dropdowns, værktøjstip eller popovers, skal du sørge for at angive Popper-afhængigheden i din package.jsonfil.

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

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

Autoprefixer .browserslistrc

Bootstrap afhænger af Autoprefixer for automatisk at tilføje browserpræfikser til visse CSS-egenskaber. Præfikser er dikteret af vores .browserslistrcfil, der findes i roden af ​​Bootstrap-repoen. Tilpasning af denne liste over browsere og genkompilering af Sass vil automatisk fjerne nogle CSS fra din kompilerede CSS, hvis der er leverandørpræfikser, der er unikke for den browser eller version.

Ubrugt CSS

Hjælp efterlyses med dette afsnit. Overvej venligst at åbne en PR. Tak!

Selvom vi ikke har et forudbygget eksempel på brug af PurgeCSS med Bootstrap, er der nogle nyttige artikler og gennemgange, som fællesskabet har skrevet. Her er nogle muligheder:

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

Til sidst viser denne CSS Tricks-artikel om ubrugt CSS , hvordan man bruger PurgeCSS og andre lignende værktøjer.

Formindsk og gzip

Når det er muligt, skal du sørge for at komprimere al den kode, du viser til dine besøgende. Hvis du bruger Bootstrap dist-filer, så prøv at holde dig til de minificerede versioner (angivet med udvidelserne .min.cssog ). .min.jsHvis du bygger Bootstrap fra kilden med dit eget byggesystem, skal du sørge for at implementere dine egne minifiers til HTML, CSS og JS.

Ikke-blokerende filer

Selvom minificering og brug af komprimering kan virke som nok, er det at gøre dine filer til ikke-blokerende filer også et stort skridt i at gøre dit websted veloptimeret og hurtigt nok.

Hvis du bruger et Lighthouse -plugin i Google Chrome, er du muligvis faldet over FCP. Metric'en First Contentful Paint måler tiden, fra siden begynder at indlæses, til en del af sidens indhold gengives på skærmen.

Du kan forbedre FCP ved at udsætte ikke-kritisk JavaScript eller CSS. Hvad betyder det? Simpelthen skal JavaScript eller stylesheets, der ikke behøver at være til stede på den første maling af din side, være markeret med asynceller deferattributter.

Dette sikrer, at de mindre vigtige ressourcer indlæses senere og ikke blokerer for den første maling. På den anden side kan kritiske ressourcer inkluderes som inline scripts eller stilarter.

Hvis du vil lære mere om dette, er der allerede en masse gode artikler om det:

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

Brug altid HTTPS

Dit websted bør kun være tilgængeligt via HTTPS-forbindelser i produktion. HTTPS forbedrer sikkerheden, privatlivets fred og tilgængeligheden af ​​alle websteder, og der er ikke sådan noget som ikke-følsom webtrafik . Trinnene til at konfigurere dit websted til udelukkende at blive serveret over HTTPS varierer meget afhængigt af din arkitektur og din webhostingudbyder og er derfor uden for rammerne af disse dokumenter.

Websteder, der serveres via HTTPS, bør også få adgang til alle stylesheets, scripts og andre aktiver via HTTPS-forbindelser. Ellers vil du sende brugerne blandet aktivt indhold , hvilket fører til potentielle sårbarheder, hvor et websted kan blive kompromitteret ved at ændre en afhængighed. Dette kan føre til sikkerhedsproblemer og advarsler i browseren, der vises til brugerne. Uanset om du får Bootstrap fra et CDN eller serverer det selv, skal du sikre dig, at du kun får adgang til det via HTTPS-forbindelser.