Optimalizálás
Tartsa projektjeit karcsú, érzékeny és karbantartható formában, hogy a legjobb élményt nyújthassa, és a fontosabb munkákra összpontosíthasson.
Lean Sass import
Ha a Sass-t használja az eszközfolyamatban, ügyeljen arra, hogy optimalizálja a Bootstrapet úgy, hogy csak @import
a szükséges összetevőket használja. Layout & Components
Legnagyobb 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";
@import "placeholders";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
Ha nem használ egy összetevőt, kommentálja vagy törölje teljesen. Például, ha 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/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';
Így nem tartalmaz olyan 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.json
fájlban.
Alapértelmezett exportálás
A fájlok bootstrap/js/dist
az alapértelmezett exportálást használják , tehát ha valamelyiket szeretné használni, akkor a következőket kell tennie:
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 .browserslistrc
fá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, mindenképpen tömörítse az összes kódot, amelyet a látogatóinak kiszolgál. Ha Bootstrap dist fájlokat használ, próbálja meg ragaszkodni a kicsinyített verziókhoz (ezeket a .min.css
és .min.js
kiterjeszté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, async
vagy defer
attribú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:
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ás lépései az architektúrától és a webtárhely-szolgáltatótól függően nagymértékben eltérnek, így 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.