Optimalizálás

Lean Sass import

Ha a Sass-t használja az eszközfolyamatban, ügyeljen arra, hogy optimalizálja a Bootstrapet úgy, hogy csak @importa szükséges összetevőket használja. Layout & ComponentsLegnagyobb optimalizálásai valószínűleg a mi oldalunkból származnak 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";

Ha nem használ egy összetevőt, kommentálja vagy törölje teljesen. Ha például nem használja a körhinta, távolítsa el az importálást, hogy elmentsen bizonyos fájlméretet a lefordított CSS-be. Ne feledje, hogy a Sass-importálások között vannak függőségek, amelyek megnehezíthetik a fájl kihagyását.

Lean JavaScript

A Bootstrap JavaScript-je tartalmazza az elsődleges dist fájljaink minden összetevőjét ( bootstrap.jsés bootstrap.min.js), és még az elsődleges függőségünket (Popper) is a csomagfájljainkkal ( bootstrap.bundle.jsés bootstrap.bundle.min.js). Amíg a Sass-on keresztül testreszab, ne felejtse el eltávolítani a kapcsolódó JavaScriptet.

Például, ha feltételezzük, hogy saját JavaScript-csomagolóját használja, mint például a Webpack vagy a Rollup, akkor csak azt a JavaScriptet importálja, amelyet használni szeretne. Az alábbi példában megmutatjuk, hogyan kell csak belefoglalni a modális JavaScriptünket:

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

Így nem tartalmaz semmilyen JavaScriptet, amelyet nem kíván használni olyan összetevőkhöz, mint a gombok, körhinták és elemleírások. Ha legördülő listákat, eszköztippeket vagy előugró ablakokat importál, ne felejtse el felsorolni a Popper-függőséget a package.jsonfájlban.

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

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

Autoprefixer .browserslistrc

A Bootstrap attól függ, hogy az Autoprefixer automatikusan hozzáadja a böngésző előtagokat bizonyos CSS-tulajdonságokhoz. Az előtagokat a .browserslistrcfájlunk diktálja, amely a Bootstrap repo gyökerében található. A böngészők listájának testreszabása és a Sass újrafordítása automatikusan eltávolít néhány CSS-t a lefordított CSS-ből, ha az adott böngészőhöz vagy verzióhoz egyedi gyártói előtagok vannak.

Nem használt CSS

Segítséget kérünk ezzel a részleggel kapcsolatban, kérjük, fontolja meg egy PR megnyitását. Kösz!

Bár nincs előre elkészített példánk a PurgeCSS Bootstrap használatával való használatára, van néhány hasznos cikk és végigjátszás, amelyeket a közösség írt. Íme néhány lehetőség:

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

Végül ez a CSS-trükkökről szóló cikk a fel nem használt CSS- ről bemutatja a PurgeCSS és más hasonló eszközök használatát.

Minimalizálás és gzip

Amikor csak lehetséges, győződjön meg róla, hogy az összes kódot tömöríti, amelyet a látogatóinak szolgáltat. Ha Bootstrap dist fájlokat használ, próbálja meg ragaszkodni a kicsinyített verziókhoz (ezeket a .min.cssés .min.jskiterjesztések jelzik). Ha a Bootstrap-et a forrásból építi fel saját összeállítási rendszerével, feltétlenül implementálja saját minifireit a HTML-hez, CSS-hez és JS-hez.

Nem blokkoló fájlok

Bár a kicsinyítés és a tömörítés használata elegendőnek tűnhet, a fájlok blokkolásmentessé tétele szintén nagy lépés a webhely jól optimalizált és kellően gyors kialakításában.

Ha Lighthouse beépülő modult használ a Google Chrome-ban, előfordulhat, hogy belebotlott az FCP-be. A First Contentful Paint mérőszáma azt az időt méri, amely az oldal betöltésétől az oldal tartalmának bármely részének a képernyőn való megjelenítéséig eltelt.

Javíthatja az FCP-t a nem kritikus JavaScript vagy CSS elhalasztásával. Az mit jelent? Egyszerűen a JavaScriptet vagy a stíluslapokat, amelyeknek nem kell szerepelniük az oldal első festésén, asyncvagy deferattribútumokkal kell megjelölni.

Ez biztosítja, hogy a kevésbé fontos erőforrások később kerüljenek betöltésre, és ne akadályozzák az első festést. Másrészt a kritikus erőforrások soron belüli szkriptekként vagy stílusokként is szerepelhetnek.

Ha többet szeretne megtudni erről, máris rengeteg nagyszerű cikk található róla:

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

Mindig használjon HTTPS-t

Webhelye csak éles környezetben legyen elérhető HTTPS-kapcsolaton keresztül. A HTTPS javítja az összes webhely biztonságát, adatvédelmét és elérhetőségét, és nincs olyan, hogy nem érzékeny webforgalom . A webhely kizárólag HTTPS-en keresztül történő kiszolgálására vonatkozó konfigurálási lépések az architektúrától és a webtárhely-szolgáltatótól függően nagymértékben eltérőek, ezért nem tartoznak ezen dokumentumok hatálya alá.

A HTTPS-en keresztül kiszolgált webhelyeknek HTTPS-kapcsolaton keresztül is hozzá kell férniük az összes stíluslaphoz, szkripthez és egyéb eszközhöz. Ellenkező esetben vegyes aktív tartalmat fog küldeni a felhasználóknak , ami potenciális sebezhetőségekhez vezethet, ahol a függőségek megváltoztatásával feltörhetik a webhelyet. Ez biztonsági problémákhoz és a böngészőn belüli figyelmeztetésekhez vezethet a felhasználók számára. Akár CDN-ről szerzi be a Bootstrapet, akár saját maga szolgálja ki, győződjön meg arról, hogy csak HTTPS-kapcsolaton keresztül éri el.