Optimalizovat

Dovoz Lean Sass

Při používání Sass ve vašem asset pipeline se ujistěte, že optimalizujete Bootstrap tím, že použijete pouze @importkomponenty, které potřebujete. Vaše největší optimalizace pravděpodobně pocházejí ze Layout & Componentssekce našeho bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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";

Pokud komponentu nepoužíváte, okomentujte ji nebo ji zcela odstraňte. Pokud například nepoužíváte karusel, odeberte tento import, abyste uložili určitou velikost souboru v kompilovaném CSS. Mějte na paměti, že mezi importy Sass existují určité závislosti, které mohou ztížit vynechání souboru.

Lean JavaScript

JavaScript Bootstrapu zahrnuje všechny komponenty v našich primárních dist souborech ( bootstrap.jsa bootstrap.min.js), a dokonce i naši primární závislost (Popper) s našimi svazkovými soubory ( bootstrap.bundle.jsa bootstrap.bundle.min.js). Při přizpůsobování přes Sass nezapomeňte odstranit související JavaScript.

Za předpokladu, že například používáte svůj vlastní balíček JavaScriptu, jako je Webpack, Parcel nebo Vite, importujete pouze JavaScript, který plánujete používat. V níže uvedeném příkladu ukazujeme, jak jednoduše zahrnout náš modální 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ímto způsobem nezahrnujete žádný JavaScript, který nehodláte používat pro komponenty, jako jsou tlačítka, karusely a popisky. Pokud importujete rozevírací seznamy, popisky nebo vyskakovací okna, nezapomeňte ve svém package.jsonsouboru uvést závislost Poppera.

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

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

Autoprefixer .browserslistrc

Bootstrap závisí na Autoprefixeru, který automaticky přidává předpony prohlížeče k určitým vlastnostem CSS. Předpony jsou diktovány naším .browserslistrcsouborem, který se nachází v kořenovém adresáři Bootstrap repo. Přizpůsobení tohoto seznamu prohlížečů a překompilování Sass automaticky odstraní některé CSS z vašeho kompilovaného CSS, pokud existují předpony dodavatele jedinečné pro daný prohlížeč nebo verzi.

Nepoužité CSS

Potřebujete pomoc s touto sekcí, zvažte prosím otevření PR. Dík!

I když nemáme předem sestavený příklad pro použití PurgeCSS s Bootstrap, existuje několik užitečných článků a návodů, které komunita napsala. Zde je několik možností:

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

A konečně, tento článek CSS Tricks o nepoužívaných CSS ukazuje, jak používat PurgeCSS a další podobné nástroje.

Minifikujte a gzipujte

Kdykoli je to možné, nezapomeňte zkomprimovat veškerý kód, který svým návštěvníkům poskytujete. Pokud používáte soubory Bootstrap dist, zkuste se držet miniifikovaných verzí (označených příponami .min.cssa ). .min.jsPokud vytváříte Bootstrap ze zdroje pomocí vlastního systému sestavení, nezapomeňte implementovat své vlastní minifikátory pro HTML, CSS a JS.

Neblokující soubory

Minifikace a použití komprese se může zdát jako dostačující, ale vytvoření neblokovacích souborů je také velkým krokem k tomu, aby byl váš web dobře optimalizovaný a dostatečně rychlý.

Pokud v prohlížeči Google Chrome používáte plugin Lighthouse , možná jste narazili na FCP. Metrika První obsahové vymalování měří čas od začátku načítání stránky do vykreslení jakékoli části obsahu stránky na obrazovce.

FCP můžete zlepšit odložením nekritického JavaScriptu nebo CSS. Co to znamená? Jednoduše, JavaScript nebo šablony stylů, které nemusí být přítomny na prvním nátěru vaší stránky, by měly být označeny pomocí asyncnebo deferatributů.

To zajišťuje, že méně důležité zdroje budou načteny později a neblokují první nátěr. Na druhou stranu kritické zdroje mohou být zahrnuty jako vložené skripty nebo styly.

Pokud se o tom chcete dozvědět více, existuje o tom již mnoho skvělých článků:

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

Vždy používejte HTTPS

Váš web by měl být ve výrobě dostupný pouze přes připojení HTTPS. HTTPS zlepšuje zabezpečení, soukromí a dostupnost všech webů a neexistuje nic jako necitlivý webový provoz . Kroky pro konfiguraci vašeho webu tak, aby byl obsluhován výhradně přes HTTPS, se značně liší v závislosti na vaší architektuře a poskytovateli webhostingu, a proto jsou mimo rozsah těchto dokumentů.

Weby obsluhované přes HTTPS by také měly přistupovat ke všem šablonám stylů, skriptům a dalším prostředkům přes připojení HTTPS. V opačném případě budete uživatelům posílat smíšený aktivní obsah , což povede k potenciálním zranitelnostem, kdy může být web kompromitován změnou závislosti. To může vést k bezpečnostním problémům a varováním v prohlížeči zobrazovaným uživatelům. Ať už Bootstrap získáváte z CDN nebo jej obsluhujete sami, ujistěte se, že k němu budete přistupovat pouze přes připojení HTTPS.