Optimizuoti

Lean Sass importas

Kai naudojate „Sass“ savo išteklių rinkinyje, įsitikinkite, kad optimizuojate „Bootstrap“ įtraukdami tik @importjums reikalingus komponentus. Didžiausias optimizavimas greičiausiai bus atliktas Layout & Componentsmūsų skiltyje 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";

Jei nenaudojate komponento, pakomentuokite arba visiškai ištrinkite. Pavyzdžiui, jei nenaudojate karuselės, pašalinkite tą importavimą, kad sukompiliuotame CSS išsaugotumėte tam tikro dydžio failą. Atminkite, kad „Sass“ importavimas turi tam tikrų priklausomybių, dėl kurių gali būti sunkiau praleisti failą.

Lean JavaScript

„Bootstrap“ „JavaScript“ apima visus komponentus mūsų pirminiuose dist failuose ( bootstrap.jsir bootstrap.min.js) ir net mūsų pirminę priklausomybę (Popper) su mūsų paketo failais ( bootstrap.bundle.jsir bootstrap.bundle.min.js). Kai tinkinate naudodami „Sass“, būtinai pašalinkite susijusią „JavaScript“.

Pavyzdžiui, darant prielaidą, kad naudojate savo „JavaScript“ rinktuvą, pvz., „Webpack“ arba „Rollup“, importuotumėte tik tą „JavaScript“, kurį planuojate naudoti. Toliau pateiktame pavyzdyje parodome, kaip tiesiog įtraukti modalinį 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';

Tokiu būdu neįtraukiate jokios „JavaScript“, kurio neketinate naudoti tokiems komponentams kaip mygtukai, karuselės ir patarimai. Jei importuojate išskleidžiamuosius meniu, patarimus ar iškylančius langus, faile būtinai nurodykite Popper priklausomybę package.json.

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

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

Autoprefixer .browserslistrc

„Bootstrap“ priklauso nuo „Autoprefixer“, kad automatiškai pridėtų naršyklės priešdėlius prie tam tikrų CSS ypatybių. Priešdėlius diktuoja mūsų .browserslistrcfailas, randamas „Bootstrap“ repo šaknyje. Pritaikius šį naršyklių sąrašą ir iš naujo sukompiliavus Sass, kai kurie CSS bus automatiškai pašalinti iš jūsų sudaryto CSS, jei yra tiekėjo prefiksų, būdingų tai naršyklei ar versijai.

Nenaudojamas CSS

Norime pagalbos dėl šios skilties, apsvarstykite galimybę atidaryti PR. Dėkoju!

Nors neturime iš anksto sukurto „ PurgeCSS “ naudojimo su „Bootstrap“ pavyzdžio, yra keletas naudingų straipsnių ir gairių, kuriuos parašė bendruomenė. Štai keletas parinkčių:

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

Galiausiai, šiame CSS gudrybių straipsnyje apie nenaudojamą CSS parodyta, kaip naudoti PurgeCSS ir kitus panašius įrankius.

Sumažinti ir gzip

Kai tik įmanoma, būtinai suglaudinkite visą kodą, kurį pateikiate savo lankytojams. Jei naudojate Bootstrap dist failus, pabandykite laikytis sumažintų versijų (nurodytų plėtiniais .min.cssir .min.js). Jei kuriate „Bootstrap“ iš šaltinio naudodami savo kūrimo sistemą, būtinai įdiekite savo HTML, CSS ir JS miniatierius.

Neblokuojantys failai

Nors gali atrodyti, kad pakanka sumažinti ir naudoti glaudinimą, failų neblokavimas taip pat yra didelis žingsnis siekiant, kad svetainė būtų tinkamai optimizuota ir pakankamai greita.

Jei „Google Chrome“ naudojate „ Lighthouse “ papildinį, galbūt užkliuvote dėl FCP. „First Contentful Paint“ metrika matuoja laiką nuo puslapio įkėlimo pradžios iki bet kurios puslapio turinio dalies pateikimo ekrane.

Galite patobulinti FCP atidėdami nekritinį JavaScript arba CSS. Ką tai reiškia? Paprasčiausiai „JavaScript“ arba stilių lentelės, kurių nebūtina pirmame puslapio dažyme, turėtų būti pažymėti asyncarba deferatributais.

Taip užtikrinama, kad mažiau svarbūs resursai bus apkrauti vėliau ir neužblokuotų pirmųjų dažų. Kita vertus, svarbūs ištekliai gali būti įtraukti kaip įterptieji scenarijai arba stiliai.

Jei norite sužinoti daugiau apie tai, jau yra daug puikių straipsnių apie tai:

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

Visada naudokite HTTPS

Jūsų svetainė turėtų būti pasiekiama tik naudojant HTTPS ryšį gamybinėje versijoje. HTTPS pagerina visų svetainių saugumą, privatumą ir pasiekiamumą, todėl nėra tokio dalyko kaip neskelbtinas žiniatinklio srautas . Veiksmai, skirti konfigūruoti svetainę, kad ji būtų teikiama tik per HTTPS, labai skiriasi, atsižvelgiant į jūsų architektūrą ir žiniatinklio prieglobos paslaugų teikėją, todėl jie nepatenka į šių dokumentų taikymo sritį.

Svetainės, aptarnaujamos per HTTPS, taip pat turėtų pasiekti visus stiliaus lapus, scenarijus ir kitus išteklius per HTTPS ryšius. Priešingu atveju naudotojams siųsite mišrų aktyvų turinį , todėl atsiras galimų pažeidžiamumų, kai pakeitus priklausomybę svetainė gali būti pažeista. Dėl to gali kilti saugos problemų ir naudotojams rodomi įspėjimai naršyklėje. Nesvarbu, ar gaunate „Bootstrap“ iš CDN, ar teikiate jį patys, įsitikinkite, kad jį pasiekiate tik per HTTPS ryšį.