В предыдущей статье я писал о том, как фреймворк Moff.js может облегчить создание Mobile First страницы без использования CSS фреймворка.
Но на сегодняшний день большенство проектов используют какие либо CSS фреймворки и одним из таких фреймворков является Bootstrap. Смело можно утверждать, что Bootstrap является самым популярным Mobile First фреймворком.
Cамым большим недостатоком этого фреймворка является его размер. Даже минифицированная версия весит 154.9KB и это только CSS и JS файлы.
Зачастую разработчикам нужна только часть функционала, но подключают они весь фреймворк целиком. И поэтому пользователям мобильных устройств приходится загружать большой объем лишнего трафика. Решением этой проблемы было разделение фреймворка на группы из часто и не часто используемых модулей, которые удобно использовать в Mobile First подходе. Каждая из этих групп была вынесена в виде отдельного модуля в Moff.
Все модули разбиты на три категории:
- Main
- Components
- JavaScripts
В категории Main находятся следующие модули:
- Buttons – Отвечающий за стилизацию кнопок
- Core – Содержащий в себе все базовые стили
- Forms – Отвечающий за формы
- Glyphicons – Стили иконок glyphicons
- Grid – Система сетки
- Tables – Таблицы
- Typography – Типографика
Категория Components содержит все Bootstrap компоненты: Alerts, Badges, Breadcrumbs, Button groups, Dropdown и тд.
Категория JavaScripts содержит все JS модули Bootstrap: Affix, Alert, Button, Carousel и тд.
Подробный список модулей можете прочитать на странице Moff.
Способы использования модулей
Mодуль Core является базовым и подключается на все станицы как основная зависимость для всех остальных модулей.
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css">
Он состоит из следующих Bootstrap Sass модулей.
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed';
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close';
Остальные модули можно подключить двумя способами.
AMD (Asynchronous module definition)
Moff.amd.register({
id: 'grid',
depend: {
js: ['bower_components/moff/dist/bootstrap/javascripts/button.js'],
css: [
'bower_components/moff/dist/bootstrap/main/grid.css',
'bower_components/moff/dist/bootstrap/components/pagination.css',
]
},
file: {
js: ['modules/listing.js'],
css: ['modules/listing.css']
},
loadOnScreen: ['md', 'lg'],
onWindowLoad: false
});
После регистрации модуля нужно его загрузить, что бы начать использовать. Загрузить его можно двумя способами:
с помощью AMD
Moff.amd.include('grid');
или использовав Data Events
<a href="listing.html" data-load-target="#grid-target" data-load-module="grid">Show listing</a>
<div id="grid-target"></div>
HTML
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css">
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/grid.css">
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/typography.css">
У обоих подходов есть недостаток. Это большое количетво времени на HTTP соединение из-за множества файлов. Но эта проблема первой загрузки, в дальнейшем файлы загрузятся из кэша. Решением может быть объединение файлов. В данный момент это можно сделать вручную, но в дальнейшем планируется создать CLI для Moff, который будет решать подобные задачи.
P.S. Модульная версия Bootstrap в Moff помогает загрузить только необходимые части фреймворка для облегчения объема страницы.
Комментарии (12)
Alexufo
17.11.2015 04:54+1От бутстрапа зачастую нужно то всего лишь это github.com/zirafa/bootstrap-grid-only
Я все равно в поиске решений нахожусь, так как иногда склоняюсь к мобильным версиям сайтов, которые контролировать по трафику можно куда проще. И решение часто выходит из человеческого окружения. Если ваш коллега сверху полоумен, вы десять раз подумаете связываться ли отзывчивостью.
Минусов хватает. Дизайн нужно упрощать, дабы понимать как его сжимать под экран, потом он становится похожим на все другие сайты. Уж тем более на полном фреймворке. А трафика из за картинок не уменьшается особого, а контроля над всяким барахлом, который на мобиле не сдался — почти никакого нет.
Вот появляются да всякие enquire.js Moff.js Подключишь. Через полгода либы эти переписываются, а обновлять менять уже не охота. А как вспомнишь. что оно такое не одно, так сразу тоска и фрагментация внимания. Толи дело мобильная тема, когда сайт поддерживает темы очень легко. Ужал по самое не могу, переподключил что хочешь. Картинки отдаешь или не отдаешь… А с другой стороны, мобилку купил новую, да и крутись все конем «у меня не тормозит».
DenimTornado
17.11.2015 11:33Хм, а я вот не согласен, от бустрапа чаще всего надо как раз таки его фреймворкность. Есть морда, натянул туда бутстрап и всё, всё красиво, всё работает.
Alexufo
17.11.2015 11:50+1для админки? ради бога тока за. Но как бы цель любого проекта быть запоминающимся. Тут и без бутстрапа многие адаптивные сайты, как одним мурлом сделанны.
DenimTornado
17.11.2015 11:52А да, прошу прощения, у меня просто админка == бутстрап) Про запоминаемость согласен, хотя это не всегда хорошо. Если запомнили как плохой пример)
ZoomLS
18.11.2015 04:59Ещё есть UnCSS для Gulp и Grunt, который удаляет неиспользуемые стили. Всяко можно и как дополнение к подходу статьи использовать.
kfuzaylov
18.11.2015 11:45Спасибо и в правду полезная вещь.
Но в текущей сутации цель была в том, что бы контролировать подключение модулей во всем проекте.
А с UnCSS будет сложно это сделать.
lavkasnov
А имеет ли смысл такое разбиение? Вот к примеру фотки jpg будут всяко больше бутстрапа и ничего, браузер нормально живет. Есть ли какие то оценки с цифрами, которые бы показали увеличение производительности.
cynovg
Мало того, использование cdn так же нивелирует этот недостаток.
selitskas
А ещё самостоятельная сборка Bootstrap с выкидыванием ненужного и gzip.
kfuzaylov
Спасибо за коммент. Дало над чем поразмыслить.
kfuzaylov
Картинки должны быть адаптированными для мобильных устройств и тогда они будут легковесными. Но а если картинка очень тяжелая, то нужно думать как переиграть в дизайне мобильной версии сайта, что бы не показывать ее. Т.к. использование тяжелой картинки противоречит Mobile First подходу.
Оценки с цифрами будут зависеть от конкретного случая. Но чаще всего лучше загрузить нужные ~30кб, чем все 154.9кб.