Автоматическое сжатие JS / CSS на сервере
30 ноября 2013 JavaScript 11456 просмотров
От размера JS и CSS файлов (и не только их, но рассмотрим их как основные) зависит время загрузки страницы. И если мы уж говорим о производительности, то нужно сделать размер этих файлов минимальным. Конечно, их размер в основном зависит от требований и логики, которую они выполняют. Но опустим этот этап. Программисты любят покрывать свои классы JSDoc, писать потрясающие стихи-комментарии и ставить кучу пробелов.

Так как JS - язык интерпретируемый а не компилируемый, то всю эту красоту клиент будет загружать при посещении страницы. Поэтому нашей целью будет отдавать пользователю сжатую версию сайта. Но как это сделать, чтобы было удобно разрабатывать? Т.е. чтобы в проекте у нас были dev версии файлов, с отступами и т.д. А сервер отдавал min версии.

Существует много библиотек/сервисов, которые помогают сжать онлайн/программно ваши frontend-файлы. Например: YUI, Minify, JS Min, JS Comressor, Google Closure.

Если у вас в системе один файл, то можно его сжать вручную через веб-интерфейс, но даже и это не сильно удобно. Я предлагаю такое решение. В проекте (читай CVS) будут лежать dev файлы, а при обновлении сервера (читай git pull) dev файлы будут сжиматься автоматически.

Выбор инструмента

Мне понравился YUI Compressor, у него простая документация, есть как веб-сервис, так и cmd-решение. Это библиотека от Yahoo, позволяет сжимать CSS и JS. Для ее работы вам нужно установить на сервер java, если еще не установлено.

Как определить, что сервер обновился и нужно запустить compressor? Я поступил просто: так как обновление в себя включает уже не просто git pull, то можно объединить все действия по обновлению и запускать один скрипт. Назовем его update.sh.
#!/bin/sh

# Забираем последний коммит
cd /var/www/project
git stash
git pull
В этом же файле и будет сжатие наших файлов. git stash здесь я сделал для того, чтобы не было вопросов о том, что файлы изменены, они просто перезапишутся при обновлении, а потом сожмутся.
YUI=/bin/yui.jar

cd /var/www/project/www/css
for file in *.css; do
    java -jar $YUI "$file" -o "$file"
done

cd /var/www/project/www/js
for file in *.js; do
    java -jar $YUI "$file" -o "$file"
done
Здесь мы просто пробегаем по всем файлам из папки, дополнительно проверяя расширение. Дополнительные опции вы всегда можете прикрутить сами, на сайте YUI Compressor есть несложная документация.

Вот такой простой способ автообновления и автосжатия. Мир!