Оптимизация

Полагаться на импорт Sass

При использовании Sass в конвейере ресурсов убедитесь, что Вы оптимизируете Bootstrap, используя только @import компоненты, которые Вам нужны. Ваши самые большие оптимизации, вероятно, будут связаны с разделом Макет & Компоненты нашего bootstrap.scss.

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

Если Вы не используете компонент, закомментируйте его или удалите полностью. Например, если Вы не используете карусель, удалите этот импорт, чтобы сохранить некоторый размер файла в скомпилированном CSS. Имейте в виду, что между импортом Sass есть некоторые зависимости, которые могут затруднить пропуск файла.

Полагаться на JavaScript

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

Например, если Вы используете свой собственный сборщик JavaScript, такой как Webpack, Parcel или Vite, Вы должны импортировать только тот JavaScript, который планируете использовать. В приведенном ниже примере мы показываем, как просто включить наш модальный JavaScript:

// Импортируйте только то, что нам нужно

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

Таким образом, Вы не включаете JavaScript, который не собираетесь использовать для таких компонентов, как кнопки, карусели и всплывающие подсказки. Если Вы импортируете раскрывающиеся списки, всплывающие подсказки или всплывающие окна, обязательно укажите зависимость Popper.js в Вашем файле package.json.

import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))

Автопрефикс .browserslistrc

Bootstrap зависит от Autoprefixer для автоматического добавления префиксов браузера к определенным свойствам CSS. Префиксы продиктованы нашим файлом .browserslistrc, который находится в корне репозитория Bootstrap. Настройка этого списка браузеров и перекомпиляция 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 Tricks о неиспользуемом CSS показано, как использовать PurgeCSS и другие подобные инструменты.

Минификация и сжатие

По возможности обязательно сжимайте весь код, который Вы показываете своим посетителям. Если Вы используете файлы Bootstrap из папки dist, постарайтесь придерживаться минифицированных версий (обозначенных расширениями .min.css и .min.js). Если Вы создаете Bootstrap из исходного кода с помощью своей собственной системы сборки, обязательно реализуйте собственные минификаторы для HTML, CSS и JS.

Неблокирующие файлы

Хотя минимизация и использование сжатия может показаться достаточным, создание неблокирующих файлов для ваших файлов также является большим шагом к тому, чтобы ваш сайт был хорошо оптимизирован и достаточно быстрым.

Если вы используете плагин Lighthouse в Google Chrome, возможно, вы наткнулись на FCP. Метрика The 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-соединения.