Оптимизация

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

На этой странице

Облегченный импорт Sass

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

scss/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) с нашими bundle файлами (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 в вашем файле package.json.

Внимание! Файлы в bootstrap/js/dist используют экспорт по умолчанию. Чтобы их использовать, делайте следующее:

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

Autoprefixer .browserslistrc

Bootstrap зависит от Autoprefixer для автоматического добавления префиксов браузеров к определенным CSS свойствам. Префиксы диктуются нашим файлом .browserslistrc, находящимся в корне репозитория Bootstrap. Настройка этого списка браузеров и перекомпиляция Sass автоматически удалит некоторый CSS из вашего скомпилированного CSS, если есть вендорные префиксы, уникальные для этого браузера или версии.

Неиспользуемый CSS

Нужна помощь с этим разделом, пожалуйста, рассмотрите возможность открытия PR. Спасибо!

Хотя у нас нет готового примера использования PurgeCSS с Bootstrap, есть несколько полезных статей и пошаговых руководств, которые написало сообщество. Вот несколько вариантов:

Наконец, эта статья CSS Tricks о неиспользуемом 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

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

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