Optimizatu

Lean Sass inportazioak

Sass zure aktibo kanalizazioan erabiltzen duzunean, ziurtatu Bootstrap optimizatzen @importduzula behar dituzun osagaiak soilik erabiliz. Layout & ComponentsZure optimizazio handienak gure ataletik etorriko dira ziurrenik bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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";

Osagai bat erabiltzen ari ez bazara, iruzkin ezazu edo ezabatu guztiz. Adibidez, karrusela erabiltzen ari ez bazara, kendu inportazio hori fitxategiaren tamainaren bat gordetzeko konpilatutako CSSan. Kontuan izan Sass-en inportazioetan hainbat mendekotasun daudela, fitxategi bat baztertzea zailagoa izan daitekeela.

Lean JavaScript

Bootstrap-en JavaScript-ek osagai guztiak biltzen ditu gure dist fitxategi nagusietan ( bootstrap.jseta bootstrap.min.js), eta baita gure menpekotasun nagusia (Popper) gure sorta-fitxategiekin ( bootstrap.bundle.jseta bootstrap.bundle.min.js). Sass bidez pertsonalizatzen ari zaren bitartean, ziurtatu erlazionatutako JavaScript kentzen duzula.

Esate baterako, Webpack, Parcel edo Vite bezalako zure JavaScript sorta erabiltzen ari zarela suposatuz, erabili nahi duzun JavaScript-a soilik inportatuko zenuke. Beheko adibidean, gure JavaScript modala nola sartzen den erakusten dugu:

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

Horrela, ez duzu erabili asmorik ez duzun JavaScriptrik sartuko botoiak, karruselak eta argibideak bezalako osagaietarako. Goitibeherak, tresna-aholkuak edo popover-ak inportatzen ari bazara, ziurtatu Popperren menpekotasuna zure package.jsonfitxategian zerrendatzen duzula.

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

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

Autoaurrizkia .browserslistrc

Bootstrap Autoprefixer-en araberakoa da arakatzailearen aurrizkiak CSS propietate jakin batzuei automatikoki gehitzeko. Aurrizkiak gure .browserslistrcfitxategiak agintzen ditu, Bootstrap repo-ren erroan aurkitzen dena. Arakatzaileen zerrenda hau pertsonalizatzeak eta Sass birkonpilatzeak CSS batzuk automatikoki kenduko ditu konpilatutako CSStik, arakatzaile edo bertsio horretarako saltzaileen aurrizkiak badaude.

Erabili gabeko CSS

Laguntza nahi duzun atal honekin, kontuan hartu PR bat irekitzea. Eskerrik asko!

Bootstrap-ekin PurgeCSS erabiltzeko aurrez eraikitako adibiderik ez dugun arren , komunitateak idatzitako artikulu eta ibilbide lagungarri batzuk daude. Hona hemen aukera batzuk:

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

Azkenik, erabili gabeko CSSari buruzko CSS Tricks artikulu honek PurgeCSS eta antzeko beste tresna batzuk nola erabili erakusten du.

Txikitu eta gzip

Ahal den guztietan, ziurtatu bisitariei zerbitzatzen diezun kode guztia konprimitzen duzula. Bootstrap dist fitxategiak erabiltzen ari bazara, saiatu txikitutako bertsioak mantentzen ( .min.csseta .min.jsluzapenek adierazita). Bootstrap iturburutik eraikitzen ari bazara zure eraikuntza-sistemarekin, ziurtatu HTML, CSS eta JS-rako zure minifikatzaileak ezartzen dituzula.

Blokeatzen ez diren fitxategiak

Txikitzea eta konpresioa erabiltzea nahikoa dirudien arren, zure fitxategiak blokeatzen ez dituztenak egitea ere urrats handia da zure webgunea ondo optimizatuta eta nahikoa azkarra izan dadin.

Google Chrome-n Lighthouse plugin bat erabiltzen ari bazara , baliteke FCPrekin topo egin izana. First Contentful Paint metrikak orria kargatzen hasten denetik orriaren edukiaren edozein zati pantailan errendatzen den arte neurtzen du.

FCP hobe dezakezu JavaScript edo CSS ez-kritikoak atzeratuz. Zer esan nahi du horrek? Besterik gabe, zure orriaren lehen margoan egon behar ez duten JavaScript edo estilo-orriek asyncedo deferatributuekin markatu behar dute.

Horrek bermatzen du hain garrantzitsuak ez diren baliabideak geroago kargatzen direla eta ez dutela lehen pintura blokeatzen. Bestalde, baliabide kritikoak lineako script edo estilo gisa sar daitezke.

Honi buruz gehiago jakin nahi baduzu, dagoeneko artikulu bikain asko daude horri buruz:

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

Erabili beti HTTPS

Zure webguneak HTTPS konexioen bidez soilik egon beharko luke erabilgarri ekoizpenean. HTTPS-k gune guztien segurtasuna, pribatutasuna eta erabilgarritasuna hobetzen ditu, eta ez dago web trafiko ez-sentikorra bezalakorik . Zure webgunea HTTPS bidez soilik zerbitzatzeko konfiguratzeko urratsak asko aldatzen dira zure arkitekturaren eta web-ostalaritza-hornitzailearen arabera, eta, beraz, dokumentu hauen esparrutik kanpo daude.

HTTPS bidez hornitutako guneek HTTPS konexioen bidez estilo-orri, script eta bestelako aktibo guztiak ere atzitu behar dituzte. Bestela, erabiltzaileei eduki aktibo mistoa bidaliko diezu, menpekotasun bat aldatuz gune bat arriskuan jar daitekeen ahultasun potentzialak eraginez. Horrek segurtasun arazoak eta arakatzailearen barneko abisuak ekar ditzake erabiltzaileei. Bootstrap CDN batetik lortzen ari zaren edo zuk zeuk zerbitzatzen ari zaren, ziurtatu HTTPS konexioen bidez soilik sartzen zarela.