Объединение CSS/JS в один файл?

Question

[Денис]

Насколько правильно выглядит объединение CSS/JS файлов в один (*css/*js)?

Допустим к проекту подключаются css:

1. Bootstrap.css
2. Font Awesome.css
3. Собственные стили

И JavaScript:

1. JQuery.js
2. Bootstrap.js
3. Собственные скрипты

Затем всё это объединяется в один файл style.css и plugin.js с последующим сжатием и подключается к сайту.
Смешивание фреймворка, иконок, собственных стилей/скриптов в моём примере допустимо? Или всё же лучше подключать по отдельности?

Answer 1

[bernex]

Как я понял предполагается инжекция css + js в результирующий html.

Смысла я в этом не вижу. Сжатие и объединение файлов полезно для уменьшения количества запросов и уменьшения размера. И сохраняется возможность его брать из кэша, при повторном обращении.
Если у вас на всех страницах он будет в теле страницы, то этот объём будет каждый раз загружаться.

Если у вас single-page application, то тут по сути можно и так сделать, но зачем не нахожу плюсов.
Сейчас есть http2/spdy и можно вообще хоть и немного но расслабиться.

А так в целом, gulp и сжатие отдельно css вендоров и свои, js вендоров и свои.
Свои собираете когда что-то правите, файлы вендоров когда обновляются библиотеки.
Некоторые библиотеки(jQuery) рекомендуется брать из общих CDN, есть большая вероятность что они уже будут в кэше и по сути все будет моментально.

Answer 2

[yesworld]

Лично у меня галп настроен таким образом:
Собирает файлы по частям и обфусцирует в один или несколько в зависимости от того, где они нужны. При этом ты можешь проводить тесты. Так что полностью поддерживаю vvvadimos и Wheelie.

Comments

[Денис]

Т.е. если я использую Gulp, то можно собирать библиотеки bower, собственные стили, в один файл и подключать к сайту без каких либо последствий? Допустим стили фреймворка и иконок собрать в один файл и всё будет работать?

[yesworld]

Денис: Вы то ли не верно уловили суть работы галпа, то ли мои лыжи не едут. = ) Грубо говоря, вы через запятую указываете все файлы js, так же указываете где лежат все файлы ксс, отдельно шрифты, а в моем случае так же шаблоны и получаете собранные файлы. Как вы говорите "Затем всё это объединяется в один файл style.css и plugin.js с последующим сжатием и подключается к сайту."

Так же можете работать с рисунками и создавать например спрайты.
https://habrahabr.ru/post/227945/

Вы просто начните с малого, попробуйте пару файлов обфусцировать и так уже все станет на свои места.

[Денис]

yesworld: Нет, я думаю мы говорим об одном, только я немного не так разъясняюсь.
Допустим. Мы плагином конкатенации соберем все файлы из папки css в один *.css а из папки js в файл *.js. Помимо прочего подключим допустим риггером библиотеки скаченные bower, всё это пропустим через задачу gulp, с параллельной минификацией, пропишем карты и тп и тд если нужно, а на выходе получим по одному файлу css и js. Я всё правильно истолковал?
Соответственно если правильно, то будут ли эти действия правильные и полученный файл будет аналогичен так же если бы мы подключили 5,10,15 и тд файлов раздельно

Просто начал изучать gulp и столкнулся с тем что для меня в новинку по сути, во многих статьях все файлы соединяют в один и затем его подключают, не взирая на то что было в изначальных, jquery, собственные скрипты или ещё что либо.
Я всегда думал что лучше если подключать jquery то отдельным файлом, а свои скрипты выносить в другой, но с gulp выходит можно всё объединить и получить тот же результат.

[yesworld]

Денис: Я всё правильно истолковал? --- Да
будут ли эти действия правильные и полученный файл будет аналогиче --- Да, если ты даже минифицируешь/обфусцируешь код.
Я всегда думал что лучше если подключать jquery то отдельным файлом, а свои скрипты выносить в другой, но с gulp выходит можно всё объединить и получить тот же результат. --- Ты к примеру можешь так же выводить 2 файла js.
1 это файл собранных библиотек (jQuery, kendo, moment, backbone)
2 твой код. При таком подходе, ты будешь видеть в консоли, в каком файле ошибка. Главное свой код нужно правильно инкапсулировать, чтобы не было глобальных переменных.

[yesworld]

Денис: Имей ввиду, если ты минифицируешь свой код, то это хорошо скажется на PageSpeed от гугла, следовательно положительно скажется на СЕО. Я делал так - на локальном компе у тебя не сжатый код, что упрощает отладку, а на сервере уже цепляешь файлы с .min.js

Answer 3

[vvvadimos]

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

Answer 4

[Dmitry Pavlov]

Не надо смешивать. Подключайте все отдельно - проще будет обновлять на новые версии. Если хочется жать - пользуйтесь утилитами, которые это делают при подготовке файлов проекта к деплою.

Comments

[Денис]

Про обновление как бы речь не идет, это уже другой вопрос. Суть в том на сколько правильно, логично и целесообразно объединять несколько файлов в один, за исключением конечно того что это экономит количество запросов.

[Dmitry Pavlov]

Денис: если деплоить веб приложение которое пользует огромное количесво пользователей - наверное все засунуть в один (или минимальное количество) файлов. Но это если и делать, то на шаге подготовки файлов для деплоя. Каким-то тулом, прицепленным к вашей IDE. Который в том числе еще и минифицирует и пожмет ваш файл. В процессе разработки лучше пользовать не минифицированные версии библиотек раздельно, для целей отладки и более удобной разработки.

Чтобы ответить на ваш вопрос - попробуйте и замерьте насколько ваши страницы грузятся быстрей. Ощутимо ли это ускорение загрузки. Насколько сложно будет сделать так, чтобы все собиралось в кучу. Насколько это нужно вашим пользователям (то бишь критично). Ну и сделайте вывод - стоит овчинка выделки или нет.

Ссылка с которой можно почитать мнения на это счет - stackoverflow.com/questions/15236767/one-big-javas... (походите также по дубликатам вопроса и их комментам).

[Dmitry Pavlov]

Dmitry Pavlov: https://developers.google.com/speed/docs/insights/...

Answer 5

[Wheelie]

gulpjs.com

Answer 6

[Zhainar]

По отдельности.