Javascript.RU

Сжатие Javascript и CSS

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

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

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

Рекомендация номер один. YUI Compressor(страница)
использует парсер javascript, написанный на языке java, который называется Rhino.

Патченный Rhino сжимает за счет двух основных операций:

  1. убирает лишние пробельные символы и комментарии
  2. заменяет имена локальных переменных на более короткие

Чтобы его использовать, нужны такие компоненты:

  • Установленная Java
    • желательно, чтобы исполняемый файл java был на текущем пути (PATH)
  • Скачать YUI Compressor

Сжать файл myfile.js в myfile-min.js:

java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

Также есть ряд полезных опций, о которых Вы узнаете, запустив:

java -jar yuicompressor-x.y.z.jar -h

Компрессор также умеет сжимать CSS, вставлять переносы строк после каждой точки с запятой, или каждые NN символов, и т.д.

Если русские символы криво сжимаются --- используйте опцию "charset".

Важно: при сжатии, в целях безопасности, YUICompressor не будет сжимать локальные переменные во всех областях видимости, связанных с вызовами with и eval. Поэтому использовать эти конструкции не рекомендуется.

Можно использовать для обфускации javascript, для сжатия не рекомендуется.

Утилита Packer доступна на нескольких языках программирования по адресу http://dean.edwards.name/download/#packer.

Можно поиграть с реализацией packer на javascript по адресу http://dean.edwards.name/packer/.

Packer делает следующее:

  1. Сжимает javascript регулярными выражениями
  2. Использует алгоритм архивации со словарем

Например, напустим PHP-версию на скрипт:

function somefunc() {
	var test = 5
	var myTest = 7

	/* go go go!!! */
	go(myTest)
}

Результат сжатия (все в одну строку):

eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('3 6(){1 2=5 1 0=7 4(0)}',8,8,'myTest|var|test|function|go||somefunc|'.split('|'),0,{}))

При загрузке javascript разжатие осуществляется автоматически запуском eval.

Это означает, что нагрузка по разархивации ложится на javascript.
Есть мнения (new.com: http://www.clientcide.com/best-practices/optimization/dean-edwards-packer-compression-tool/ ), что это может привести к неоправданным тормозам на разархивацию вместо загрузки.

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

Packer имеет смысл использовать для сжатия javascript в двух случаях:

  1. Вы не хотите использовать gzip-компрессию, например, чтобы избежать глюков старых браузеров при распаковке javascript
  2. Вы хотите обфусцировать код, сделать его непонятным

В остальных случаях можно обойтись YUI Compressor как для Javascript так и для CSS.

Версия jQuery: 1.3.2. Это для примера, с тем же успехом можно было взять и другую ветку.

В названии файлов

  • min - родная минификация jQuery. Тот же результат получается при минификации yui compressor 2.4.2
  • packer - означает, что применили PHP packer 1.1
  • gz - обычный gzip. Таким же gzipом сжимает скрипты вебсервер.

Несколько суффиксов обозначают два последовательно запущенных компрессии. Например, .min + .gz означает минифицированный и затем gzip'ованный скрипт.

Почти все современные браузеры принимают от сервера gzip'ованные скрипты.

jquery-1.3.2.js 120763
jquery-1.3.2.js.gz 35361
jquery-1.3.2.min.js 57254
jquery-1.3.2.min.js.gz 19716
jquery-1.3.2.pack.js 41025
jquery-1.3.2.pack.js.gz 20274

Из таблицы видно, что наилучший результат достигается после минификации с последующим gzip (jquery-1.3.2.min.js.gz).

Итак, лучший метод сжатия выбран как в теории и проверен на практике. Это минификация скрипта. А gzip пусть делает сервер.

На текущий момент наилучшим способом сжать javascript является использование Google Closure Compiler.

Этот инструмент заслужил отдельный цикл статей: Google Closure Compiler в деталях.

Соответственно, рекомендация: Google Closure Compiler + GZIP. Причины те же.


Автор: Digger (не зарегистрирован), дата: 5 июля, 2008 - 21:06
#permalink

Спасибо большое, очень долго искал.


Автор: laxa (не зарегистрирован), дата: 9 октября, 2008 - 12:48
#permalink

Здравствуйте. Сначала кратко: вот ссылка где можно взять стабильный компрессор:
http://www.russkiy-rim.ru/public/soft/jscompressor.html

Теперь подробнее: Нужно было сжать один .js файл. Стал я пользоваться всеми этими онлайн-компрессорами, котоых так много в сети. Нашел даже один платный!! И во всех них нашел какие-то баги. Вот пример кода, который сжимается неправильно простым компрессором

if(boolean)var varname=smth
else if (boolean) ..

Короче не понравилось мне это и я написал свой собственный компрессор. В нем удалось избежать многих проблем. Единственное, прога будет портить код при регулярных выражениях вида /a = b/g (ну без кавычек). Но все же более стабильная чем большинство онлайн-компрессоров. Не удивляйтесь - сайт, на котором лежит дистрибутив посвящен наружной рекламе


Автор: Гость (не зарегистрирован), дата: 10 октября, 2008 - 23:54
#permalink

Друзья, смею обрадовать вас. Теперь по той же ссылке доступна новая версия - которая ко всему прочему сжимает локальные переменные и не портит регулярные выражения, записанные без кавычек.
Я тестировал программу на довольно больших кусках кода. Но вот маленький примерчик, с которым она легко справляется:
function test() {
var varOut/*a*/ = "opa";
function testIn(param) {
var str = varOut+"2, param: "+param;
return str.replace(/ p/i, '');
}
alert(testIn("!"));
}


Автор: GPS (не зарегистрирован), дата: 17 марта, 2009 - 04:07
#permalink

Хорошо бы и декомпрессоры на эту же страничку.


Автор: Гость (не зарегистрирован), дата: 30 июня, 2010 - 16:30
#permalink

Мне очень помог http://malzilla.sourceforge.net/ запаковал исходники с помощью bananascript.com и нечаянно удалил исходники.


Автор: Гость (не зарегистрирован), дата: 17 марта, 2009 - 16:49
#permalink

А есть у кого нибудь код для асп.нет?
На разрабатываемом сайта хочу автоматически выдавать сжатые css


Автор: Shasoft, дата: 19 апреля, 2009 - 21:07
#permalink

А можете для PHP подсказать компрессор?

Я пользуюсь http://code.google.com/p/jsmin-php/, но он не преобразует локальные переменные, выкусывает комментарии и переносы строк, да и то, не все.

Может кто знает что-то получше на PHP?


Автор: SleepWalker, дата: 21 июня, 2009 - 13:43
#permalink

а можно заставить браузер кушать gz файлы, если у меня нету доступа к настройкам сервера? тоесть к примеру если ети файлы сразу в формате gz. ато если просто вставить их в тег script, ничего не получается


Автор: Илья Кантор, дата: 21 июня, 2009 - 13:57
#permalink
  1. При запросе браузер указывает в заголовках, что может принять gzip-формат.
  2. Сервер отсылает сжатое содержимое, указывая, что оно сжато, соответствующим заголовком.
  3. Браузер, увидев такой заголовок, разжимает содержимое перед показом.

Настройки сервера здесь касаются только пункта 2. То есть, сервер может быть настроен на сжатие определенных документов, или сжатие вообще может не не настраиваться.

Браузер в любом случае кушает gzip'ованное содержимое, если сервер сообщил про сжатие в заголовках.


Автор: SleepWalker, дата: 21 июня, 2009 - 14:05
#permalink

печально, к настройкам серва мне не добратся(
а после прочтения этой статьи пакером не хочется сжимать, а без gzip он самый эффективный.


Автор: sunnybear (не зарегистрирован), дата: 28 июня, 2009 - 15:18
#permalink

JSMin + gzip почти равен YUI + gzip. Зря тут нет результатов.
http://webo.in/articles/habrahabr/11-minifing-javascript/
А по поводу "битого" кода -- пишите его в строгом соответствии со стандартами и в нормальной нотации, а потом сжимайте.


Автор: Илья Кантор, дата: 30 июня, 2009 - 11:12
#permalink

а) Здесь есть результаты.
б) Не сбивайте с толку людей, основываясь на кривых данных.

