Оптимизация JavaScript

Из множества идей касательно темы для своей статьи я решил выбрать довольно баянную, но раскрытую для себя именно «опытным путем» тему об оптимизации клиентского JavaScript’а уже для сайта в бою.

Переходим к делу

К детальному изучению этого вопроса я пришел давно, когда создавалось собственное AJAX приложение. А правильное для себя решение было найдено относительно недавно, с ним и хочу поделиться с вами. В приложении применялась так-же технология flash и присутствовало изобилие .gif картинок, а база данных хранилась в массивах. Что ставило вопрос об оптимизации javascript ребром. В довесок ко всему перечисленному приложение размещалось на не дорогом хостинге, который при больших нагрузках вел себя не предсказуемо.

После готовности приложения и оптимизации в непосредственно самом JavaScript у меня оставалось несколько подключаемых к страничке скриптов:

1. Библиотека jQuery 1.5.1 (83.2 кб)
2. Плагин jQuery Cookie (732 б)
3. Плагин jQuery haschange (16.4 кб)
4. Плагин jQuery Ui Custom (20.2 кб)
5. база данных в виде массивов (155.3 кб)
6. functions приложения (63.1 кб)

Вопрос стоял в том, что-бы объединить все вышеперечисленные скрипты в один и при-этом минимизировать их. В довесок в базах данных было много текста кириллицей.

В поле моего зрения попало два хороших сервиса: Closure Compiler и bananascript.

В каждом из них на первый взгляд я нашел свои минусы:
Первый приводит кириллицу в юникод NFC, что резко увеличивает объем файла с кириллическими данными, но с объединением всех файлов скриптов в один данный сервис справляется на ура.
Второй же не воспринимает кириллицу, но значительно уменьшает объем файлов скриптов.

Применение

Для примера я взял файл баз данных размером в 155.3 кб, пропустил его через Closure Compiler, на выходе получил примерно 400 кб. Затем полученный файл пропустил через сервис bananascript, на выходе получилось около 20 кб. Что уменьшило исходный размер файла на 135 кб. А самое главное тестовый, скрипт подключенный с кодировкой ISO-8859-1, что требуется после сжатия скрипта в сервисе bananascript для его работоспособности — стал корректно отображать кириллицу.

После тестов я проделал то-же самое со всеми библиотеками и скриптами подключаемыми к приложению. Их исходный суммарный размер был равен 338.9 кб, после один файл на выходе стал весить 84.5 кб, а после gzip сжатия 63 кб.

Плюсы:
1. Уменьшается размер подключаемых скриптов.
2. Уменьшается кол-во http запросов.
3. Хорошее дополнение к защите от «любителей реализовать чей-либо сервисов в своих проектах».
Минусы:
1. Процесс такой компиляции занимает время.
2. Скрипты скомпилированные таким способом должны подключаться с кодировкой ISO-8859-1.
3. Не дай бог утратить исходные скрипты ;))

Пошаговая инструкция:

1. Заходим на Closure Compiler
2. Выстраиваем там все файлы скриптов в нужном порядке, должно получиться что-то похожее на:

// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name default.js
// @code_url site.ru/src1.js
// @code_url site.ru/src2.js
// @code_url site.ru/src3.js
// ==/ClosureCompiler==

Где @compilation_level — уровень оптимизации скрипта, @output_file_name — имя файла скрипта, который будет получен на выходе, @code_url — ссылка на компилируемый скрипт (их может быть несколько).
3. Полученный файл компилируем в сервисе bananascript и там же смотрим на разницу его размера «до» и «после».
4. При подключении скрипта указываем для него charset=«ISO-8859-1».