Оптимизация

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

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

Основываясь на Sass импорте

При использовании Sass в конвейере ресурсов убедитесь, что вы оптимизируете Bootstrap используя нужные вам компоненты только с @import. Ваши самые большие оптимизации, скорее всего, появятся в разделе Разметка и Содерожание нашего 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";

Если вы не используете компонент, закомментируйте его или полностью удалите. Например, если вы не используете карусель, удалите этот компонент, чтобы сохранить малый размер файла в скомпилированном 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 '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.js в Вашем файле package.json.

Экспорт по умолчанию

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

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

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

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

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

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

Раздел будет дополнен в будущем.

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

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

Минимизация и сжатие

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

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

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

Если вы используете плагин Lighthouse в Google Chrome, возможно, вы наткнулись на FCP. Метрика The First Contentful Paint измеряет время с момента начала загрузки страницы до того, как на экране отобразится какая-либо часть содержимого страницы.

Вы можете улучшить FCP, отложив некритичный JavaScript или CSS. Что это обозначает? Просто JavaScript или таблицы стилей, которые не обязательно должны присутствовать при первом отрисовке вашей страницы, должны быть помечены атрибутами async или defer.

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

Если Вы хотите узнать об этом больше, об этом уже есть много отличных статей:

Всегда используйте протокол HTTPS

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

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