Мои инструменты

Минификация JS и CSS

Вставьте код — сжатая версия появится по мере ввода, вместе с числом сэкономленных символов.

Как пользоваться

  1. Вставьте JavaScript или CSS в поле — сжатая версия появляется по мере ввода, нажимать ничего не нужно.
  2. Оставьте синтаксис на «Авто» или выберите JavaScript / CSS сами, если определение ошиблось; результат перерисовывается сразу.
  3. В заголовке показано, сколько символов сэкономлено: до → после. Скопируйте вывод или скачайте его файлом .js / .css.

Пример

Ввод

// Cart total with the free-shipping badge
const TAX = 0.08;

function total(items, coupon) {
  let sum = 0;
  for (const item of items) {
    sum += item.price * item.qty;
  }
  if (coupon) {
    sum -= coupon;
  }
  return { amount: sum * (1 + TAX), freeShipping: sum > 50 };
}

Минифицировано

const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}

Комментарий исчез, пробелы схлопнуты, но каждый идентификатор сохраняет своё имя, а каждый литерал — точное написание. Счётчик показывает 279 → 177 символов (−37%).

Правила, ограничения и известные проблемы

  • Только пробелы и комментарии. Ничего не переименовывается, ни один оператор не сворачивается и код не удаляется — поэтому сжатый вывод ведёт себя как исходный, но весит больше, чем результат Terser.
  • Комментарии, начинающиеся с /*! или //!, а также комментарии с @license или @preserve сохраняются; все остальные удаляются.
  • Переводы строк остаются там, где их удаление изменило бы программу: после return / throw / break / continue / yield / async и между двумя операторами, где JavaScript сам вставил бы точку с запятой (a\nb, x={}\nfoo()). Остальной код чаще всего выходит одной строкой.
  • JavaScript разбирается на токены, а не парсится: "/*" внутри строки, регулярного выражения или шаблонной строки не трогается. Деление и регулярные выражения различаются по предыдущему токену; regex, растянутый на строку, считается делением.
  • CSS теряет только те пробелы, которые ничего не значат: вокруг { } ; , > ~ ! и после «:», а также последнюю «;» перед «}». Пробелы-потомки остаются (.a .b не превращается в .a.b), пробел перед «:» остаётся (a :hover не становится a:hover), а calc(100% - 10px) сохраняет пробелы, потому что они часть синтаксиса.
  • Нет переименования (mangle), удаления мёртвого кода и drop_console: это меняет поведение, а кнопка «минифицировать» не должна делать такое молча.
  • Не поддерживается: HTML/SVG (пробелы там зависят от <pre>, <textarea> и строчных элементов), переписывание типов TypeScript, ввод JSX/TSX, source maps и объединение нескольких файлов. JSX определяется и отмечается предупреждением.
  • Незакрытая строка, шаблон, комментарий или url( в конце ввода — предупреждение, а не ошибка: остальной код всё равно минифицируется. Несбалансированные скобки тоже дают предупреждение — это не валидатор.
  • Счётчики считают кодовые точки Unicode, а не байты и не единицы UTF-16; проценты округляются до целого и показываются как +n%, если вывод вырос. Всё выполняется в браузере: ничего не загружается, не сохраняется и не добавляется в URL.
  • Свыше 200 000 символов результат обновляется примерно через 0,6 с после того, как вы закончите ввод; текст никогда не обрезается. Вывод использует LF и не имеет завершающего перевода строки.

Что обычно нужно дальше, когда код стал компактным.

Форматирование кода (beautifier)

JSON-инструменты

Форматирование XML