Оптимизиране

Lean Sass внос

Когато използвате Sass във вашия конвейер за активи, уверете се, че оптимизирате Bootstrap, като инсталирате само @importнеобходимите компоненти. Вашите най-големи оптимизации вероятно ще дойдат от Layout & Componentsсекцията на нашия 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";

Ако не използвате компонент, коментирайте го или го изтрийте изцяло. Например, ако не използвате въртележката, премахнете това импортиране, за да запазите някакъв размер на файла във вашия компилиран CSS. Имайте предвид, че има някои зависимости между импортирането на Sass, което може да направи по-трудно пропускането на файл.

Лесен JavaScript

JavaScript на Bootstrap включва всеки компонент в нашите основни dist файлове ( bootstrap.jsи bootstrap.min.js) и дори нашата основна зависимост (Popper) с нашите пакетни файлове ( bootstrap.bundle.jsи bootstrap.bundle.min.js). Докато персонализирате чрез Sass, не забравяйте да премахнете свързания JavaScript.

Например, ако приемем, че използвате собствен JavaScript пакет като Webpack или Rollup, ще импортирате само JavaScript, който планирате да използвате. В примера по-долу показваме как просто да включим нашия модален 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';

По този начин вие не включвате JavaScript, който не възнамерявате да използвате за компоненти като бутони, въртележки и подсказки. Ако импортирате падащи менюта, подсказки или изскачащи съобщения, не забравяйте да посочите зависимостта на Popper във вашия package.jsonфайл.

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

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

Автоматичен префикс .browserslistrc

Bootstrap зависи от Autoprefixer за автоматично добавяне на префикси на браузъра към определени CSS свойства. Префиксите се диктуват от нашия .browserslistrcфайл, намиращ се в корена на Bootstrap repo. Персонализирането на този списък с браузъри и прекомпилирането на Sass автоматично ще премахне някои CSS от вашия компилиран CSS, ако има префикси на доставчика, уникални за този браузър или версия.

Неизползван CSS

Искам помощ с този раздел, моля, обмислете отварянето на PR. Благодаря!

Въпреки че нямаме готов пример за използване на PurgeCSS с Bootstrap, има някои полезни статии и инструкции, които общността е написала. Ето някои опции:

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

И накрая, тази статия за CSS трикове за неизползван CSS показва как да използвате PurgeCSS и други подобни инструменти.

Минимизиране и gzip

Когато е възможно, не забравяйте да компресирате целия код, който предоставяте на посетителите си. Ако използвате dist файлове на Bootstrap, опитайте се да се придържате към минимизираните версии (обозначени с разширения .min.cssи ). .min.jsАко изграждате Bootstrap от изходния код със собствена система за компилиране, не забравяйте да внедрите свои собствени минификатори за HTML, CSS и JS.

Неблокиращи файлове

Въпреки че минимизирането и използването на компресия може да изглеждат достатъчни, превръщането на вашите файлове в неблокиращи също е голяма стъпка в това да направите сайта си добре оптимизиран и достатъчно бърз.

Ако използвате приставка Lighthouse в Google Chrome, може да сте се натъкнали на FCP. Метриката First Contentful Paint измерва времето от момента, в който страницата започне да се зарежда, до момента, в който която и да е част от съдържанието на страницата се визуализира на екрана.

Можете да подобрите FCP, като отложите некритичен JavaScript или CSS. Какво означава това? Просто JavaScript или таблици със стилове, които не е необходимо да присъстват на първото рисуване на вашата страница, трябва да бъдат маркирани с asyncили deferатрибути.

Това гарантира, че по-малко важните ресурси се зареждат по-късно и не блокират първото рисуване. От друга страна, критичните ресурси могат да бъдат включени като вградени скриптове или стилове.

Ако искате да научите повече за това, вече има много страхотни статии за това:

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

Винаги използвайте HTTPS

Вашият уебсайт трябва да е достъпен само през HTTPS връзки в производствена среда. HTTPS подобрява сигурността, поверителността и достъпността на всички сайтове и няма такова нещо като нечувствителен уеб трафик . Стъпките за конфигуриране на уебсайта ви да се обслужва изключително през HTTPS варират значително в зависимост от вашата архитектура и доставчик на уеб хостинг и следователно са извън обхвата на тези документи.

Сайтовете, обслужвани през HTTPS, също трябва да имат достъп до всички таблици със стилове, скриптове и други активи през HTTPS връзки. В противен случай ще изпращате на потребителите смесено активно съдържание , което води до потенциални уязвимости, при които даден сайт може да бъде компрометиран чрез промяна на зависимост. Това може да доведе до проблеми със сигурността и предупреждения в браузъра, показвани на потребителите. Независимо дали получавате Bootstrap от CDN или го обслужвате сами, уверете се, че имате достъп до него само през HTTPS връзки.