3 058 Полезно

Сжатие javascript файлов


В этой статье рассмотрим online способы сжатия js (jаvascript) файлов для уменьшения их размеров. Сейчас очень много веб-ресурсов используют, как сторонние java скрипты (например, та же jQuery библиотека и многочисленные плагины к ней), так и собственной разработки. Сжатие позволит уменьшить размер загружаемой страницы сайта, а соответственно и время его загрузки. Это один из этапов оптимизации, который желательно проделать всем.
Даже если на сервере используется gzip сжатие, которое несомненно уменьшит размер, не стоит пренебрегать оптимизацией файлов, так как и на распаковку файлов из архива требуется время.
Рассмотрим два наиболее распространенных и эффективных способа сжатия: YUI Compressor и Google Closure Compiler.

YUI Compressor

Использует парсер jаvascript, написанный на языке java, который называется Rhino.
Патченный Rhino сжимает за счет двух основных операций:

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

Официльный сайт Yahoo не предоставляет возможности онлайн сжатия скриптов, но в сети есть сервис
предоставляющий эту возможность.
Сжимать, для примера, будем скрипт мигающего текста:

var blink_text="Blink Text?"
var speed=700
var n=navigator.appName
var ns=(n=="Netscape")
var ie=(n=="Microsoft Internet Explorer")
if (ns){
document.write('<blink>'+blink_text+'</blink>')}
else if (ie){
var verify = 1;
document.write('<div id="blink"></div>')
blink()}
function blink(){
  if (verify == 1){
      document.all.blink.innerText=blink_text;
      verify=0;}
  else {
      document.all.blink.innerText="";
      verify=1;}
  setTimeout("blink()",speed);
}
Вставляем код в текстовое поле, выбираем тип файла JS (можно сжимать, также и CSS файлы) и жмем Compress.

В результате получим:

Сжатие javascript файлов
  • Размер до 489 байт
  • После сжатия 417 байт
  • Процент сжатия 15%
  • После сжатия и упаковки в gzip 270 байт
  • Процент сжатия и упаковки в gzip 45%

Google Closure Compiler

Данный инструмент от Google и также, как и YUI эффективно справляется со своей задачей. В отличие от YUI Compressor он имеет официальный онлайн сервис сжатия
Для сжатия используем всё тот же код. Вставляем его в текстовое поле и жмем Compile.

В правой части окна получим сжатую версию

  • Размер до 439 байт
  • После сжатия 390 байт
  • Процент сжатия 11,16%
  • После сжатия и упаковки в gzip 255 байт
  • Процент сжатия и упаковки в gzip 6,25%

Google Closure Compiler, если судить по размерам файла после сжатия, 390 байт против 417 байт у YUI Compressor уменьшает более эффективно. Эффективнее (в данном примере) на 6,5 %, однако странно, что исходный размер скрипта, оба сервиса определяют по разному.
Использовать можете любой сервис.

Восстановление скрипта в исходное состояние

А чтобы ваш сжатый jаvascript файл вернуть опять в удобочитаемый вид воспользуемся онлайн сервисом

http://jsbeautifier.org/

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи