Объединение CSS файлов на DLE

41. Из скрипта было убрано сжатие JS и CSS файлов при помощи PHP. Данная функция глобально устарела и использование PHP в актуальных реалиях не эффективно. Для сжатия статических файлов мы рекомендуем включать для этого сжатие файлов серверными средствами, например в Nginx. Это более эффективно, работает быстрее и потребляет намного меньше серверных ресурсов.

Подход «разделяй и властвуй» для CSS/JS сейчас считается лучшей практикой, и вот основные причины, почему не стоит слепо объединять все файлы в один, а лучше разбивать на модули:

1. Кэширование и обновления
— Проблема объединения: При изменении даже одной строки кода у пользователя инвалидируется кэш всего огромного объединенного файла, и он качается заново целиком.
— Преимущество разделения: Меняется только тот модуль, который был обновлен. Пользователь перекачивает 2-3 КБ вместо 200 КБ.

2. Загрузка по необходимости (Code Splitting)
— Ленивая загрузка: Зачем грузить CSS для админ-панели обычному пользователю? Или JS для страницы оплаты на главной?
— Модульность: Современные сборщики (Webpack, Vite) позволяют динамически подгружать код только когда он нужен.

3. Параллельная загрузка
Современные браузеры могут загружать до 6-8 файлов параллельно с одного домена. Несколько мелких файлов могут загружаться быстрее, чем один большой (особенно с HTTP/2).

4. HTTP/2 и мультиплексирование
— HTTP/1.1: Каждый файл — отдельное соединение (отсюда и совет объединять).
— **HTTP/2+: ** Множество файлов передаются в рамках одного соединения параллельно без оверхеда. Объединение теряет смысл и даже вредит.

5. Разделение ответственности
— Поддержка: Легче найти стили конкретного компонента в `component/button.css`, чем в 5000-строчном `all.css`.
— Работа в команде: Меньше конфликтов в Git, разные разработчики могут работать над разными модулями.

6. Tree Shaking
Современные сборщики могут удалять неиспользуемый код. Если у вас монолитный файл, невозможно определить, какие части действительно нужны для конкретной страницы.

7. Приоритизация загрузки
Вы можете контролировать порядок и приоритет:

<!-- Критический CSS сразу в head -->
<style>/* above-the-fold styles */</style>

<!-- Остальное асинхронно -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

Когда объединение всё же нужно:

1. Для старых браузеров без поддержки HTTP/2
2. Очень мелких файлов (если их десятки, иногда лучше объединить)
3. Критического CSS для первой отрисовки (но это отдельная история)

Современный подход:
1. Разделение на компоненты/модули
2. Сборка через Webpack/Vite/Parcel
3. Автоматическая оптимизация:
— Code splitting по страницам/роутам
— Tree shaking
— Ленивая загрузка
— Preload/Prefetch для критических ресурсов

Итог: Не объединяйте вручную. Используйте современные сборщики, которые сделают интеллектуальное разделение и объединение там, где это действительно нужно для производительности.