Сжатие Javascript и CSS
При сжатии javascript, как и HTML/CSS, используется GZIP на сервере: mod_deflate в apache/nginx, mod_deflate/mod_compress в lighttpd.
Это - универсальное сжатие. Но есть и специфическое, которое помогает уменьшить размер в 2 и более раза, по сравнению с простым gzip.
Минификация javascript убирает лишние символы из исходника и хитрыми способами уменьшает его размер. При хорошем сжатии обычно происходит обфускация, т.е имена переменных заменяются на более короткие там, где это возможно, в результате скрипт становится непонятным.
Рекомендация номер один. YUI Compressor(страница)
использует парсер javascript, написанный на языке java, который называется Rhino.
Патченный Rhino сжимает за счет двух основных операций:
- убирает лишние пробельные символы и комментарии
- заменяет имена локальных переменных на более короткие
Чтобы его использовать, нужны такие компоненты:
Сжать файл 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 делает следующее:
- Сжимает javascript регулярными выражениями
- Использует алгоритм архивации со словарем
Например, напустим 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 в двух случаях:
- Вы не хотите использовать gzip-компрессию, например, чтобы избежать глюков старых браузеров при распаковке javascript
- Вы хотите обфусцировать код, сделать его непонятным
В остальных случаях можно обойтись 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. Причины те же.
|
Спасибо большое, очень долго искал.
Друзья, смею обрадовать вас. Теперь по той же ссылке доступна новая версия - которая ко всему прочему сжимает локальные переменные и не портит регулярные выражения, записанные без кавычек.
Я тестировал программу на довольно больших кусках кода. Но вот маленький примерчик, с которым она легко справляется:
function test() {
var varOut/*a*/ = "opa";
function testIn(param) {
var str = varOut+"2, param: "+param;
return str.replace(/ p/i, '');
}
alert(testIn("!"));
}
А можете для PHP подсказать компрессор?
Я пользуюсь http://code.google.com/p/jsmin-php/, но он не преобразует локальные переменные, выкусывает комментарии и переносы строк, да и то, не все.
Может кто знает что-то получше на PHP?
а можно заставить браузер кушать gz файлы, если у меня нету доступа к настройкам сервера? тоесть к примеру если ети файлы сразу в формате gz. ато если просто вставить их в тег script, ничего не получается
Настройки сервера здесь касаются только пункта 2. То есть, сервер может быть настроен на сжатие определенных документов, или сжатие вообще может не не настраиваться.
Браузер в любом случае кушает gzip'ованное содержимое, если сервер сообщил про сжатие в заголовках.
печально, к настройкам серва мне не добратся(
а после прочтения этой статьи пакером не хочется сжимать, а без gzip он самый эффективный.
JSMin + gzip почти равен YUI + gzip. Зря тут нет результатов.
http://webo.in/articles/habrahabr/11-minifing-javascript/
А по поводу "битого" кода -- пишите его в строгом соответствии со стандартами и в нормальной нотации, а потом сжимайте.
а) Здесь есть результаты.
б) Не сбивайте с толку людей, основываясь на кривых данных.
Посмотрел статью.
Часть ссылок на файлы, использованные для тестирования в этой статье, просто не открывается: 404.
Кроме того (цитирую) "для анализа были найдены несколько ... JS-файлов ... разных .. степеней изначального сжатия".
Я посмотрел файлы (которые не 404) - так и есть.
То есть, автор сжимает уже изначально сжатые файлы вместе с несжатыми, потом сжимает их и бросает результат в одну кучу. Так делать нельзя.
Компрессия в реальной жизни применяется исключительно к несжатым файлам.
Вот, написал ещё такой способ сжатия. сжатие почти в 50%. Читаем: Сжимаем css с помощью base62
Этот способ не стоит использовать, если на сервере делается GZIP. Лучше YUI + GZIP.
это на валидацию никак не влияет?
http://javascript.ru/optimize/javascript-compression#packer
цитата:
Результат сжатия (все в одну строку):
eval( ...
запустил этот код и получил - Ошибка, предполагается наличие ";"

запускал и отдельным файлом *.JS и в составе HTML через тег
Подскажите, что значит:
"желательно, чтобы исполняемый файл java был на текущем пути (PATH)".
Если код написан некосоруко, то есть нет лишних пробелов, то код в одну строку превращается и простым редактором типа Notepad++ замещением символов табуляции и конца строки в пустую строку за пару секунд. Вуаля)))
Хороший способ ускорить сайт или блог.
Не используйте packer для обфускации. Совсем он ничего не делает, а кодировка обратима. Да и на самом сайте пакета написано компрессор, а не обфускатор.
Рекомендую всем хороший и, главное, бесплатный сервис для размещения файлов CSS и JS-библиотек с возможностью создавать прямые ссылки. Есть минимизация файлов. Ссылка: dirlink.ru
Сокращенный код потом сложно редактировать, как обратно вернуть?
Сжатый код помогает защищать разработки, пригодится при разработке сайтов и программ.
Отличная статья. А почему вы сервис https://c-wd.ru/tools/compressorcss/ по сжатию CSS не рассмотрели?
You have remarked very interesting points! ps decent website. last day on earth pc
thanks you for the nice post, i benefit a lot! love balls pc
This is a great thing, I think everyone feels this information is very valuable, thank you candy crush soda
what is a good sat score for harvard
Hello! this complex question. Here it is necessary to think...
An article that is remarkable and should be learned. Thank you for providing this great information. driving directions
I really like reading through a post that can make people think. Also, many thanks for permitting me to comment! basketball legends
If you want to find casual sex contacts for hot chat in United Kingdom visit casual sex manchester and you will not regret it
Find fine ladies for sexy chat contacts in UK and enjoy on our web platform adult chats uk
Love to see this useful web platform. Thank you very much.Get jasa SEO at https://seohandal.id official web.
Your work is very good. Thank you for sharing great information to us. sex frankfurt
belfast shemale is the best web place for hot chat with young girls in United Kingdom so check out right now and enjoy
Find hot local ladies ready for casual contacts in EU only at sexanzeigen graz
This is a very interesting post that can be helpful to anyone who reads it. We are looking forward to reading your future posts. Handy Solutions
If you are going for best contents like I do, simply go to see this website all the time as it provides feature contents, thanks 먹튀검증사이트추천
This is a great idea, it will definitely be shared widely, thanks for sharing it with us temple run
If you want casual sex contact in EU try to find fine ladies at Transen in Favoriten
Maswiktoria roksa
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.