Javascript компресори і навіщо вони потрібні, geekbrains - навчальний портал для програмістів

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

Javascript компресори і навіщо вони потрібні, geekbrains - навчальний портал для програмістів

Що таке мінімізація

Мінімізація обсягу коду веде до зменшення розміру файлу, а це значить, що він швидше буде завантажуватися і виконуватися. У форматі невеликої програми вигода незначна, але у великих проектах з підключенням бібліотек, на кшталт jQuery, це дозволить збільшити продуктивність в рази.

Як це виглядає

Важко оцінити, як це працює, без прикладу. Ось так виглядає оригінальний код:

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 ();
>

А ось так він виглядає після мінімізації:

Якщо поширити цей алгоритм на популярні JS-бібліотеки, їх обсяг зміниться наступним чином:

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

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

Як це працює

Найбільш популярне рішення - онлайн-сервіс. Єдина істотна відмінність між ними - робота безпосередньо з кодом або файлом. У будь-якому випадку, весь процес для вас займе не більше 5 кліків. Ось кілька:

Кількість сервісів величезне, перераховувати все марно. Вибирайте той, що ближче вашому образу мислення і миліше оці.

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

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

Нарешті, для користувачів PyCharm популярним рішенням є компресор YUI. Загалом, практично будь-який популярний продукт має плагін для мінімізації коду.

Зворотній бік медалі

В мінімізації є один істотний мінус - після неї код не можна відновити до початкового стану. Таким чином, переробити або передати іншому розробнику такий код неможливо - з ним фізично складно працювати.

Це не найбільша проблема, з якою ви можете зіткнутися в створенні веб-сайтів. Пам'ятайте про даний обмеження, дотримуючись чітке розмежування між робочим і виробничим кодами. А далі справа за малим - створити крутий сайт.

Схожі статті