Форматувальник і мінімізатор JavaScript

Як форматувати або мінімізувати JavaScript

1. Вставте свій код або натисніть Відкрити файл, щоб завантажити файл .js, .mjs чи .jsx (до 10 МБ).
2. Виберіть Відступ і, якщо вам до вподоби стиль Оллмана, позначте Фігурні дужки з нового рядка.
3. Натисніть Форматувати, щоб зробити код читабельним.
4. Щоб зменшити його, задайте Параметри мінімізації та натисніть Мінімізувати. Щоб лише пошукати помилки, натисніть Перевірити синтаксис.
5. Скопіюйте або завантажте результат. Рядок стану показує розмір до та після й відсоток заощадженого.

Код лише читається й перетворюється, але ніколи не виконується: нічого з того, що ви вставляєте, не запускається на цій сторінці.

Форматування за допомогою js-beautify

Форматувати використовує js-beautify. Він розміщує по одній інструкції в рядку, робить відступи для блоків, додає пробіли навколо операторів і після ключових слів та залишає не більше одного порожнього рядка там, де ви їх мали. Він також розуміє сучасний синтаксис (класи, стрілкові функції, шаблонні літерали, async/await) і JSX. Це найшвидший спосіб прочитати мінімізовану бібліотеку чи однорядковий фрагмент, скопійований із вебсторінки.

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

Мінімізація за допомогою Terser

Мінімізувати використовує Terser – мінімізатор, який застосовує більшість інструментів збирання JavaScript. Оскільки він великий, його завантажують лише тоді, коли ви вперше натискаєте Мінімізувати чи Перевірити синтаксис. Параметри безпосередньо відповідають налаштуванням Terser:

• Модуль ES (import/export) розбирає код як модуль (module: true): діє суворий режим, а імена верхнього рівня є приватними, тож їх можна перейменовувати, а невикористані видаляти. Залиште опцію непозначеною для класичного скрипта, глобальні функції якого використовують інші скрипти.
• Стиснути (compress) переписує код у коротший еквівалент: згортання констант (2*60 стає 120), видалення мертвого коду, об’єднання оголошень var, коротші умови.
• Скоротити імена змінних (mangle) перейменовує локальні змінні й параметри на одну чи дві літери. Глобальні імена та властивості об’єктів ніколи не перейменовуються.
• Зберігати коментарі з ліцензією зберігає коментарі, що починаються з /*! або містять @license чи @preserve. Усі інші коментарі видаляються.

Мінімізація не може змінити те, що робить код, але код, який покладається на імена функцій (fn.name) чи на eval, після перейменування може поводитися інакше. У такому разі зніміть позначку з Скоротити імена змінних.

Синтаксичні помилки з рядком і стовпцем

Коли Terser не може розібрати код, Мінімізувати та Перевірити синтаксис показують повідомлення про помилку з рядком і стовпцем, наприклад «Рядок 12, стовпець 8 – Синтаксична помилка: Unexpected token punc «)»». Текст самого повідомлення Terser формує англійською. Стовпець відлічується в символах із 1. Типова причина – пропущена дужка раніше у файлі, тож дивіться й на рядки безпосередньо перед указаною позицією.