Optimoida

Lean Sass -tuonti

Kun käytät Sassia omaisuusluettelossasi, varmista, että optimoit Bootstrapin lisäämällä vain @importtarvitsemasi komponentit. Suurin optimointi tulee todennäköisesti Layout & Componentsmeidän 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";

Jos et käytä komponenttia, kommentoi se tai poista se kokonaan. Jos esimerkiksi et käytä karusellia, poista tuo tuonti tallentaaksesi jonkin verran tiedostokokoa käännettyyn CSS:ään. Muista, että Sass-tuonnissa on joitain riippuvuuksia, jotka voivat vaikeuttaa tiedoston jättämistä pois.

Kevyt JavaScript

Bootstrapin JavaScript sisältää kaikki osat ensisijaisista dist-tiedostoistamme ( bootstrap.jsja bootstrap.min.js) ja jopa ensisijaisesta riippuvuudestamme (Popper) nipputiedostoistamme ( bootstrap.bundle.jsja bootstrap.bundle.min.js). Kun muokkaat Sassin kautta, muista poistaa asiaan liittyvä JavaScript.

Jos esimerkiksi käytät omaa JavaScript-niputtajaasi, kuten Webpackia tai Rollupia, tuot vain JavaScriptin, jota aiot käyttää. Alla olevassa esimerkissä näytämme, kuinka vain modaalinen JavaScript otetaan mukaan:

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

Tällä tavalla et sisällytä JavaScriptiä, jota et aio käyttää komponenteille, kuten painikkeille, karuselleille ja työkaluvihjeille. Jos tuot avattavia valikoita, työkaluvihjeitä tai ponnahdusikkunoita, muista mainita Popper-riippuvuus package.jsontiedostossasi.

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

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

Automaattinen etuliite .browserslistrc

Bootstrap edellyttää, että Autoprefixer lisää selaimen etuliitteet automaattisesti tiettyihin CSS-ominaisuuksiin. Etuliitteet sanelevat .browserslistrctiedostomme, joka löytyy Bootstrap-repon juuresta. Tämän selainluettelon mukauttaminen ja Sassin uudelleen kääntäminen poistaa automaattisesti osan CSS:stä käännetystä CSS:stä, jos kyseiselle selaimelle tai versiolle on ainutlaatuisia toimittajan etuliitteitä.

Käyttämätön CSS

Tässä osiossa pyydetään apua, harkitse PR:n avaamista. Kiitos!

Vaikka meillä ei ole esirakennettua esimerkkiä PurgeCSS :n käyttämisestä Bootstrapin kanssa, on olemassa joitakin hyödyllisiä artikkeleita ja esittelyjä, jotka yhteisö on kirjoittanut. Tässä on joitain vaihtoehtoja:

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

Lopuksi tämä käyttämätöntä CSS:ää käsittelevä CSS Tricks -artikkeli näyttää, kuinka PurgeCSS:ää ja muita vastaavia työkaluja käytetään.

Pienennä ja gzip

Aina kun mahdollista, muista pakata kaikki vierailijoille tarjoamasi koodi. Jos käytät Bootstrap dist -tiedostoja, yritä pitää kiinni minimoiduista versioista (merkitty .min.cssja .min.jslaajennuksilla). Jos rakennat Bootstrapia lähteestä omalla koontijärjestelmälläsi, muista ottaa käyttöön omat HTML-, CSS- ja JS-minifierit.

Ei-estävät tiedostot

Vaikka pakkaamisen vähentäminen ja käyttö saattaa tuntua riittävältä, tiedostojesi tekeminen estämättömiksi on myös suuri askel sivustosi optimoinnissa ja riittävän nopeassa.

Jos käytät Lighthouse -laajennusta Google Chromessa, olet ehkä törmännyt FCP:hen. First Contentful Paint -mittari mittaa aikaa sivun latautumisesta siihen, kun mikä tahansa sivun sisällön osa hahmonnetaan näytöllä.

Voit parantaa FCP:tä lykkäämällä ei-kriittistä JavaScriptiä tai CSS:ää. Mitä tuo tarkoittaa? Yksinkertaisesti JavaScript tai tyylisivut, joiden ei tarvitse olla sivusi ensimmäisessä maalissa, tulee merkitä attribuutilla asynctai .defer

Tämä varmistaa, että vähemmän tärkeät resurssit ladataan myöhemmin eikä estä ensimmäistä maalia. Toisaalta kriittiset resurssit voidaan sisällyttää upotettuina komentosarjoina tai tyyleinä.

Jos haluat oppia lisää tästä, siitä on jo paljon upeita artikkeleita:

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

Käytä aina HTTPS:ää

Verkkosivustosi pitäisi olla käytettävissä vain HTTPS-yhteyksien kautta tuotannossa. HTTPS parantaa kaikkien sivustojen turvallisuutta, yksityisyyttä ja saatavuutta, eikä ole olemassa ei-arkaluonteista verkkoliikennettä . Vaiheet verkkosivustosi määrittämiseksi palvelemaan yksinomaan HTTPS:n kautta vaihtelevat suuresti arkkitehtuurisi ja verkkopalveluntarjoajasi mukaan, joten ne eivät kuulu näiden asiakirjojen soveltamisalaan.

HTTPS:n kautta palvelevien sivustojen tulee myös käyttää kaikkia tyylisivuja, komentosarjoja ja muita resursseja HTTPS-yhteyksien kautta. Muussa tapauksessa lähetät käyttäjille sekalaista aktiivista sisältöä , mikä johtaa mahdollisiin haavoittuvuuksiin, joissa sivusto voi vaarantua riippuvuutta muuttamalla. Tämä voi johtaa tietoturvaongelmiin ja käyttäjille näkyviin selaimen sisäisiin varoituksiin. Riippumatta siitä, hankitpa Bootstrapin CDN-verkosta tai käytät sitä itse, varmista, että käytät sitä vain HTTPS-yhteyksien kautta.