Какой способ подключения CSS и JS лучше?

Question

[Jimmy Exploit]

Файлы стилей и скриптов можно подключить по отдельности, но как пишут знатоки - лучше сократить количество подключаемых файлов, чтобы сократить количество запросов на сервер. CSS можно подключать друг к другу с помощью import. Можно конкатенировать при сборке все файлы в один style.css или script.js, но потом в случае чего разбивать файл для новой разработки - лишний труд. На мой взгляд, лучше всего использовать php функцию include и подключать файлы между тегами style и script, т.е. их формальная конкатенация происходит на сервере. Какой метод подключения, на ваш взгляд, обеспечивает наилучшую производительность?

Answer 1

[gleendo]

По идеи должны быть 2 директории, одна для разработчика, другая для пользователя, т.е продакшн версия.
Лучше всего использовать препроцессоры, делать файловую структуру, подключая через import все файлы в один и компилировать его в продакшн версию.
К странице в идеале подключать один минимизированный файл со стилями и также файл со скриптами.

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

PS. Для компиляции, сборки и т.д лучше использовать сборщики для автоматизации, например тот же gulp

Answer 2

[Максим]

вы даже сами попробуйте так , просто на рабочем столе подключите всего один css и в него через import ещё 20 , увидите как статичная страница будет грузится как будто она на в кучами эффектов ,.
В общем не изобретайте велосипед и порядок приоритетов вам известен ?
inline style приоритет №1
встроенные стили №2
отдельный стиль №3
import очень затормаживает загрузку

Answer 3

[xmoonlight]

1. На PHP: делаем merge всех стилей в ДВА файла:
1.1 Critical CSS (для всех страниц), минифицируем и вставляем inline-ом в head.
1.2 Additional CSS (для КОНКРЕТНОЙ! страницы или единый для всех): также, минифицируем и кэшируем на сервере, вставляем перед закрывающимся тэгом BODY.
2. Include-ом на PHP: расставляем в шаблон и отдаём страницу.
3. Не забываем настроить время кэширования Additional CSS в заголовках сервера.

Тоже самое проделываем с JS, кроме того, что Critical JS - лучше избегать.
Все сторонние скрипты - грузим после своих (с нашего домена) и в асинхронном режиме. (defer)