Посмотрел статью.
Часть ссылок на файлы, использованные для тестирования в этой статье, просто не открывается: 404.

Кроме того (цитирую) "для анализа были найдены несколько ... JS-файлов ... разных .. степеней изначального сжатия".

Я посмотрел файлы (которые не 404) - так и есть.

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

Компрессия в реальной жизни применяется исключительно к несжатым файлам.


Автор: Aleko (не зарегистрирован), дата: 16 октября, 2009 - 18:39
#permalink

Вот, написал ещё такой способ сжатия. сжатие почти в 50%. Читаем: Сжимаем css с помощью base62


Автор: Илья Кантор, дата: 11 ноября, 2009 - 10:30
#permalink

Этот способ не стоит использовать, если на сервере делается GZIP. Лучше YUI + GZIP.


Автор: Гость (не зарегистрирован), дата: 30 августа, 2010 - 17:34
#permalink

это на валидацию никак не влияет?


Автор: saint_byte (не зарегистрирован), дата: 10 сентября, 2010 - 15:51
#permalink

Так а я написал маленький скриптик на ПХП (такие батники под винду не сообразил как писать) чтоб сжимать папками или целыми проектами . Сжимаю свои яваскрипты и цсс в своих Zend framework проектах .

Ссылка на скачивание тут: http://dotblog.ru/2010/08/optimiz_avt/


Автор: Гость (не зарегистрирован), дата: 6 декабря, 2010 - 17:04
#permalink

http://javascript.ru/optimize/javascript-compression#packer

цитата:
Результат сжатия (все в одну строку):
eval( ...

запустил этот код и получил - Ошибка, предполагается наличие ";"
запускал и отдельным файлом *.JS и в составе HTML через тег
Sad


Автор: tol64, дата: 14 декабря, 2011 - 05:04
#permalink

Подскажите, что значит:
"желательно, чтобы исполняемый файл java был на текущем пути (PATH)".


Автор: Гость (не зарегистрирован), дата: 18 мая, 2012 - 01:55
#permalink

Если код написан некосоруко, то есть нет лишних пробелов, то код в одну строку превращается и простым редактором типа Notepad++ замещением символов табуляции и конца строки в пустую строку за пару секунд. Вуаля)))


Автор: Простой (не зарегистрирован), дата: 6 сентября, 2012 - 04:15
#permalink

Хороший способ ускорить сайт или блог.


Автор: Гость (не зарегистрирован), дата: 6 июня, 2013 - 21:51
#permalink

Не используйте packer для обфускации. Совсем он ничего не делает, а кодировка обратима. Да и на самом сайте пакета написано компрессор, а не обфускатор.


Автор: Рудаков Павел (не зарегистрирован), дата: 25 октября, 2013 - 20:44
#permalink

Рекомендую всем хороший и, главное, бесплатный сервис для размещения файлов CSS и JS-библиотек с возможностью создавать прямые ссылки. Есть минимизация файлов. Ссылка: dirlink.ru


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 6 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum