Оптимизация JavaScript - делаем билд процесс

В моем проекте очень много классов взаимодействуют на клиентской части. Каждый класс лежит в отдельном файле для удобства разработки. Хорошей практикой для увеличения скорости загрузки страницы, является уменьшение количества запросов к серверу. Поэтому чем меньше файлов ирисунков включать в страницу тем быстрее она загрузится. В случае с рисунками – СSS спрайты помогут уменьшить количество запросов. А в случае с js и css файлами – это конкатенация файлов и сжатие. Об этом и поговорим.

Очень удобный инструмент с открытым исходным кодом js-builder

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

В моем проекте я использую библиотеку prototype.js. Билдер при сжатии прототайпа выдает эксепшн. Поэтому я скачал исходники и перебилдил так чтоб билдер занимался только конкатенацией без сжатия. Я перебилденную длл, можно скачать тут

Билдер также содержит консольное приложение. А это то что нужно для билда.

Далее необходимо сделать компрессию файлов которые сгенерирует билдер.

Для этой цели я использовал YUI Compressor. Отличная библиотека с высокой степенью сжатия.

Осталось только как то автоматизировать процесс сборки. Для этого я написал batch файл (я в виндовс работаю).
Выглядит он (build.bat) примерно так

<br />
set path1=D:Projects build </p>
<p>%path1%JSBuilderJSBuildConsole.exe /path=%path1%MyHeritageBuild.jsb </p>
<p> java -jar %path1%yuicompressor-2.3.1buildyuicompressor-2.3.1.jar<br />
%path1%buildoutput_file_from_js_builder.js -o %path1%target-min.js </p>
<p>java -jar %path1%yuicompressor-2.3.1buildyuicompressor-2.3.1.jar<br />
%path1%buildstyle-all.css -o %path1%style-all-min.css<br />

В моем случае джс билдер на выходе дает 2 файла - css и js, а компрессор и сжимает.
Надеюсь это поможет вам создать удобный процесс сборки файлов.

Автор: http://www.kigorw.com/