JavaScript компрессоры и зачем они нужны

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

Что такое минимизация

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

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

Как это выглядит

Трудно оценить, как это работает, без примера. Вот так выглядит оригинальный код:

    // setup some JSON to use
    var cars = [
     { "make":"Porsche", "model":"911S" },
     { "make":"Mercedes-Benz", "model":"220SE" },
     { "make":"Jaguar","model": "Mark VII" }
    ];

    window.onload = function() {
     // setup the button click
     document.getElementById("theButton").onclick = function() {
       doWork()
     };
    }

    function doWork() {
     // ajax the JSON to the server
     $.post("receiver", cars, function(){

     });
     // stop link reloading the page
     event.preventDefault();
    }

А вот так он выглядит после минимизации:

function doWork(){$.post("receiver",cars,function(){}),event.preventDefault()}var cars=[{make:"Porsche",model:"911S"},{make:"Mercedes-Benz",model:"220SE"},{make:"Jaguar",model:"Mark VII"}];window.onload=function(){document.getElementById("theButton").onclick=function(){doWork()}};

В результате объём кода уменьшился на 39%. При этом компрессии удалось добиться только за счёт сокращения числа пробелов и удаления комментариев, имена переменных были сохранены.

Если распространить этот алгоритм на популярные JS-библиотеки, их объём изменится следующим образом:

• JQuery: до минимизации 270 KB, после 90 KB.
• Highcharts: до минимизации 1 MB, после 201 KB.
• MooTools: до минимизации 164 KB, после 93 KB

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

Как это работает

Теперь, когда вы убедились в эффективности минимизации, давайте рассмотрим, как это делается. Главное правило – не вздумайте делать минимимзацию вручную, это приведёт лишь к появлению ошибок. За вас все сделают специальные инструменты, способные применять различные алгоритмы к вашему коду.

Наиболее популярное решение - онлайн-сервис. Единственное существенное отличие между ними – работа непосредственно с кодом или файлом. В любом случае, весь процесс для вас займёт не более 5 кликов. Вот несколько:

• JSCompress – простой быстрый сайт. Большой плюс – возможность посмотреть на инструменты, которые использовались для его создания.
• DansTools JavaScript Minifier – сервис, позволяющий интегрировать его в свой веб-сайт.
• JavaScript Minifier — здесь нет ничего, кроме компрессора и одной кнопки.
• Minify — Полная противоположность предыдущему компрессору. Великолепный сайт, заслуживающий внимания.

Количество сервисов огромно, перечислять все бесполезно. Выбирайте тот, что ближе вашему образу мышления и милее глазу.

Другое решение – использование встроенных инструментов в IDE или редакторы. По понятным причинам они намного быстрее, не требуют копипаста и разделения кода на языки и фрагменты.

Так, например, в Microsoft Visual Studio существует расширение Bundler & Minifier. На данный момент его скачало почти 400 тысяч человек. Также оно доступно на GitHub и постоянно развивается.

Поклонникам Sublime Text следует скачать пакет Minify. У него более 61 000 скачиваний и он также доступен на GitHub.

Наконец, для пользователей PyCharm популярным решением является компрессор YUI. В общем, практически любой популярный продукт имеет плагин для минимизации кода.

Обратная сторона медали

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

Это не самая большая проблема, с который вы можете столкнуться в создании веб-сайтов. Помните о данном ограничении, соблюдая чёткое разграничение между рабочим и производственным кодами. А дальше дело за малым – создать крутой сайт.

Основано на статье Joe Coburn «JavaScript Compressors: How and Why to Minify Your JS».