Optimumigu

Lean Sass-importaĵoj

Kiam vi uzas Sass en via valoraĵo, certigu, ke vi optimumigas Bootstrap nur per @importla komponantoj, kiujn vi bezonas. Viaj plej grandaj optimumigoj verŝajne venos de la Layout & Componentssekcio de nia 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";

Se vi ne uzas komponanton, komentu ĝin aŭ forigu ĝin tute. Ekzemple, se vi ne uzas la karuselon, forigu tiun importon por konservi iun dosiergrandecon en via kompilita CSS. Memoru, ke ekzistas iuj dependecoj tra Sass-importado, kiuj povas malfaciligi preterlasi dosieron.

Malgrasa JavaScript

La JavaScript de Bootstrap inkluzivas ĉiun komponanton en niaj ĉefaj dist-dosieroj ( bootstrap.jskaj bootstrap.min.js), kaj eĉ nian ĉefan dependecon (Popper) kun niaj pakdosieroj ( bootstrap.bundle.jskaj bootstrap.bundle.min.js). Dum vi agordas per Sass, nepre forigi rilatan JavaScript.

Ekzemple, supozante, ke vi uzas vian propran JavaScript-bundilon kiel Webpack, Parcel aŭ Vite, vi nur importus la JavaScript kiun vi planas uzi. En la malsupra ekzemplo, ni montras kiel nur inkluzivi nian modalan 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/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';

Tiel vi ne inkluzivas JavaScript, kiun vi ne intencas uzi por komponantoj kiel butonoj, karuseloj kaj konsiletoj. Se vi importas falmenuojn, konsiletojn aŭ popovers, nepre listigu la Popper-dependecon en via package.jsondosiero.

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

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

Aŭtomata prefiksilo .browserslistrc

Bootstrap dependas de Aŭtomata prefiksilo por aŭtomate aldoni retumilajn prefiksojn al iuj CSS-ecoj. Prefiksoj estas diktitaj de nia .browserslistrcdosiero, trovita en la radiko de la deponejo Bootstrap. Agordi ĉi tiun liston de retumiloj kaj rekompili la Sass aŭtomate forigos iujn CSS de via kompilita CSS, se ekzistas vendistaj prefiksoj unikaj al tiu retumilo aŭ versio.

Neuzata CSS

Helpo bezonata kun ĉi tiu sekcio, bonvolu konsideri malfermi PR. Dankon!

Kvankam ni ne havas antaŭkonstruitan ekzemplon por uzi PurgeCSS kun Bootstrap, ekzistas kelkaj helpemaj artikoloj kaj promenoj kiujn la komunumo skribis. Jen kelkaj opcioj:

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

Finfine, ĉi tiu artikolo pri CSS-Trukoj pri neuzata CSS montras kiel uzi PurgeCSS kaj aliajn similajn ilojn.

Minigi kaj gzip

Kiam ajn eblas, nepre kunpremu la tutan kodon, kiun vi servas al viaj vizitantoj. Se vi uzas Bootstrap dist-dosierojn, provu resti al la malgrandigitaj versioj (indikitaj per la .min.csskaj .min.jsetendoj). Se vi konstruas Bootstrap de la fonto per via propra konstrusistemo, nepre efektivigu viajn proprajn minigilojn por HTML, CSS kaj JS.

Ne-blokaj dosieroj

Dum minimumigi kaj uzi kunpremadon eble ŝajnas sufiĉe, fari viajn dosierojn ne-blokantaj estas ankaŭ granda paŝo por fari vian retejon bone optimumigita kaj sufiĉe rapida.

Se vi uzas Lighthouse- kromaĵon en Google Chrome, vi eble trafis FCP. La First Contentful Paint- metriko mezuras la tempon de kiam la paĝo komencas ŝargi ĝis kiam iu parto de la enhavo de la paĝo estas prezentita sur la ekrano.

Vi povas plibonigi FCP prokrastante ne-kritikajn JavaScript aŭ CSS. Kion tio signifas? Simple, JavaScript aŭ stilfolioj, kiuj ne bezonas ĉeesti sur la unua farbo de via paĝo, estu markitaj per asyncaŭ deferatributoj.

Ĉi tio certigas, ke la malpli gravaj rimedoj estas ŝarĝitaj poste kaj ne blokante la unuan farbon. Aliflanke, kritikaj rimedoj povas esti inkluditaj kiel enliniaj skriptoj aŭ stiloj.

Se vi volas lerni pli pri tio, jam ekzistas multaj bonegaj artikoloj pri ĝi:

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

Ĉiam uzu HTTPS

Via retejo devus esti disponebla nur per HTTPS-konektoj en produktado. HTTPS plibonigas la sekurecon, privatecon kaj haveblecon de ĉiuj retejoj, kaj ne ekzistas tia afero kiel nesentema rettrafiko . La paŝoj por agordi vian retejon por esti servata ekskluzive per HTTPS multe varias depende de via arkitekturo kaj retprovizanto, kaj tiel estas ekster la amplekso de ĉi tiuj dokumentoj.

Retejoj servitaj per HTTPS ankaŭ devus aliri ĉiujn stilfoliojn, skriptojn kaj aliajn valoraĵojn per HTTPS-konektoj. Alie, vi sendos al uzantoj miksitan aktivan enhavon , kondukante al eblaj vundeblecoj kie retejo povas esti endanĝerigita ŝanĝante dependecon. Ĉi tio povas konduki al sekurecaj problemoj kaj avertoj en la retumilo montritaj al uzantoj. Ĉu vi ricevas Bootstrap de CDN aŭ vi mem servas ĝin, certigu, ke vi aliras ĝin nur per HTTPS-konektoj.