Оптимизировать

Lean Sass импортирует

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

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

Таким образом, вы не включаете JavaScript, который не собираетесь использовать для таких компонентов, как кнопки, карусели и всплывающие подсказки. Если вы импортируете раскрывающиеся списки, всплывающие подсказки или всплывающие окна, обязательно укажите зависимость Popper в своем 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 и другие подобные инструменты.

Минификация и gzip

По возможности обязательно сжимайте весь код, который вы предоставляете своим посетителям. Если вы используете дистрибутивные файлы 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-некритический-css/

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

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

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