Перевод сжатого js в нормальный вид. Сервисы для минимизации кода

Сокращение или сжатие.js -файлов - один из процессов оптимизации сайта. Сжатие файлов JavaScript, которые используются на Вашем сайте, достаточно весомо может отразиться на скорости загрузки страницы. Естественно, только в лучшую сторону. Сокращение JavaScript не только ускорит скорость загрузки страницы, но так же ускорит синтаксический анализ и отображение страницы.

Что такое JavaScript и как происходит сжатие.js-файлов

JavaScript - это один из наиболее известных объектно-ориентированных языков программирования. А это значит, что .js -файл в первую очередь представляет из себя продукт программирования. Это важно знать, чтобы понимать суть сжатия кода JavaScript. Допустим, что перед нами некий код, который написан на JavaScript и выполняет определенные действия. Для примера приведем банальную программу вывода слов «Hello World» в браузере:

document.write(«Hello World»);

Какими способами можно сократить.js-файл?

Изменить алгоритм . Каждая программа работает по некоторому алгоритму. В некоторых случаях можно найти алгоритм, который будет работать быстрее и при этом меньше весить. Но обычная программа не сможет изменить алгоритм другой программы. Для этого нужен искусственный интеллект. Либо естественный, в виде программиста.

Убрать все комментарии, пробелы и пропуски. Редкий программист не будет использовать пробелы, пропуски и комментарии в своём коде. Комментарии помогают не заблудиться, пробелы помогают создать древовидный код, а целые пропуски могут отделить логически различающиеся участки кода. Всё это хорошо, пока программист пишет код. Но когда код дописан и программа работоспособна, то все эти ненужные символы можно убрать и тем самым сократить объем js-файла.

Изменить переменные. Одним из ключевых элементов программирования являются переменные - названия определенных элементов. С помощью переменных программист обращается к данным, которые скрыты за ним. И чтобы понимать какая переменная что хранит, программисты частенько дают переменным достаточно длинные имена, в которых содержится подсказка по поводу того, что за данные тут лежат. Во время программирования это очень удобно, а во время оптимизации сайта они не сильно необходимы. Например, переменную с именем тут_хранится_количество_записей_сайта можно без проблем для функциональности сайта заменить на переменную а . Вы сократите объем .js -файла сразу на 20± 10 байтов. И данное число можно смело умножать на количество вхождений данной переменной. К тому же переменных может быть очень много.

Закодировать код . Это последний и, наверное, самый действенный способ сжать .js -файл. Инструмент, который я хочу Вам презентовать, производит кодировку с использованием технологии Base62 . Данная технология использует 62 символа ASCII - символы A-Z, a-z и 0–9 - для кодирования информации. Этот инструмент мы и рассмотрим более подробно.

Инструмент для сжатия JavaScript

Javascriptcompressor.com

можно произвести три из четырех приведенных способов для сжатия кода JavaScript. Данный онлайн инструмент не позволяет выполнить первый пункт - он не может проанализировать Ваш алгоритм и заменить его на аналогичный. С остальными же тремя он справляется на ура.

Интерфейс сайта весьма прост. В первое окно Вы должны ввести JavaScript код, а во втором окне Вы получите его сжатую версию. Так же, на странице имеются два checkbox`а:

Base62 Encode

Shrink variables

Если Вы отметите первый из них, то сжатие Вашего кода будет происходить с использованием технологии Base62 . Ну, а второй checkbox будет по-возможности заменять длинные переменные на более короткие. В любом случае - отметите Вы хотя бы один checkbox, оба или вообще не отметите - произойдет сжатие кода JavaScript путем удаления комментариев, пропусков и пробелов. В дополнение к этому, Вы можете увидеть размер кода до сжатия и после сжатия.

Что еще нужно знать про сжатие JavaScript

Ресурсов, которые предлагают те же услуги, предостаточно. Я остановился на данном инструменте потому, что другие ресурсы производили сжатие с ошибками. Не следует отрицать возможность наличия ошибок в сжатом js-коде. Поэтому, перед сжатием javascipt кода, создайте резервную копию .js -файла. Сразу после сжатия кода, лучше протестировать работоспособность сайта. Ещё лучше будет, если Вы проведете испытания на тестовом сайте.

Так же хочу сказать, что кодирование маленьких по объему .js -файлов почти что бессмысленно. Очень часто после кодирования таких файлов, их объем только увеличивается. Удачи Вам в ваших попытках сократить и сжать JavaScript.

Зачем нужна минимизация js и css файлов?

Прежде всего минимизированные css и js будут иметь меньше размер чем исходники, таким образом уменьшиться время загрузки страницы. Когда проект небольшой, то улучшение после минимизации Вы не заметите. Но если Вы работаете с большим проектом, то минимизация даст значительное уменьшение времени загрузки страницы.

Что же из себя представляет минимизация?

Из кода удаляются комментарии, код пишется в одну строку (удаляются переносы строк и лишние пробелы).

Существует множество онлайн и офлайн сервисов которые могут из Вашего js или css файла сделать минимизированный файл. Однако в данной статье рассмотрим расширение для Yii, которое будет минимизировать и соединять в один файл js скрипты (только JavaScript) и css в другой (только CSS). Это расширение создаст минимизированный файл для js и css (один файл для js, один файл для css) при первой загрузке страницы и разместит его в папке assets . После чего будет использовать эти файлы до тех пор пока Вы не внесете изменение в любой из подключаемых js или css (или не очистите папку assets). После внесения изменений процедура повторяется (проверка изменений осуществляется по времени модификации файла). Таким образом Вам не нужно после каждого изменения в исходниках делать минимизацию вручную, js и css остаются в читабельном виде, а на сайте уже работают их минимизированные копии.

Внимание! Хочу заметить что это не единственное расширение для минимизации css и js. Все расширения Вы можете посмотреть на официальном сайте Yii, в разделе расширения.

И так приступим к внедрению расширения минимизации наших js и css файлов.

Расширение Вы можете скачать официального сайта Yii, раздел расширения:

С GitHub репозитория разработчика:

Распаковываем архив и копируем папку yii-EClientScript в папку /protected/vendors

Теперь нам необходимо подключить расширение к проекту, открываем файл конфигураций /protected/config/main.php и в components добавляем подключение и настройку расширения: