Вы здесь

Advanced CSS/JS Aggregation

Сбор и сжатие несколькоих CSS- и JS-файлов в один.

Модуль Advanced CSS/JS Aggregation позволяет собирать и оптимизировать .css- и .js-файлы сайта. Если вы хотите, чтобы страницы вашего сайта загружались быстрее, установите этот модуль. Он содержит 6 подмодулей:

  • AdvAgg Bundler: умная группировка .css- и .js-файлов на основе связей друг с другом на определённых страницах
  • AdvAgg Compress CSS: сжатие CSS с использованием стороннего компрессора (в настоящее время это CSSTidy)
  • AdvAgg CDN Javascript: использование общей CDN для библиотек JavaScript (в настоящее время это Google Libraries API)
  • AdvAgg Compress Javascript: сжатие JavaScript с использованием стороннего компрессора (в настоящее время это JSMin+)
  • AdvAgg Modifier: Allows one to alter the CSS and JS array
  • AdvAgg CSS/JS Validator: Validate the CSS & JS files used in Aggregation for syntax errors

Advanced CSS/JS Aggregation совместим со следующими модулями:

Если у пользователя есть право bypass advanced aggregation, то добавление записи ?advagg=0 в конец URL выключит сбор файлов для этого запроса (удобно для отладки кода на основном сайте). .css-файлы размещаются в папке files/advagg_css, .js-файлы размещаются в папке files/advagg_js.

Возможности

  • Сбор стилей и скриптов модуля ImageCache. Если файла не существует, то он будет создан по требованию
  • Защита сбора файлов. Используется блокировка, таким образом, при множестве запросов к одной вещи, будет выполнен только один поток работы
  • Нулевой I/O, если собранный файл уже существует. В результате уменьшается время генерации страницы
  • Полное кеширование CSS/JS позволяет этому модулю работать быстрее ядра Друпала
  • Умное удаление собранных файлов. Файл удаляется только в том случае, если он не запрашивался более 3 дней
  • Умная очистка кеша. Сканируются все собранные CSS/JS-файлы и если какой-то внутренний файл был изменён, то перестраиваются только сборки, содержащие этот файл, а сборка генерируется с новым именем. Новое имя гарантирует, что при использовании CDN файл будет обновлён на удалённых серверах
  • Работа с закрытой файловой системой Друпала. Модуль использует для этого отдельную папку для собранных файлов
  • В собранный файл включается JS из нижней колонки
  • JS может быть добавлен в любой регион и он будет включен в собранный файл. Возможно использование drupal_add_js($data, 'module', 'left'); JS добавляется в конец региона
  • Можно добавлять CSS/JS с внешних ресурсов: drupal_add_js('http://example.org/example.js', 'external'); drupal_add_css('http://example.org/example.css', 'external');
  • Строка запроса URL для отключения сборки файлов по запросу. ?advagg=0 выключит сбор для пользователей с правом bypass advanced aggregation. ?advagg=-1 приведёт к обходу всех подмодулей Advanced CSS/JS Aggregation
  • Кнопка для сброса куки, которая будет выключать сбор файлов. Удобно при разработке темы
  • Строка запроса URL для включения отладки. ?advagg-debug=1 выведет большую строку отладки для журнала, если у пользователя есть право bypass advanced aggregation
  • Поддержка Gzip. Все собранные файлы могут быть упакованы в .gz-файлы и отданы Apache. Это быстрее чем упаковка файла для каждого запроса
  • Поддержка браузером IE неограниченного количества CSS. Если используется ?advagg=0, то измениться запись @import, с помощью которой можно импортировать не более 31 файла CSS
  • Поддержка модуля CDN
  • Поддержка модуля jQuery Update
  • Установка времени жизни кеша в браузере равной одному году для всех собранных файлов. Это хорошая идея
  • Поддержка модуля Drush. Использование cc advagg приведёт к умной очистки кеша
  • Поддержка модуля Administration menu. В меню Flush all caches доступна очистка файлов, которые сгенерированы этим модулем

Если используется код для файла .htaccess (смотрите ниже), то на странице настройки модуля можно отключить пункт Generate .htaccess files in the advagg_* dirs.

При использовании подмодуля AdvAgg Bundler, такие инструменты как Google Page Speed и YSlow будут жаловаться, что не все CSS/JS файлы собраны в один файл. Это связано с работой drupal_add_js()/drupal_add_css(). Можно улучшить скорость загрузки страниц разместив все CSS/JS-файлы в одной сборке, но на разных страницах отдаётся разное количество файлов, таким образом, на странице, которую посещают 2 человека, вы получите худшую производительность, потому что браузер должен будет перезагрузить новую сборку CSS/JS-файлов, вместо загрузки маленькой сборки с неизменившимися в ней файлами. Модуль пытается работать с этой проблемой, создавая различные связки, чтобы вместо загрузки 200-килобайтного .js-файла отдавать 20-килобайтный файл для второй второй страницы.

Для Advanced CSS/JS Aggregation достаточно запуска cron раз в неделю; cron может запускаться и каждый час, но это не нужно.

Для переключения параметров Advanced CSS/JS Aggregation через URL, можно пользоваться следующим букмарклетом:

javascript:(function(){var loc = document.location.href,qs = document.location.search,regex_off = /\&?advagg=-1/,goto = loc;if(qs.match(regex_off)) {goto = loc.replace(regex_off, '');} else {qs = qs ? qs + '&advagg=-1' : '?advagg=-1';goto = document.location.pathname + qs;}window.location = goto;})();

Технические подробности:

  • Модуль создаёт и использует 2 таблицы в базе данных для своей настройки и ещё 2 таблицы для кешируемых данных
  • Файлы генерируются по следующему образцу: css_[MD5]_[счётчик].css
  • Каждый .js-файл тестируется на сжимаемость. Это необходимо, так как jsmin+ может запускать для определённых файлов из памяти. Это позволяет найти плохие файлы и отметить их, а также пропускать файлы, которые уже сжаты

Комментарии

Изображение пользователя Василий

Подскажите, пожалуйста, каким образом можно добавлять CSS/JS с внешних ресурсов - где именно прописывать эту команду?

Изображение пользователя drupal.org.ru

http://xandeadx.ru/blog/drupal/398 (куда добавлять сказано в комментариях).