Тема:

Оптимизация и сжатие JavaScript, а также CSS

JavaScript сейчас применяется практически на всех веб-сайтах.

При сжатии javascript, как и HTML/CSS, используется GZIP на сервере: mod_deflate в apache/nginx, mod_deflate/mod_compress в lighttpd.

Это - универсальное сжатие. Но есть и специфическое, которое помогает уменьшить размер в 2 и более раза, по сравнению с простым gzip.

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

Опишу тут один из самых популярных видов сжатия:

Итак, для сжатия вам необходимо сперва скачать YUI Compressor

Скачать его можете тут: [Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...]

Теперь распакуйте архив в какую-нибудь папку.
После распаковки вы увидите внутри вот такие папки:

Код:

build
doc
lib
src

Нам интересна только папка build.

Закиньте в папку build файл, который вы хотите сжать.

Работа с YUI Compressor происходит в режиме командной строки (Кто не умеет пользоваться командной строкой, смотрите ниже, там объясняется, как сжать файл, не используя командную строку).

После того как вы закинули файл, который требуется сжать, в папку build, всё, что вам ещё требуется - это ввести команду:

Код:

java -jar yuicompressor-x.y.z.jar --type js --nomunge --preserve-semi --disable-optimizations -o название_сжатого_файла.js название_сжимаемого_файла.js

--yuicompressor-x.y.z.jar - Заменяем названием компрессора. X.Y.Z, нужно заменить скачанной вами версией.

--type js
Опция указывает на тип сжимаемого файла. Может принимать значение js или css.

--nomunge
Означает только уменьшение JavaScript’а. Обфускация (obfuscate), т.е. перекодировка функций с целью не читабельности кода не происходит.

--preserve-semi
Указывает на сохранение ненужных ";". Нам нужно, чтобы код максимально соответствовал оригиналу.

--disable-optimizations
Отключить оптимизацию кода. Опять же: нам нужно максимальное соответствие оригиналу.

-o название_сжатого_файла.js
Здесь нужно указать название файла, который получится после сжатия.
Замените на своё.

-o название_сжимаемого_файла.js
Здесь нужно указать название сжимаемого файла (который вы хотите сжать). Название файла, закинутого в папку build.

Для тех, кто не умеет пользоваться командной строкой, напишу ещё, как можно сжать файл без нужных знаний для использования командной строкой.

Для этого вам необходимо создать файл .bat


Что такое файл .bat

Код:

Пакетный файл (англ. batch file) — текстовый файл в MS-DOS, OS/2 или Windows, содержащий последовательность команд, предназначенных для исполнения командным интерпретатором. После запуска пакетного файла программа — интерпретатор (как правило, COMMAND.COM или CMD.EXE) читает его строка за строкой и последовательно исполняет команды. Пакетный файл — аналог shell script в Unix-подобных операционных системах.

Для того что бы создать файл .bat, вам надо открыть простой текстовый файл и ввести туда вот это:

Код:

title Optimization JavaScripts
MD javascript_optimized
java -jar yuicompressor-x.y.z.jar --type js --nomunge --preserve-semi --disable-optimizations -o javascript_optimized\название_сжатого_файла.js название_сжимаемого_файла.js
pause
exit

Выставите в тексте все нужные для сжатия опции:

--yuicompressor-x.y.z.jar - Заменяем названием компрессора. X.Y.Z, нужно заменить скачанной вами версией.

--type js
Опция указывает на тип сжимаемого файла. Может принимать значение js или css.

--nomunge
Означает только уменьшение JavaScript’а. Обфускация (obfuscate), т.е. перекодировка функций с целью нечитабельности кода не происходит.

--preserve-semi
Указывает на сохранение ненужных ";". Нам нужно, чтобы код максимально соответствовал оригиналу.

--disable-optimizations
Отключить оптимизацию кода. Опять же: нам нужно максимальное соответствие оригиналу.

-o название_сжатого_файла.js
Здесь нужно указать название файла, который получится после сжатия.
Замените на своё.

-o название_сжимаемого_файла.js
Здесь нужно указать название сжимаемого файла (который вы хотите сжать). Название файла, закинутого в папку build.


Теперь сохраните файл с расширением .cmd в директорию build (или перенесите сохранённый вами файл потом в эту папку), которая находится в распакованным вами архиве yuicompressor-x.y.z.jar

-----------------

Всё, теперь просто запускаем его и он автоматически сожмёт наш JavaScript.

Если разобраться в его действиях, то их два:

1. Создание папки javascript_optimized.
2. Сжатие JavaScript’а и помещение сжатого варианта в папку javascript_optimized.

------------------

Сжатый файл будет находится в папке javascript_optimized.


------------------


Если вы хотите сжать CSS, то просто используйте вот эту строку:

Код:

java -jar yuicompressor-x.y.z.jar --type css -o название_сжатого_файла.css название_сжимаемого_файла.css

-------------------------------------------------------------

При копировании попробуйте не ошибиться. Ссылка на наш форум обязательна.

Для сжатия файлов в операционной системе Windows была сделана маленькая программка

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...].

Version 1.1.0 (04/04/10):

* 64-bit support.
* UTF-8 support.
* Improved UI.
* Improved usability.
* Fixed miner bugs.



[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...]

Вышла новая версия YUI Compressor

[Только зарегистрированные пользователи могут видеть ссылки/изображения. Зарегистрироваться...]