Сколько можно подключать js и css?

Question

[Mesuti]

Существует ли какое-то правило по количеству подключенных файлов js и css на html странице?
Либо среди программистов негласное правило?

Верстаю шаблон.
По-началу все хорошо, стандартно jquery и style.css
Дальше гуще.
Слайдер? Нна еще библиотек slider.js slider.css
Эффекты анимации? Нна еще 5 файлов со скриптами стилями.
Еще придумали несколько фишек на сайт? Заберите распишитесь 5 файлов.

ИТОГО: десятки подключенных js и стилей.
Это нормально?

Comments

[Kovalsky]

Ну, что значит нормально - у каждого подхода есть плюсы и минусы.

Всё зависит от условий и задачи: если у вас сайт состоит из одной страницы на которой присутствуют сразу все компоненты, то нет смысла отправлять лишний HTTP запрос на файл для каждого компонента, достаточно собрать один файл стилей/скриптов, который будет включать в себя всё нужное. А если у вас миллион страниц и вам нужна модульность, то само собой придётся всё делить на компоненты и подключать ресурсы только при надобности, в таком случае естественно придётся мириться с тем фактом, что каждый ресурс требует отдельного запроса.

Answer 1

[Андрей Федоров]

Вы все делаете правильно, но не до конца. В проекте у вас в каждой папке свой модуль (такой сущностью может быть хидер, футер, блок авторизации, блок новостей), и в этой папке для модуля лежит свой css, js, графика, шрифты и короче все что нужно. Над всем этим сборщик, некое решение, которое ищет в вашем проекте зависимости и сливает в один файл одного типа, css к css'у, js к js'у. В итоге в продакшене у вас один css (ну или максимум 2, т.к. еще critical path css надо собрать), и один js.

Comments

[Mesuti]

Очень интересное решение.
Скажите, пожалуйста, что за сборщик?
Как он называется?
Изучу тему подробнее..

[Андрей Федоров]

Gulp или Webpack например. А вообще немного иронии - https://habrahabr.ru/post/312022/
ps: )))

[Андрей Федоров]

Вот здесь рассказывают про сборщики https://www.youtube.com/watch?v=uGUZWSdT_fk

Answer 2

[Mesuti]

Или лучше сделать 2 файла, Style.css и Script.js
И все, что появляется закидывать в них?
Чтобы был огромный список с десятками тысяч строк?

Comments

[Иван]

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

Answer 3

[Александр]

Сколько нужно, столько и подключайте.

Comments

[Mesuti]

Если в html файле подключено, допустим 30 других файлов, это отразится на загрузке сайта?
Они все одновременно грузятся?
Насколько понимаю, до полной загрузки сайт будет криво отображаться

[Александр]

Mesuti: они загружаются последовательно. Сайт не отобразиться до полной загрузки скриптов и стилей.

[Froggyweb]

Александр Рябов: только тот контент который идет ниже подключения. Поэтому скрипты переносят вниз. И цсс рекомендуют туда же.

Answer 4

[Максим Софронов]

Существует ли какое-то правило по количеству подключенных файлов js и css на html странице?
Либо среди программистов негласное правило?

Чем меньше, тем лучше.

ИТОГО: десятки подключенных js и стилей.
Это нормально?

Нет, чем меньше, тем лучше.

Answer 5

[Negwereth]

Ну там было ограничение в IE, помню, тысяч в 30, вроде.
Скоро HTTP/2 будет, там этот вопрос не так критичен уже.

Answer 6

[Дмитрий]

В headere не больше 5. Весь js в body. Где возможно используй defer отложенную загрузку. Захерачешь в header js сайт будет долго грузиться.
Убрал все js из hedera скорость возрасла на 30%. Даже bootstrap и ajax убрал. Ну а css залей в один файл свои js тоже а библиотечные в body с отложенный загрузкой хай будут