Optimize bikin

Projeyên xwe sist, bersivdar û domdar bihêlin da ku hûn ezmûna çêtirîn bidin û bala xwe bidin ser karên girîngtir.

Li ser vê rûpelê

Lean Sass îtxal dike

Dema ku Sass di lûleya sermayeya xwe de bikar tînin, pê ewle bin ku hûn Bootstrap-ê bi tenê @importhêmanên ku hûn hewce ne xweş bikin. Optimîzasyona weya herî mezin dê ji Layout & Componentsbeşa me were 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";

Ger hûn hêmanek bikar neynin, wê şîrove bikin an bi tevahî jêbirin. Mînakî, heke hûn karûselê bikar neynin, wê importê jê bikin da ku hin mezinahiya pelê di CSS-ya xweya berhevkirî de hilînin. Bînin bîra xwe ku di nav importên Sass de hin girêdan hene ku dibe ku derxistina pelek dijwartir bike.

JavaScript-ê paqij bikin

JavaScript-a Bootstrap di pelên meyên dûr ên bingehîn de ( bootstrap.jsû bootstrap.min.js), û hetta pêwendiya meya bingehîn (Popper) bi pelên meyên pakêtê ( bootstrap.bundle.jsû bootstrap.bundle.min.js) re her pêkhateyek vedigire. Dema ku hûn bi Sass-ê vesaz dikin, pê ewle bin ku JavaScript-a têkildar jêbirin.

Mînakî, bihesibînin ku hûn pakêtek JavaScript-a xwe ya mîna Webpack an Rollup bikar tînin, hûn ê tenê JavaScript-a ku hûn plan dikin ku bikar bînin îtxal bikin. Di mînaka jêrîn de, em destnîşan dikin ka meriv çawa JavaScript-a xweya modal çawa vedigire:

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

Bi vî rengî, hûn JavaScriptek ku hûn niyeta wan nakin ji bo pêkhateyên mîna bişkok, carousel, û serişteyên amûran bikar bînin, tê de nakin. Ger hûn dakêşan, şîretên amûran an popoveran îtxal dikin, bê guman girêdana Popper-ê di package.jsonpelê xwe de navnîş bikin.

Standard Exports

Pelên ku îxracata xwerûbootstrap/js/dist bikar tînin , ji ber vê yekê heke hûn dixwazin yek ji wan bikar bînin divê hûn jêrîn bikin:

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

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

Autoprefixer .browserslistrc

Bootstrap bi Autoprefixer ve girêdayî ye ku bixweber pêşgirên gerokê li hin taybetmendiyên CSS-ê zêde bike. Pêşgir ji hêla .browserslistrcpelê me ve, ku di koka depoya Bootstrap de têne dîtin, têne destnîşan kirin. Veguheztina vê navnîşa gerokan û ji nû ve berhevkirina Sass-ê dê bixweber hin CSS ji CSS-ya weya berhevkirî derxîne, heke pêşgirên firoşkar ên ji bo wê gerok an guhertoya yekta hebin.

CSS nayê bikaranîn

Di vê beşê de alîkarî tê xwestin, ji kerema xwe vekirina PR-ê bifikirin. Spas!

Digel ku me mînakek pêş-avakirî ji bo karanîna PurgeCSS bi Bootstrap re tune, hin gotar û rêgezên alîkar hene ku civatê nivîsandiye. Li vir çend vebijark hene:

Di paşiya paşîn de, ev gotara CSS Tricks li ser CSS- ya nekarandî nîşan dide ka meriv çawa PurgeCSS û amûrên din ên mîna wan bikar tîne.

Minify û gzip

Kengê ku gengaz be, pê ewle bin ku hûn hemî koda ku hûn ji mêvanên xwe re xizmet dikin bişkînin. Heke hûn pelên dûr ên Bootstrap bikar tînin, hewl bidin ku guhertoyên kêmkirî (ji hêla .min.cssû .min.jsdirêjkirinan ve têne destnîşan kirin) bisekinin. Ger hûn Bootstrap-ê ji çavkaniyê bi pergala xweya avakirina xwe re çêdikin, pê ewle bin ku ji bo HTML, CSS, û JS mînîfiersên xwe bicîh bînin.

Pelên ne astengkirin

Digel ku kêmkirin û karanîna kompresyonê bes xuya dike, çêkirina pelên we yên neastengker di heman demê de gavek mezin e ku hûn malpera we baş xweşbîn û bi têra xwe bilez bikin.

Heke hûn di Google Chrome-ê de pêvekek Lighthouse bikar tînin , dibe ku hûn li ser FCP terpilin. Metrîka First Contentful Paint ji dema ku rûpel dest bi barkirinê dike heya dema ku beşek ji naveroka rûpelê li ser ekranê tê pêşkêş kirin dipîve.

Hûn dikarin FCP-ê bi paşxistina JavaScript an CSS-ya ne-krîtîk çêtir bikin. Kutana bizmarî? Bi tenê, JavaScript an şêwazên ku ne hewce ne ku li ser boyaxkirina yekem a rûpela we hebin divê bi asyncan defertaybetmendiyan werin nîşankirin.

Ev piştrast dike ku çavkaniyên kêmtir girîng paşê têne barkirin û rengê yekem asteng nakin. Ji hêla din ve, çavkaniyên krîtîk dikarin wekî nivîsar an şêwazên hundurîn werin nav kirin.

Heke hûn dixwazin li ser vê yekê bêtir fêr bibin, jixwe di derbarê wê de gelek gotarên hêja hene:

Her dem HTTPS bikar bînin

Malpera we divê di hilberînê de tenê li ser girêdanên HTTPS peyda bibe. HTTPS ewlehî, nepenî, û hebûna hemî malperan çêtir dike, û tiştek wekî seyrûsefera tevneyê ya ne-hesas tune . Pêngavên mîhengkirina malpera xwe ku bi taybetî li ser HTTPS-ê were xizmet kirin, li gorî mîmarî û pêşkêşvanê mêvandariya webê ya we pir cûda dibe, û bi vî rengî li derveyî çarçoweya van belgeyan e.

Malperên ku li ser HTTPS-ê têne xizmet kirin divê di heman demê de bigihîjin hemî şêwaz, nivîsar, û hebûnên din ên li ser girêdanên HTTPS. Wekî din, hûn ê ji bikarhêneran re naveroka çalak a tevlihev bişînin , ku bibe sedema qelsiyên potansiyel ên ku malperek dikare bi guheztina pêwendiyek were xera kirin. Ev dikare bibe sedema pirsgirêkên ewlehiyê û hişyariyên gerokê ku ji bikarhêneran re têne xuyang kirin. Ma hûn Bootstrap ji CDN-ê distînin an bi xwe jê re xizmet dikin, pê ewle bin ku hûn tenê bi girêdanên HTTPS-ê bigihîjin wê.