Мініфікація JS/CSS

Free

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

Введення

Скорочувати імена змінних (mangle)

Мініфікований результат

Про цей інструмент

Видаляє пробіли, коментарі та непотрібні символи, щоб зменшити розмір файлу JavaScript або CSS.
Не форматує. Для читабельного виводу з відступами скористайтеся спеціальним інструментом форматування.

Недавня Активність

Видно всім. Останні 20 використань серед усіх відвідувачів, найновіші спочатку.

Minified 113 characters of CSS

19 годин тому

Minified 127 characters of JavaScript

19 годин тому

Minified 127 characters of JavaScript

19 годин тому

Коментарі (0)

Знайшли цей інструмент корисним? Залиште коментар, поділіться порадою, чи скажіть нам, як ми можемо покращити його.

Ще немає коментарів. Будьте першим, хто поділиться думками!

Що робить цей інструмент

Вставте читабельний JavaScript або CSS, і цей інструмент зменшить його, видаливши пробіли, коментарі та (для JavaScript, опціонально) скоротивши імена локальних змінних, створивши менший файл з ідентичною поведінкою.

Як Це Працює

Інструмент розбирає ваш код на абстрактне синтаксичне дерево за допомогою рушія з відкритим кодом terser для JavaScript і clean-css для CSS, а потім генерує з цього дерева найкомпактніший еквівалентний вихідний код: усуваючи коментарі та непотрібні пробіли, скорочуючи числові та кольорові значення там, де це безпечно, а для JavaScript з увімкненим manglingом перейменовуючи ідентифікатори локальної області видимості на найкоротші доступні імена. Оскільки перетворення працює з розібраною структурою, а не з вихідним текстом, отриманий код працює точно так само, як оригінал.

Проблеми, які це вирішує

Зменшення розміру файлу JavaScript або CSS для прискорення завантаження сторінки, особливо перед ручним розгортанням без конвеєра збірки.
Швидке створення готового до продакшену пакета з одного скрипту чи таблиці стилів без налаштування повноцінного інструменту збірки.
Точне відображення того, наскільки зменшився файл, із точним порівнянням розміру до та після.

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

›Чи форматує або покращує вигляд коду цей інструмент також?

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

›Що означає «mangle» для JavaScript?

Mangling перейменовує локальні змінні та параметри функцій на короткі імена, наприклад «a» чи «b», усюди, де це безпечно, що дає додаткову економію байтів окрім простого видалення пробілів. Він ніколи не перейменовує глобально доступні імена, тому не ламає код, що залежить від конкретних глобальних ідентифікаторів.

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

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

›Чому мініфікація завершилася помилкою?

Мініфікаторам потрібен коректний, придатний для розбору JavaScript або CSS. Якщо у вхідних даних є синтаксична помилка, мініфікатор не може побудувати правильне внутрішнє представлення коду. Перевірте код у лінтері чи консолі браузера, щоб знайти точну проблему, виправте її та спробуйте ще раз.

›Чи варто зберігати немініфіковану копію мого коду?

Так. Завжди зберігайте оригінальний, читабельний вихідний код як версію, яку ви редагуєте та підтримуєте, а мініфіковану версію створюйте як етап збірки. Ставтеся до мініфікованого результату як до одноразового артефакту, а не як до файлу для ручного редагування.

Відображає Markdown як живий, очищений HTML поруч із джерелом, із перемикачем для перегляду та копіювання згенерованого HTML.