Inganta

Lean Sass shigo da kaya

Lokacin amfani da Sass a cikin bututun kadari, tabbatar cewa kun inganta Bootstrap ta hanyar @importhaɗa abubuwan da kuke buƙata kawai. Wataƙila mafi girman haɓakar ku zai fito daga Layout & Componentssashin namu 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";

Idan ba ka amfani da wani bangaren, yi sharhi ko share shi gaba daya. Misali, idan ba ka amfani da carousel, cire shigo da shi don adana wasu girman fayil a cikin CSS ɗinka da aka haɗa. Ka tuna cewa akwai wasu abubuwan dogaro a cikin sayayyar Sass waɗanda zasu iya sa ya fi wahala cire fayil.

Lean JavaScript

Bootstrap's JavaScript ya haɗa da kowane bangare a cikin fayilolinmu na farko ( bootstrap.jsda bootstrap.min.js), har ma da tushen mu na farko (Popper) tare da fayilolin mu ( bootstrap.bundle.jsda bootstrap.bundle.min.js). Yayin da kake keɓancewa ta hanyar Sass, tabbatar da cire JavaScript mai alaƙa.

Misali, ɗaukan cewa kuna amfani da bundler ɗin ku na JavaScript kamar Webpack, Parcel, ko Vite, kawai za ku shigo da JavaScript ɗin da kuke shirin amfani da shi. A cikin misalin da ke ƙasa, muna nuna yadda ake haɗa JavaScript ɗin mu kawai:

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

Ta wannan hanyar, ba za ku haɗa da kowane JavaScript da ba ku da niyyar amfani da shi don abubuwan haɗin gwiwa kamar maɓalli, carousels, da tukwici na kayan aiki. Idan kana shigo da zazzage-zage, kayan aikin kayan aiki ko popovers, tabbatar da lissafin dogaron Popper a cikin package.jsonfayil ɗin ku.

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

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

Autoprefixer .browslistrc

Bootstrap ya dogara da Autoprefixer don ƙara prefixes ta atomatik zuwa wasu kaddarorin CSS. Fayil ɗinmu ne ke ba da bayanin prefixes .browserslistrc, wanda aka samo a tushen Bootstrap repo. Ƙirƙirar wannan jerin masu bincike da sake haɗa Sass zai cire wasu CSS ta atomatik daga CSS ɗinku da aka haɗa, idan akwai prefixes na masu siyarwa na musamman ga wannan mai bincike ko sigar.

CSS mara amfani

Taimakon da ake so da wannan sashe, da fatan za a yi la'akari da buɗe PR. Godiya!

Duk da yake ba mu da wani misali da aka riga aka gina don amfani da PurgeCSS tare da Bootstrap, akwai wasu labarai masu taimako da hanyoyin tafiya waɗanda al'umma suka rubuta. Ga wasu zaɓuɓɓuka:

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

A ƙarshe, wannan labarin Dabarun CSS akan CSS da ba a yi amfani da shi yana nuna yadda ake amfani da PurgeCSS da sauran kayan aikin makamancin haka.

Minify da gzip

A duk lokacin da zai yiwu, tabbatar da damfara duk lambar da kuke yiwa maziyartan ku hidima. Idan kuna amfani da fayilolin Bootstrap dist, gwada manne wa ƙananan juzu'in (wanda aka nuna .min.cssda .min.jskari). Idan kuna gina Bootstrap daga tushen tare da tsarin ginin ku, ku tabbata kun aiwatar da na'urorin ku don HTML, CSS, da JS.

Fayiloli marasa toshewa

Duk da yake ragewa da amfani da matsawa na iya zama kamar isa, sanya fayilolinku waɗanda ba su toshe su kuma babban mataki ne na inganta rukunin yanar gizonku da sauri sosai.

Idan kuna amfani da kayan aikin Haske a cikin Google Chrome, ƙila kun yi tuntuɓe akan FCP. Ma'aunin Fenti Mai Ciki na Farko yana auna lokacin daga lokacin da shafin ya fara lodi zuwa lokacin da aka sanya kowane ɓangaren abubuwan shafin akan allon.

Kuna iya inganta FCP ta hanyar jinkirta JavaScript mara mahimmanci ko CSS. Menene ma'anar hakan? A taƙaice, JavaScript ko salon zanen da ba sa buƙatar kasancewa a kan fenti na farko na shafinku ya kamata a yi masa alama asyncko deferhalaye.

Wannan yana tabbatar da cewa an ɗora kayan albarkatun da ba su da mahimmanci daga baya kuma ba tare da toshe fenti na farko ba. A gefe guda, ana iya haɗa albarkatu masu mahimmanci azaman rubutun layi ko salo.

Idan kuna son ƙarin koyo game da wannan, an riga an sami manyan labarai da yawa game da shi:

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

Yi amfani da HTTPS koyaushe

Gidan yanar gizon ku yakamata ya kasance akan haɗin HTTPS kawai a samarwa. HTTPS yana inganta tsaro, keɓantawa, da wadatar duk shafuka, kuma babu wani abu kamar zirga-zirgar gidan yanar gizo mara hankali . Matakan don saita gidan yanar gizon ku da za'a yi amfani da su kawai akan HTTPS sun bambanta sosai dangane da gine-ginenku da mai ba da sabis na yanar gizo, don haka sun wuce iyakar waɗannan takaddun.

Shafukan da aka yi amfani da su akan HTTPS suma yakamata su sami damar duk takaddun salo, rubutun rubutu, da sauran kadarorin akan haɗin HTTPS. In ba haka ba, za ku aika masu amfani gauraye abun ciki mai aiki , yana haifar da yuwuwar lahani inda za a iya lalata rukunin yanar gizon ta hanyar canza abin dogaro. Wannan na iya haifar da lamuran tsaro da faɗakarwar mai binciken da aka nuna ga masu amfani. Ko kuna samun Bootstrap daga CDN ko kuma ku bauta masa da kanku, tabbatar da cewa kuna samun dama ta hanyar haɗin HTTPS kawai.