Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Оптимизация

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

Импорт 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 "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 and 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

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

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

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

Сжатие minify и gzip

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

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

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

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

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