Optimalisearje

Lean Sass ymportearret

As jo ​​​​Sass brûke yn jo assetpipeline, soargje derfoar dat jo Bootstrap optimalisearje troch allinich @importde komponinten yn te nimmen dy't jo nedich binne. Jo grutste optimisaasjes sille wierskynlik komme út 'e Layout & Componentsseksje fan ús 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";

As jo ​​​​gjin komponint brûke, kommentaar dan of wiskje it folslein. As jo ​​​​bygelyks de karrousel net brûke, ferwiderje dan dy ymport om wat bestânsgrutte op te slaan yn jo kompilearre CSS. Hâld der rekken mei dat d'r wat ôfhinklikens binne oer Sass-ymporten dy't it dreger meitsje kinne om in bestân oer te litten.

Lean JavaScript

Bootstrap's JavaScript omfettet elke komponint yn ús primêre dist-bestannen ( bootstrap.jsen bootstrap.min.js), en sels ús primêre ôfhinklikens (Popper) mei ús bondelbestannen ( bootstrap.bundle.jsen bootstrap.bundle.min.js). Wylst jo oanpasse fia Sass, wês wis dat jo relatearre JavaScript fuortsmite.

As jo ​​​​bygelyks oannimme dat jo jo eigen JavaScript-bundler brûke lykas Webpack of Rollup, ymportearje jo allinich it JavaScript dat jo fan plan binne te brûken. Yn it foarbyld hjirûnder litte wy sjen hoe't jo gewoan ús modale JavaScript opnimme kinne:

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

Op dizze manier befetsje jo gjin JavaScript op dat jo net fan doel binne te brûken foar komponinten lykas knoppen, karrousels en tooltips. As jo ​​dropdowns, tooltips of popovers ymportearje, wês dan wis dat jo de Popper-ôfhinklikens yn jo package.jsonbestân listje.

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

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

Autoprefixer .browserslistrc

Bootstrap hinget ôf fan Autoprefixer om automatysk browserfoarheaksels ta te foegjen oan bepaalde CSS-eigenskippen. Foarheaksels wurde diktearre troch ús .browserslistrcbestân, fûn yn 'e root fan' e Bootstrap-repo. It oanpassen fan dizze list fan browsers en it opnij kompilearjen fan de Sass sil automatysk guon CSS fuortsmite fan jo kompilearre CSS, as d'r foarheaksels binne unyk foar dy browser of ferzje.

Net brûkte CSS

Help woe mei dizze seksje, beskôgje asjebleaft it iepenjen fan in PR. Tank!

Wylst wy gjin foarboud foarbyld hawwe foar it brûken fan PurgeCSS mei Bootstrap, binne d'r wat nuttige artikels en walkthroughs dy't de mienskip hat skreaun. Hjir binne wat opsjes:

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

As lêste, dit CSS Tricks-artikel oer net brûkte CSS lit sjen hoe't jo PurgeCSS en oare ferlykbere ark brûke kinne.

Fergrutsje en gzip

As it mooglik is, wês wis dat jo alle koade komprimearje dy't jo oan jo besikers tsjinje. As jo ​​​​Bootstrap dist-bestannen brûke, besykje dan te bliuwen by de minifisearre ferzjes (oanjûn troch de .min.cssen .min.jstafoegings). As jo ​​​​Bootstrap bouwe fanút de boarne mei jo eigen buildsysteem, wês dan wis dat jo jo eigen minifiers ymplementearje foar HTML, CSS en JS.

Net-blokkearjende bestannen

Wylst it minifysjen en it brûken fan kompresje as genôch liket, is it meitsjen fan jo bestannen net-blokkearjende ek in grutte stap yn it meitsjen fan jo side goed optimalisearre en rap genôch.

As jo ​​​​in Lighthouse- plugin brûke yn Google Chrome, binne jo miskien oer FCP stroffele. De Metryske First Contentful Paint mjit de tiid fanôf it begjin fan it laden fan 'e side oant ien diel fan' e ynhâld fan 'e side wurdt werjûn op it skerm.

Jo kinne FCP ferbetterje troch net-kritysk JavaScript of CSS út te stellen. Wat betsjut dat? Gewoanwei, JavaScript of stylblêden dy't net oanwêzich hoege te wêzen op 'e earste ferve fan jo side moatte wurde markearre mei asyncof deferattributen.

Dit soarget derfoar dat de minder wichtige middels wurde laden letter en net blokkearje de earste ferve. Oan 'e oare kant kinne krityske boarnen wurde opnommen as ynline skripts as stilen.

As jo ​​hjir mear oer leare wolle, binne d'r al in protte geweldige artikels oer:

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

Brûk altyd HTTPS

Jo webside moat allinich beskikber wêze oer HTTPS-ferbiningen yn produksje. HTTPS ferbetteret de feiligens, privacy en beskikberens fan alle siden, en d'r is net sa'n ding as net-gefoelige webferkear . De stappen om jo webside te konfigurearjen om eksklusyf te tsjinjen fia HTTPS fariearje breed ôfhinklik fan jo arsjitektuer en webhostingprovider, en lizze dus bûten it berik fan dizze dokuminten.

Siden dy't wurde tsjinne oer HTTPS moatte ek tagong krije ta alle stylblêden, skripts en oare aktiva fia HTTPS-ferbiningen. Oars sille jo brûkers mingde aktive ynhâld stjoere , wat liedt ta potinsjele kwetsberens wêr't in side kin wurde kompromittearre troch it feroarjen fan in ôfhinklikens. Dit kin liede ta feiligensproblemen en warskôgingen yn 'e browser werjûn oan brûkers. Oft jo Bootstrap krije fan in CDN of it sels tsjinje, soargje derfoar dat jo it allinich tagong krije fia HTTPS-ferbiningen.