4

В эпоху всяких gulpов, gruntов, webpackов возникает вопрос: А нужно ли склеивать все файлы стилей?

Насколько мне известно, обработка неиспользуемых CSS-правил занимает какое-то время.

Итак, есть у меня Bootstrap. И есть у меня простая страница контактов. На странице контактов только сетка, пару кнопок и форма, когда бутстрап включает в себя ещё там разные стили для модальных окон, всяких каруселей и другой байды.

Так вот, мне кажется, ведь в 20 раз будет эффективнее вместо одного bootstrap.css, загрузить всего 3 - grid.css, buttons.css и forms.css? В отдельных файлах, а не в одном, чтобы на других страницах grid.css или buttons.css подгрузились из кеша.

Хотя, пока писал это и сам убедился, что будет гораздо эффективнее. Но почему это мало кто использует? Неужели потому, что проще всё сгрузить в один файл, чем в несколько?

7
  • Как именно поверил? И на какой скорости соединения? И 3 файла - это мало, подозреваю, что файлов обычно 50-500. Вот 2 меня 94 scss-файла есть - как предлагаешь их подключать?
    – Qwertiy
    24 мая 2017 в 9:47
  • А если есть только 3 файла, почти нет картинок и скриптов, т. е. суммарно получается меньше 8 соединений, то вполне верю, что пофайлово будет быстрее.
    – Qwertiy
    24 мая 2017 в 9:47
  • Ну да, предполагается http 1.1 или http 2? Во втором случае действительно теоретически должно быть лучше кучей файлов слать, хотя не видел исследований на эту тему.
    – Qwertiy
    24 мая 2017 в 9:51
  • 1
    Проще загрузить один файл пусть в 100кб, чем много-много маленьких. Скорость интернета сейчас огромная, так-что время сейчас уходит больше на сам запрос-ответ с сервера, чем собственно на загрузку
    – Crantisz
    24 мая 2017 в 10:24
  • 1
    @Crantisz, ну у мобилок не очень-то и огромная...
    – Qwertiy
    24 мая 2017 в 12:41

1 ответ 1

1

Это не имеет особого смысла потому-что:

  1. Стили бустрапа весят копейки и никто просто-напросто этим не замарачивается.
  2. Вы не заметите никакой разницы в производительности.
  3. Можно загрузить всего 3 стиля необходимых в вашем проэкте, это называется кастомизация, в bootstrap 3 есть целый раздел где вы выбираете что необходимо вам в вашем проэкте http://getbootstrap.com/customize/ .
  4. В bootstrap 4 такая возможность есть через редактирования файла boostrap.scss. Там c помощью @import подключены отдельные файлы которые отвечают за те или иные вещи, просто напросто их там отключаете и собираете свой новый css скажем через gulp.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.