Перевод сжатого js в нормальный вид. Сервисы для минимизации кода
Сокращение или сжатие.js -файлов - один из процессов оптимизации сайта. Сжатие файлов JavaScript, которые используются на Вашем сайте, достаточно весомо может отразиться на скорости загрузки страницы. Естественно, только в лучшую сторону. Сокращение JavaScript не только ускорит скорость загрузки страницы, но так же ускорит синтаксический анализ и отображение страницы.
Что такое JavaScript и как происходит сжатие.js-файловJavaScript - это один из наиболее известных объектно-ориентированных языков программирования. А это значит, что .js -файл в первую очередь представляет из себя продукт программирования. Это важно знать, чтобы понимать суть сжатия кода JavaScript. Допустим, что перед нами некий код, который написан на JavaScript и выполняет определенные действия. Для примера приведем банальную программу вывода слов «Hello World» в браузере:
document.write(«Hello World»);
Какими способами можно сократить.js-файл?
Javascriptcompressor.com
можно произвести три из четырех приведенных способов для сжатия кода JavaScript. Данный онлайн инструмент не позволяет выполнить первый пункт - он не может проанализировать Ваш алгоритм и заменить его на аналогичный. С остальными же тремя он справляется на ура.
Интерфейс сайта весьма прост. В первое окно Вы должны ввести JavaScript код, а во втором окне Вы получите его сжатую версию. Так же, на странице имеются два checkbox`а:
Если Вы отметите первый из них, то сжатие Вашего кода будет происходить с использованием технологии 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 добавляем подключение и настройку расширения: