Оптимизация

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

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 "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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

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

Бережливый JavaScript

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

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

// Import just what we need

// If you're importing tooltips or popovers, be sure to include the Popper.js dependency
// import "../../node_modules/popper.js/dist/popper.min.js";

import "../../node_modules/bootstrap/js/dist/util.js";
import "../../node_modules/bootstrap/js/dist/modal.js";

Таким образом, вы не включаете JavaScript, который не собираетесь использовать для таких компонентов, как кнопки, карусели и всплывающие подсказки.

Autoprefixer .browserslistrc

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

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

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

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

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

Минимизировать и сжать

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

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

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

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

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

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