Bootstrap является одним из самых популярных HTML, CSS, и JS библиотек. В продолжение статьи “1С-Битрикс и AMP страницы” нужно рассмотреть одно из главных ограничений технологии на размер стилей, которые можно подключить в секции head страницы.
Bootstrap JavaScripts
Bootstrap это прежде всего верстка и стили, но если есть возможность использовать уже готовые модальные окна, аккордионы и слайдеры - то почему бы и нет? Нет, так как AMP страницы не поддерживают собственные js скрипты.
50Кб стилей и не более
Другими словами, файл Bootstrap стилей, который более 250Кб использовать нельзя. А ведь у каждого сайта свой шаблон и свои стили, которые тоже могут занимать больше 50Кб.
Что делать в таком случае? Для версии Bootstrap 3.4.1 доступна возможность собирать библиотеку из исходников и взять только нужные компоненты. Так можно было сильно сократить размер подключаемых файлов. Но, для четвертой версии сборщика нет, поэтому делать это нужно вручную.
Студия Реймакс использует gulp для сборки проектов. Поэтому пример будет дан именно для него. Вот карта нужных scss файлов, которые позволяют сократить размер Bootstrap стилей до 40Кб.
// подключение нужных SCSS исходников Bootstrap 4 @import "../bootstrap/scss/_functions"; @import "../bootstrap/scss/_variables"; // Vendor @import "../bootstrap/scss/vendor/rfs"; // Deprecate @import "../bootstrap/scss/mixins/deprecate"; // Utilities @import "../bootstrap/scss/mixins/breakpoints"; @import "../bootstrap/scss/mixins/hover"; @import "../bootstrap/scss/mixins/size"; @import "../bootstrap/scss/mixins/reset-text"; @import "../bootstrap/scss/mixins/text-emphasis"; @import "../bootstrap/scss/mixins/text-hide"; @import "../bootstrap/scss/mixins/text-truncate"; @import "../bootstrap/scss/mixins/visibility"; // // Components @import "../bootstrap/scss/mixins/pagination"; @import "../bootstrap/scss/mixins/lists"; // // Skins @import "../bootstrap/scss/mixins/background-variant"; @import "../bootstrap/scss/mixins/border-radius"; @import "../bootstrap/scss/mixins/box-shadow"; @import "../bootstrap/scss/mixins/gradients"; @import "../bootstrap/scss/mixins/transition"; // // Layout @import "../bootstrap/scss/mixins/clearfix"; @import "../bootstrap/scss/mixins/grid-framework"; @import "../bootstrap/scss/mixins/grid"; @import "../bootstrap/scss/_reboot"; @import "../bootstrap/scss/_type"; @import "../bootstrap/scss/_grid"; @import "../bootstrap/scss/_breadcrumb"; @import "../bootstrap/scss/_pagination"; @import "../bootstrap/scss/_media"; @import "../bootstrap/scss/utilities/clearfix"; @import "../bootstrap/scss/utilities/display"; @import "../bootstrap/scss/utilities/text"; @import "../bootstrap/scss/utilities/visibility";