Optymalizować

Import Lean Sass

Używając Sass w potoku zasobów, upewnij się, że optymalizujesz Bootstrap, używając tylko @importtych komponentów, których potrzebujesz. Twoje największe optymalizacje będą prawdopodobnie pochodzić z Layout & Componentssekcji naszego 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";

Jeśli nie używasz komponentu, skomentuj go lub całkowicie usuń. Na przykład, jeśli nie używasz karuzeli, usuń ten import, aby zapisać pewien rozmiar pliku w skompilowanym CSS. Pamiętaj, że istnieją pewne zależności między importami Sass, które mogą utrudnić pominięcie pliku.

Lean JavaScript

JavaScript Bootstrap zawiera każdy komponent w naszych podstawowych plikach dist ( bootstrap.jsi bootstrap.min.js), a nawet naszą podstawową zależność (Popper) z naszymi plikami pakietowymi ( bootstrap.bundle.jsi bootstrap.bundle.min.js). Podczas dostosowywania przez Sass pamiętaj, aby usunąć powiązany JavaScript.

Na przykład, zakładając, że używasz własnego pakietu JavaScript, takiego jak Webpack lub Rollup, zaimportujesz tylko ten JavaScript, którego planujesz używać. W poniższym przykładzie pokazujemy, jak dołączyć nasz modalny 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';

W ten sposób nie dołączasz żadnego kodu JavaScript, którego nie zamierzasz używać w komponentach, takich jak przyciski, karuzele i podpowiedzi. Jeśli importujesz listy rozwijane, podpowiedzi lub popovery, upewnij się, że w package.jsonpliku wymieniłeś zależność Poppera.

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

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

Autoprefiks .browserslistrc

Bootstrap korzysta z funkcji Autoprefixer, która automatycznie dodaje prefiksy przeglądarki do niektórych właściwości CSS. Prefiksy są dyktowane przez nasz .browserslistrcplik znajdujący się w katalogu głównym repozytorium Bootstrap. Dostosowanie tej listy przeglądarek i ponowna kompilacja Sassa automatycznie usunie niektóre CSS ze skompilowanego CSS, jeśli istnieją prefiksy dostawcy unikalne dla tej przeglądarki lub wersji.

Nieużywany CSS

Potrzebna pomoc w tej sekcji, rozważ otwarcie PR. Dziękuję!

Chociaż nie mamy gotowego przykładu używania PurgeCSS z Bootstrapem, istnieje kilka pomocnych artykułów i poradników napisanych przez społeczność. Oto kilka opcji:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-lub-inne-frameworks/

Na koniec, ten artykuł Sztuczki CSS na temat nieużywanego CSS pokazuje, jak używać PurgeCSS i innych podobnych narzędzi.

Zminifikuj i gzip

Jeśli to możliwe, skompresuj cały kod, który podajesz odwiedzającym. Jeśli używasz plików dystrybucyjnych Bootstrap, spróbuj trzymać się wersji zminimalizowanych (wskazywanych przez rozszerzenia .min.cssi .min.js). Jeśli budujesz Bootstrap ze źródła za pomocą własnego systemu kompilacji, pamiętaj o zaimplementowaniu własnych minifikatorów dla HTML, CSS i JS.

Pliki nieblokujące

Chociaż minimalizacja i używanie kompresji może wydawać się wystarczające, sprawienie, że Twoje pliki nie będą się blokować, jest również dużym krokiem w kierunku dobrze zoptymalizowanej i wystarczająco szybkiej witryny.

Jeśli używasz wtyczki Lighthouse w Google Chrome, być może natknąłeś się na FCP. Metryka Pierwsze wyrenderowanie treści mierzy czas od rozpoczęcia ładowania strony do wyrenderowania dowolnej części zawartości strony na ekranie.

Możesz ulepszyć FCP, odkładając niekrytyczny JavaScript lub CSS. Co to znaczy? Po prostu JavaScript lub arkusze stylów, które nie muszą być obecne przy pierwszym malowaniu strony, powinny być oznaczone atrybutami asynclub .defer

Dzięki temu mniej ważne surowce zostaną załadowane później i nie będą blokować pierwszej farby. Z drugiej strony, krytyczne zasoby mogą być zawarte jako wbudowane skrypty lub style.

Jeśli chcesz dowiedzieć się więcej na ten temat, istnieje już wiele świetnych artykułów na ten temat:

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

Zawsze używaj HTTPS

Twoja witryna powinna być dostępna tylko przez połączenia HTTPS w środowisku produkcyjnym. HTTPS poprawia bezpieczeństwo, prywatność i dostępność wszystkich witryn i nie ma czegoś takiego jak niewrażliwy ruch sieciowy . Czynności, które należy wykonać, aby skonfigurować witrynę do obsługi wyłącznie przez HTTPS, różnią się znacznie w zależności od architektury i dostawcy usług hostingowych, a zatem wykraczają poza zakres tych dokumentów.

Witryny obsługiwane przez HTTPS powinny również uzyskiwać dostęp do wszystkich arkuszy stylów, skryptów i innych zasobów przez połączenia HTTPS. W przeciwnym razie będziesz wysyłać użytkownikom mieszaną zawartość aktywną , co prowadzi do potencjalnych luk w zabezpieczeniach, w wyniku których witryna może zostać naruszona przez zmianę zależności. Może to prowadzić do problemów z bezpieczeństwem i ostrzeżeń w przeglądarce wyświetlanych użytkownikom. Niezależnie od tego, czy pobierasz Bootstrap z sieci CDN, czy sam go obsługujesz, upewnij się, że uzyskujesz do niego dostęp tylko za pośrednictwem połączeń HTTPS.