Компресори JavaScript: як і навіщо мінімізувати JS

Діджитал 27 вересня 2025

Ми всі були там, ви дізналися, як створити приголомшливий сайт., але як тільки ви опублікуєте це, це буде нестерпно повільно.

Що означає Minify?
Як виглядає мінімізований код?
Як ви мінімізуєте?
Перестороги
Мінімізований код неможливо відновити у вихідний стан.
Які інструменти ви використовуєте для мінімізації вашого коду? Ви взагалі турбуєтеся? Дайте нам знати в коментарях нижче!

Скорочення вашого javascript - це один із способів прискорити час відгуку веб-сайту (поряд зі стисненням HTML,), і, на щастя для вас, це простий процес. Сьогодні я покажу вам все, що вам потрібно знати.

Що означає Minify?

Процес мініфікації (або мініфікації) є простою концепцією. Коли ви пишете код JavaScript або будь-якою іншою мовою, існує безліч функцій, які необхідні тільки для полегшення розуміння коду людьми - комп'ютерам не важливо, як ви називаєте свої змінні, або який інтервал між дужками, для приклад.

Мінімізуючи код, ви можете значно зменшити його розмір. Тому для ваших користувачів завантаження файла буде менше. Якщо ви пишете лише один або два рядки JavaScript, ймовірно, помітних поліпшень не буде. Однак, якщо ви пишете багато коду або використовуєте великі бібліотеки, такі як jQuery, помітне підвищення продуктивності і різке зменшення розмірів файлів легко досяжні!

Якщо ви завантажуєте код із зовнішньої CDN, наприклад, у розміщених бібліотеках Google, ви використовували мінімізований код.

Як виглядає мінімізований код?

Розгляньмо деякі приклади. Важко побачити вплив мініфікації на невеликі бази коду, тому я заздалегідь вибачаюся за їх довгу довжину.

Ось кілька незавершених JavaScript з нашого керівництва з використання JSON з Python і JavaScript:

// 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 відсотків менша. У цьому прикладі імена змінних залишаються колишніми, але всі пробіли і коментарі були вилучені.

Ось ще один приклад з нашого керівництва щодо jQuery:

// dfd == deferred var dfd = $.Deferred(); function doThing() { $.get('some/slow/url', function() { dfd.resolve(); }); return dfd.promise(); } $.when(doThing()).then(function(){ console.log('YAY, it is finished'); });

Ось скорочений код:

function doThing(){return $.get(""some/slow/url"",function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log(""YAY, it is finished"")});

Цього разу було тільки 26-відсоткове скорочення - це все ще дуже добре для такого незначного блоку коду.

Ось останній приклад з нашого керівництва щодо Javascript і DOM:

//declare a new variable to hold a new h1 element var newHeading = document.createElement(""h1""); //add the text node to the document var h1Text = document.createTextNode(""Heading Level 1""); //make it a child node of the new heading newHeading.appendChild(h1Text); //append this as a child of element defined as ""bt"" document.getElementById(""bt"").appendChild(newHeading);

Зауважте, як багато коментарів та пробілів. Мінімізована версія зменшила розмір файлу на 52 відсотки:

var newHeading=document.createElement(""h1""),h1Text=document.createTextNode(""Heading Level 1"");newHeading.appendChild(h1Text),document.getElementById(""bt"").appendChild(newHeading);

Ось розміри деяких поширених бібліотек JavaScript порівняно з їх зменшеними версіями:

Highcharts: 1 МБ > 201 КБ
jQuery: 270 КБ > 90 КБ
MooTools: 164 КБ > 93 КБ

Деякі з цих бібліотек показують значне зменшення розміру при стисненні (ауд 80 відсотків), в той час як інші не такі хороші (ауд 40 відсотків). Тим не менш, будь-яке збереження зробить ваш сайт швидшим для ваших користувачів і зменшить навантаження на ваш веб-сервер.

Як ви мінімізуєте?

Тепер ви знаєте, як це працює і як це виглядає, давайте заглибимося в те, як це зробити. Не хвилюйтеся, вам не потрібно нічого міняти вручну! Існує безліч вільно доступних інструментів, які керують процесом за вас.

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

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

JSCompress - Я особисто користуюся цим сайтом найчастіше, якщо це просто швидка робота. Це швидко працює, і вони навіть показують вам інструменти, які вони використовували для його створення.

Minifier JavaScript - цей інструмент працює добре, але він дійсно сяє як API. Це дозволяє вам створити власну інтеграцію або сервіс поверх існуючого веб-сайту.

JavaScript Minifier - ще один веб-сайт з тим же ім'ям, цей інструмент так само простий, як вони приходять. Немає варіантів або меню, лише одна кнопка.

Minify - цей сайт виглядає приголомшливо, і розробники явно звернули увагу на деталі тут.

Цей список може тривати вічно. Існує так багато онлайн-інструментів для мінімізації сайтів, що важко помилитися.

Інструменти, що мінімізують, також існують як інструменти командного рядка або плагінів для вашого редактора JavaScript. Ці інструменти часто набагато швидші у використанні і «просто працюють» з існуючим кодом. Немає необхідності копіювати та вставляти, і вам не потрібно витягувати свій JavaScript з будь-якого HTML або CSS, який може знаходитися в одному файлі.

Якщо ви використовуєте Microsoft Visual Studio, розширення Bundler and Minifier з ринку має більше 600 000 установок! Мало того, але він регулярно оновлюється і доступний на GitHub.

Якщо ви шанувальник Sublime Text, як і я, тоді вам потрібен пакет Minify. З більш ніж 61 000 установок це дуже популярний пакет, який також доступний на GitHub, якщо ви хочете внести свій внесок у проект з відкритим вихідним кодом.

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

Перестороги

Повинен бути підступ, вірно? Ніщо не може бути ідеальним. Ну, так, є одна проблема, але вона досить незначна і легко обходиться:

Мінімізований код неможливо відновити у вихідний стан.

Коли ви мінімізуєте будь-який код, його початкова форма втрачається. Вам потрібно зберегти його копію, якщо ви хочете мати будь-які надії на просте внесення серйозних змін - недостатньо використовувати контроль версій.

Хоча ваш код можна уніфікувати, він ніколи не буде колишнім. Всі ваші цінні коментарі втрачені, з одного боку.

Це не велика проблема, але ви повинні пам'ятати про це при кодуванні. Як правило, незжатий >, що розвивається і стиснений > виробництво.

Тепер ви знаєте все, що потрібно знати про мінімізацію JavaScript! Скорочення коду - один із способів вичавити продуктивність сервера, і всі великі сайти роблять це.