Optimize di tin dɛn we de apin

Kip yu prɔjek dɛm slim, rispɔnsiv, ɛn mentenɛns so dat yu go ebul fɔ gi di bɛst ɛkspiriɛns ɛn pe atɛnshɔn pan mɔ impɔtant wok dɛm.

Na dis pej

Lean Sass de import

We yu de yuz Sass na yu asɛt paip, mek shɔ se yu ɔptimayz Bootstrap bay we yu jɔs @importing di kɔmpɔnɛnt dɛn we yu nid. Yu big big ɔptimayzeshɔn dɛn go mɔs kɔmɔt na di Layout & Componentssay we se wi 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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

If yu nɔ de yuz wan kɔmpɔnɛnt, kɔmɛnt am ɔ dilit am ɔl. Fɔ ɛgzampul, if yu nɔ de yuz di karusel, pul da import de fɔ sev sɔm fayl saiz na yu CSS we yu dɔn kɔmpilayt. Kip in maynd sɔm dipɛnsin dɛn de akɔdin to Sass import dɛn we kin mek i at fɔ ɔmit fayl.

Lean JavaSkript fɔ yuz am

Bootstrap in JavaSkript inklud ɛvri kɔmpɔnɛnt na wi praymari dist fayl dɛn ( bootstrap.jsɛn bootstrap.min.js), ɛn ivin wi praymari dipɛnsin (Popper) wit wi bɔndɛl fayl dɛn ( bootstrap.bundle.jsɛn bootstrap.bundle.min.js). We yu de kɔstɔmayz via Sass, mek shɔ se yu pul di JavaSkript we gɛt fɔ du wit am.

Fɔ ɛgzampul, if yu tek am se yu de yuz yu yon JavaSkript bɔndlɛ lɛk Wɛbpak ɔ Rollup, yu go jɔs import di JavaSkript we yu plan fɔ yuz. Insay di ɛgzampul we de dɔŋ ya, wi de sho aw fɔ jɔs put wi modal JavaSkript:

// 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Dis we ya, yu nɔ de put ɛni JavaSkript we yu nɔ want fɔ yuz fɔ kɔmpɔnɛnt dɛn lɛk bɔtin, karusel, ɛn tultip dɛn. If yu de import drɔpdɔwn, tultip ɔ popovers, mek shɔ se yu list di Popper dipɛnsin na yu package.jsonfayl.

Difɔlt Ɛkspɔt dɛn

Fayl dɛn we de bootstrap/js/distyuz di difɔlt ɛkspɔt , so if yu want fɔ yuz wan pan dɛn yu fɔ du dɛn tin ya:

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

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

Ɔtoprɛfiksa .brawza dɛnlistrc

Bootstrap dipen pan Autoprefixer fɔ ad brawza prɛfiks dɛn ɔtomɛtik wan to sɔm CSS prɔpati dɛn. Na wi fayl de dikte prɛfiks dɛn .browserslistrc, we de na di rut fɔ di Bootstrap repo. If yu kɔstɔmayz dis list fɔ di brawza dɛn ɛn kɔmpilayt di Sass bak, i go pul sɔm CSS dɛn ɔtomɛtik wan frɔm yu CSS we yu dɔn kɔmpilayt, if vendor prɛfiks dɛn de we spɛshal fɔ da brawza ɔ vɛshɔn de.

CSS we dɛn nɔ yuz

Ɛp we yu want wit dis sɛkshɔn, duya tink bɔt fɔ opin PR. Tɛnki!

Pan ɔl we wi nɔ gɛt ɛgzampul we dɛn dɔn bil bifo tɛm fɔ yuz PurgeCSS wit Bootstrap, sɔm atikul dɛn de we go ɛp wi ɛn wok-thru dɛn we di kɔmyuniti dɔn rayt. Na sɔm tin dɛn ya we yu go ebul fɔ du:

Las wan, dis CSS Tricks atikul bɔt CSS we dɛn nɔ yuz de sho aw fɔ yuz PurgeCSS ɛn ɔda tin dɛn we tan lɛk dat.

Minifay ɛn gzip

Ɛnitɛm we i pɔsibul, mek shɔ se yu kɔmprɛs ɔl di kɔd dɛn we yu de gi to di wan dɛn we de kam fɛn yu. If yu de yuz Bootstrap dist fayl dɛn, tray fɔ stik to di wan dɛn we dɔn smɔl (we di .min.cssɛn .min.jsɛkstenshɔn dɛn sho). If yu de bil Bootstrap frɔm di sɔs wit yu yon bild sistem, mek shɔ se yu impruv yu yon minifiers fɔ HTML, CSS, ɛn JS.

Fayl dɛn we nɔ de blok

Pan ɔl we i go tan lɛk se fɔ smɔl ɛn yuz kɔmpreshɔn, fɔ mek yu fayl dɛn nɔ blok na big tin bak fɔ mek yu sayt fayn ɛn fast.

If yu de yuz Lighthouse plɔgin na Google Chrome, yu go dɔn stɔp fɔ FCP. Di Fɔs Kɔntinɛntful Peint mɛtrik de mɛzhɔ di tɛm frɔm we di pej bigin fɔ lod to we dɛn rɛnd ɛni pat pan di pej in kɔntinyu na di skrin.

Yu kin impruv FCP bay we yu defɛr JavaSkript ɔ CSS we nɔ impɔtant. Wetin dat min? Simpul wan, JavaSkript ɔ staylshit dɛn we nɔ nid fɔ de na di fɔs pent na yu pej fɔ gɛt mak wit asyncɔ deferatribyut dɛn.

Dis de mek shɔ se dɛn lod di tin dɛn we nɔ impɔtant leta ɛn nɔ de blok di fɔs pent. Na di ɔda say, dɛn kin put impɔtant tin dɛn insay as inlayn skript ɔ stayl dɛn.

If yu want fɔ no mɔ bɔt dis, bɔku fayn fayn atikul dɛn dɔn ɔlrɛdi de bɔt am:

Yuz HTTPS ɔltɛm

Yu wɛbsayt fɔ jɔs de oba HTTPS kɔnɛkshɔn dɛn we dɛn de prodyuz. HTTPS de mek ɔl di sayt dɛn sikyɔriti, prayvet pat, ɛn we de de, ɛn no tin nɔ de we dɛn kɔl wɛb trafik we nɔ gɛt sɛns . Di tin dɛn we yu fɔ du fɔ kɔnfigyut yu wɛbsayt fɔ mek dɛn yuz am jɔs bay HTTPS kin difrɛn bad bad wan dipen pan yu akitɛkɛt ɛn wɛb hosting prɔvayda, ɛn so dɛn nɔ go ebul fɔ du dɛn dɔkyumɛnt dɛn ya.

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.