Optimizēt

Lean Sass imports

Izmantojot Sass savā līdzekļu konveijerā, noteikti optimizējiet Bootstrap, ievadot tikai @importjums nepieciešamos komponentus. Jūsu lielākās optimizācijas, iespējams, tiks veiktas Layout & Componentsmūsu sadaļā 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";

Ja neizmantojat komponentu, komentējiet to vai izdzēsiet to pilnībā. Piemēram, ja neizmantojat karuseli, noņemiet šo importēšanu, lai saglabātu zināmu faila lielumu savā kompilētajā CSS. Ņemiet vērā, ka Sass importēšanai ir dažas atkarības, kas var apgrūtināt faila izlaišanu.

Lean JavaScript

Bootstrap JavaScript ietver visus komponentus mūsu primārajos dist failos ( bootstrap.jsun bootstrap.min.js), un pat mūsu primāro atkarību (Popper) ar mūsu komplekta failiem ( bootstrap.bundle.jsun bootstrap.bundle.min.js). Kamēr veicat pielāgošanu, izmantojot Sass, noteikti noņemiet saistīto JavaScript.

Piemēram, pieņemot, ka izmantojat savu JavaScript komplektētāju, piemēram, Webpack, Parcel vai Vite, jūs importējat tikai JavaScript, kuru plānojat izmantot. Tālāk esošajā piemērā mēs parādām, kā vienkārši iekļaut mūsu modālo 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';

Tādā veidā jūs neiekļaujat JavaScript, ko neplānojat izmantot tādiem komponentiem kā pogas, karuseļi un rīka padomi. Ja importējat nolaižamās izvēlnes, rīka padomus vai uznirstošos logus, noteikti savā package.jsonfailā norādiet Popper atkarību.

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

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

Autoprefixer .browserslistrc

Bootstrap ir atkarīgs no Autoprefixer, lai automātiski pievienotu pārlūkprogrammas prefiksus noteiktiem CSS rekvizītiem. Prefiksus nosaka mūsu .browserslistrcfails, kas atrodas Bootstrap repo saknē. Pielāgojot šo pārlūkprogrammu sarakstu un pārkompilējot Sass, daļa CSS automātiski tiks noņemta no jūsu kompilētā CSS, ja šai pārlūkprogrammai vai versijai ir unikāli piegādātāja prefiksi.

Nelietots CSS

Vēlaties palīdzību saistībā ar šo sadaļu, lūdzu, apsveriet iespēju atvērt PR. Paldies!

Lai gan mums nav iepriekš izveidota piemēra PurgeCSS lietošanai ar Bootstrap, ir daži noderīgi raksti un kopienas ceļvedi. Šeit ir dažas iespējas:

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

Visbeidzot, šajā CSS triku rakstā par neizmantoto CSS ir parādīts, kā izmantot PurgeCSS un citus līdzīgus rīkus.

Samazināt un gzip

Kad vien iespējams, noteikti saspiediet visu kodu, ko sniedzat apmeklētājiem. Ja izmantojat Bootstrap dist failus, mēģiniet pieturēties pie samazinātajām versijām (norādītas ar .min.cssun .min.jspaplašinājumiem). Ja veidojat Bootstrap no avota, izmantojot savu būvēšanas sistēmu, noteikti ieviesiet savus minifierus HTML, CSS un JS.

Nebloķējoši faili

Lai gan varētu šķist, ka ir pietiekami samazināt un izmantot saspiešanu, failu nebloķējoša izveide ir arī liels solis, lai padarītu vietni labi optimizētu un pietiekami ātru.

Ja pārlūkprogrammā Google Chrome izmantojat Lighthouse spraudni, iespējams, esat paklupis pār FCP. Metrika First Contentful Paint mēra laiku no lapas ielādes sākuma līdz brīdim, kad ekrānā tiek renderēta jebkura lapas satura daļa.

Varat uzlabot FCP, atliekot nekritisku JavaScript vai CSS. Ko tas nozīmē? Vienkārši JavaScript vai stilu lapas, kurām nav jābūt jūsu lapas pirmajā krāsā, ir jāatzīmē ar asyncvai deferatribūtiem.

Tas nodrošina, ka mazāk svarīgie resursi tiek ielādēti vēlāk un nebloķē pirmo krāsu. No otras puses, kritiskos resursus var iekļaut kā iekļautos skriptus vai stilus.

Ja vēlaties uzzināt vairāk par to, par to jau ir daudz lielisku rakstu:

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

Vienmēr izmantojiet HTTPS

Jūsu vietnei ir jābūt pieejamai, tikai izmantojot HTTPS savienojumus ražošanas režīmā. HTTPS uzlabo visu vietņu drošību, privātumu un pieejamību, un nav tādas lietas kā nejutīga tīmekļa trafika . Darbības, kas jāveic, lai konfigurētu jūsu vietni tā, lai tā tiktu apkalpota tikai, izmantojot HTTPS, ļoti atšķiras atkarībā no jūsu arhitektūras un tīmekļa mitināšanas pakalpojumu sniedzēja, un tādējādi tās neietilpst šajos dokumentos.

Vietnēm, kas tiek apkalpotas, izmantojot HTTPS, ir arī jāpiekļūst visām stilu lapām, skriptiem un citiem līdzekļiem, izmantojot HTTPS savienojumus. Pretējā gadījumā jūs sūtīsit lietotājiem jauktu aktīvu saturu , radot iespējamu ievainojamību, kurā vietne var tikt apdraudēta, mainot atkarību. Tas var izraisīt drošības problēmas un lietotājiem parādītus brīdinājumus pārlūkprogrammā. Neatkarīgi no tā, vai saņemat Bootstrap no CDN vai apkalpojat pats, pārliecinieties, ka tai piekļūstat tikai, izmantojot HTTPS savienojumus.