Optimizēt
Saglabājiet savus projektus vienkāršus, atsaucīgus un apkopējamus, lai jūs varētu sniegt vislabāko pieredzi un koncentrēties uz svarīgākiem darbiem.
Lean Sass imports
Izmantojot Sass savā līdzekļu konveijerā, noteikti optimizējiet Bootstrap, ievadot tikai @import
jums nepieciešamos komponentus. Jūsu lielākās optimizācijas, iespējams, tiks veiktas Layout & Components
mūsu sadaļā 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";
@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.js
un bootstrap.min.js
), un pat mūsu primāro atkarību (Popper) ar mūsu komplekta failiem ( bootstrap.bundle.js
un 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 vai Rollup, 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.json
failā norādiet Popper atkarību.
Noklusējuma eksportēšana
Faili bootstrap/js/dist
izmanto noklusējuma eksportu , tādēļ, ja vēlaties izmantot kādu no tiem, jums ir jāveic šādas darbības:
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 .browserslistrc
fails, 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.css
un .min.js
paplaš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 async
vai defer
atribū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:
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.