Веб-розробка

JS Minify / Beautify

Стиснути JavaScript для продакшену або відформатувати згорнутий код у зручний для читання вигляд.


                        
                    

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

Як користуватися

Типові сценарії

Що варто памʼятати

Мінімізація — це не обфускація: змінні перейменовуються для стиснення розміру, а не для приховування логіки; серйозна обфускація вимагає окремих спеціалізованих інструментів.

Мінімізований код у продакшені без source map складно налагоджувати — номери рядків у помилках не відповідають оригінальному файлу.

Стаття про цей інструмент: Мінімізація JavaScript: різниця між мінімізацією та обфускацією

Часті запитання

Який інструмент використовує мінімізатор під капотом?

Він використовує terser, широко застосовуваний мінімізатор і компресор JavaScript, який також розуміє сучасний синтаксис.

Чому мінімізований JavaScript складніше дебажити?

Terser скорочує назви змінних і функцій, прибирає пробіли й коментарі, а оскільки цей інструмент не генерує source map, інструменти розробника браузера не можуть зіставити мінімізований код із читабельними оригінальними рядками.

Чи зламає мінімізація мій код?

Для синтаксично коректного JavaScript мінімізація зберігає поведінку; якщо є синтаксична помилка, інструмент повідомляє рядок і стовпець, щоб ви могли виправити її перед мінімізацією — усе працює локально без завантаження вашого коду.

Чим tree shaking відрізняється від мінімізації?

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

Чи безпечно використовувати мінімізований JavaScript у продакшн без додаткової перевірки?

Так, мінімізація — це суто синтаксичне перетворення, яке зберігає поведінку програми ідентичною; будь-яка різниця в поведінці після мінімізації свідчить про баг у самому мінімізаторі, а не про навмисну зміну логіки.

Статті: Веб-розробка

HEX, RGB, HSL: чому для кольору існує стільки записів

Чому дизайнери часто обирають HSL замість HEX, коли потрібно підібрати відтінок кольору вручну.

Мінімізація CSS: що саме видаляється з файлу і навіщо

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

Мінімізація HTML: чому пробіли в розмітці взагалі мають значення

Чому видалення пробілів у <pre> чи textarea може зламати вигляд сторінки, на відміну від інших місць.

CSS-градієнти: чим linear відрізняється від radial і conic

Чому conic-gradient підходить для кругових діаграм, а radial — для ефекту світлової плями.

Алгоритм Луна: як номер картки перевіряють на коректність

Чому валідний за алгоритмом Луна номер картки не означає, що така картка реально існує.

IBAN: як влаштований міжнародний номер банківського рахунку

Чому перші дві літери в IBAN — це код країни, а не частина номера рахунку.

QR-коди: як у квадраті з пікселів вміщується посилання

Чому QR-код із логотипом по центру все ще сканується, хоч частина малюнка перекрита.

Штрих-коди: чим Code 128 відрізняється від EAN-13

Чому на товарах у магазинах майже завжди EAN-13, а не Code 128.

Placeholder-зображення: навіщо потрібні картинки-заглушки в розробці

Чому верстальники навмисно вставляють сірі прямокутники замість реальних фотографій на етапі розробки.