Перейти к основному содержанию Перейти к навигации по документам
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 "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";

// 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

// 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 в файле 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

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

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

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

Сжатие minify и gzip

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

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

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

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

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