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";

// 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/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 jūsų 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

Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.

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.