Уменьшение размеров JavaScript и CSS файлов.


В данном случае идет речь о минификации, т.е. например удалении лишних пробельных символов и комментариев. Часто используется при подготовки и развертывании систем готовых к промышленной эксплуатации. Конечно, также с целью экономии трафика имеет смысл включать GZIP compression в настройках сервер, но данная статья не об этом.

Минификация – операция довольно рутинная и по-хорошему должна быть автоматизирована и встроена в процесс автоматической сборки.
Тем не менее, иногда возникает необходимость сделать подобную минификацию кода в полевых условиях на сервере заказчика из командной строки.

1. Yahoo! YUI Compressor

Для сжатия сторонних JS или CSS файлов время от времени использую YUI Compressor. Поэтому давно хотел для себя составить небольшой справочник для использования его из консоли в “полевых условиях”.

1. Загрузить можно из github.
2. Запуск:

java -jar yuicompressor-x.y.z.jar [options] [input file]

3. Если не указать выходной файл (-o min.js), то будет вывод в stdout, т.е. на консоль.
Я обычно указываю явно.

# для JavaScript
java -jar yuicompressor-x.y.z.jar -o min.js file.js
# или для CSS
java -jar yuicompressor-x.y.z.jar -o min.css file.css

4. Иногда нужно сжать все CSS-файлы в текущей директории, созданные файлы поместить в директорию “min”
и затем объединить все минифицированные файлы в один “min.css”.
Это довольно распространенный кейс, т.к. на стадии разработки часто используются множество css файлов (удобней разрабатывать), но во время развертывания финальной версии файлы сливаются в один с целью ускорения загрузки.

Приведу пример только для Windows (т.к. в Linux как всегда подобные действия не предоставляют особого труда).

rem создаем директорию. проверьте, что такой директории не существует.
MKDIR min
rem сжимаем все файлы
FOR %F IN (*.css) DO java -jar yuicompressor.jar "%F" -o "min/%F"
rem объединяем все файлы в один
COPY /b min\*.css .\min.css

В случае создания bat-файла, нужно помнить что символ “%” необходимо заменять на “%%”. Это специфика батников.

FOR %%F IN (*.css) DO java -jar yuicompressor.jar "%%F" -o "min/%%F"

Для JavaScript-файлов аналогично, только вместо “css” будет “js”.

2. Google Closure Tools

Когда задача стоит не сжимать уже готовые, кем-то написанные javascript файлы, а идет работа над своими JavaScript-кодом, то я бы рекомендовал попробовать Closure Compiler.closure
Я его использую при написании более-менее крупных JavaScript-движков (для файлов содержащих более 1000 строк кода).

Кроме сжатия и оптимизации JS-файлов, на мой взгляд большую пользу приносит его возможности по проверки или валидации исходного JavaScript кода.

Можно добавлять аннотации с помощью которых маркировать переменные как константы, указывать тип, функцию-конструктор и т.д. Соответственно при сборке эта информация будет использоваться и в случае обнаружения каких-то проблем будут выдаваться ошибки или предупреждения.

Любое использование либо копирование материалов или подборки материалов сайта, элементов дизайна и оформления допускается лишь с разрешения правообладателя и только со ссылкой на источник: programador.ru

Телеграм канал: @prgrmdr
Почта для связи: vit [at] programmisty.com